自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

太空编程

分享精彩,码上快乐!

  • 博客(116)
  • 收藏
  • 关注

原创 Docusaurus 文档侧边栏增加 New 标识

在使用 Docusaurus 搭建文档站点的时候,我们经常要给某个侧边栏菜单增加一些醒目的标识,比如针对新创建的文档给它一个 New 的标识,以提醒过来看文档的用户这是一个新增加项或者新特性(阅读的时候不要遗漏)。然而这个功能是 Docusaurus 本身没有的,但是它向我们提供了定制改造的支持。就是这个 Swizzling 特性。有人可能还不太认识这个单词,看下它的翻译:说白了它的作用就是支持...

2024-01-30 23:00:00 880

原创 网站接入 Giscus 评论功能,显示评论数

纯静态网站或博客,由于没有数据存储功能,经常借助第三方的评论系统以插件的方式集成进来,而又以 Github 的 Discussions[1]和 Issues[2] 功能实现的居多。giscus[3] - 可借助组件库[4]在 React、Vue 和 Svelte 中使用,支持多种语言gitalk[5] - 基于 Github Issue 和 Preact 开发的评论插件utterances[6] ...

2024-01-22 08:03:06 818

原创 一周时间,开发了一款封面图生成工具

介绍这是一款封面图的制作工具,根据简单的配置即可生成一张好看的封面图,目前已有七款主题可以选择。做这个工具的初衷来自平时写文章,都为封面图发愁,去图片 网站上搜索很难找到满意的,而且当你要的图如果要搭配上文章的标题,使用 Photoshop 等软件操作成本太大。为此突然来了灵感,何不自己开发一个在线的工具直接生成。开发前期构思一款工具型的软件,界面一定要简洁,操作方面。所以在布局上没有必要占满整个...

2024-01-20 10:04:20 954

原创 爆改 Docusaurus,给博客文章页面增加了几个功能

一直认为 Docusaurus[1] 默认的博客文章页面太过单调,可能对于只是在网上找一地方单纯记录文字的人来说已经够了。但是我是把它打造成一个用户体验很棒的知识分享产品来打造。首先我们来看看一个好的博客或者也可以扩大点范围叫 Web 信息资讯类产品都有哪些功能?社交平台转发分享点赞,鼓励评论互动快速复制文章链接二维码扫描手机端阅读还有一个我觉得很好的最近几年才在各大产品频繁出现的文字的收听功能,...

2024-01-11 08:02:00 828

原创 CSS 实现风吹动树叶的动画

如题,要实现树叶在风中摇摆的动画,首先准备主体:树叶。这里准备了两张矢量的高清版 SVG 格式的不同种类的树叶。首先我们使用img标签来在网页中显示树叶,然后给它一个名为leaf的类,好给它附加样式。<imgclass="leaf"src="/blog/virtual_safari_leaf.svg"alt="Leaf"/>接下来就是编写 CSS 动画代码,这里利用了...

2024-01-09 10:15:42 680

原创 2023年度总结 - 职业生涯第一个十年

2023年只剩下最后一周,又到了一年一度该做年末总结的时候了。回想起去年,还有人专门建立了一个关于年度总结文章汇总的仓库。读了很多篇别人写的,给了我很多的触动和感想。这里的每篇文章都是关于某个人这一整年的生活和工作的轨迹啊。即使你这一年过的再平凡,也能从别人的视角窥见一种完全不一样的生活图景。仓库的地址:https://github.com/saveweb/review-2022,该仓库接受投稿。...

2024-01-08 09:20:20 849

原创 关于文字渐变的几种效果

文字渐变色 对于色彩比较丰富的一些网站,经常会出现文字渐变的效果,比如 Vue 官网 “渐进式 JavaScript 框架” 中的 “渐进式”,就是使用了如下的渐变效果。以上网格背景实现参考:CSS 实现网格背景[1]它的实现很简单,基本就三步:设置文字颜色透明然后设置背景颜色为线性渐变最后设置背景被裁剪成文字的前景色 background-clip.gradient-text{colo...

2024-01-07 14:32:56 350

原创 Windows 平台好用的截图软件 FastStone Capture

FastStone Capture 可以毫不夸张地说是 Windows 平台最好用的屏幕截图软件。与其说是截图软件,不如说是囊括屏幕录制、滚动截图、高清长图、图片编辑、图片转 PDF 格式、视频转 Gif、屏幕取色等功能的图片处理软件界的瑞士军刀。中文网站[1]下载地址[2]下载安装后试用版免费试用30天,需要购买注册码,我就是通过网上别人分享的。打开软件,出现如下缩小的简洁的悬浮窗口这里来说说我...

2024-01-05 20:23:02 365

原创 探讨便当网格布局

当你在浏览网页的时候,您可能经常会遇到这样一种类型的布局。它被称为便当网格布局,这种布局的灵感来源于日本的传统便当盒子 ????。英文名为 Bento ,所以又叫 Bento Grid。Bento 网格用途广泛,非常适合显示图像、文本、混合媒体等各种内容。它们以紧凑且有组织的方式展示大量内容,使您的网页或应用程序界面看起来干净清爽且能快速抓住人的眼球。这种设计的趋势被认为可能最早来源于 Windows ...

2023-12-11 08:06:52 75

原创 能力提升

思维模式纠正反馈循环纠正反馈循环是一种思维方法,指的是在做任何事情的过程中,不断地检查自己的行为和结果,发现问题并及时改正,从而提高效率和质量。纠正反馈循环的要点有以下几个:明确目标和标准,知道自己想要达到什么样的效果。实施行动计划,按照预定的步骤去执行。评估结果和反馈,检查自己的行为是否符合目标和标准,收集别人对自己的评价和建议。处理问题和改进,根据评估和反馈,找出自己的不足和错误,制定改进措施...

2023-11-30 10:23:07 97

原创 用纯 CSS 实现网格背景

是不是在日常开发中经常遇到实现网格的需求,网格通常对网页中展示的元素能起到很好的定位和对齐作用。这里介绍如何只通过 CSS 来实现这个需求?使用背景图这里我们的背景图使用 SVG 来创建,首先,创建绘出一个正方形,填充白色;然后通过矩形实现垂直和水平的线条,进而分别对它们进行定位居中。<svgxmlns='http://www.w3.org/2000/svg'width='40'hei...

2023-11-29 08:04:04 783

原创 别找了!前端那些好用的网站都在这里了!

一、渐变神器 GradientGradient by ShapeFactory | Chromatic Gradient Generator[1]Gradient 是一款网页渐变设计工具,可以帮助用户轻松创建漂亮的渐变颜色样式,并将其应用到网页、APP 等设计项目中。二、两款阴影工具在线网站1、lingdaima 在线阴影创建:在线创建可视化 CSS阴影效果神器[2]lingdaima 是一款在线...

2023-11-13 08:02:54 84

原创 当 Next.js 遇到 Wordpress 会发生什么?

Wordpress 作为一款小型的内容管理系统,受到很多站长的欢迎,特别是作为个人博客,丰富的插件和主题提供了更多的定制和自由度。自从前后端分离的开发模式兴起之后,Wordpress 又被作为数据存储的后端服务提供接口给第三方的前端页面使用,得益于自身提供的 REST API 功能,在后台设置中可自行开启。还有开发者通过插件的形式进行了更多功能的拓展,开发了博客小程序、商城小程序、社区小程序等。花...

2023-11-04 10:29:25 106

原创 作为十年前端开发的我都用了哪些工具?

好的工具可以让你工作的效率翻倍,同时开发中优先使用已有的开源方案会让你的项目运行的更稳定。在这里一定能找到令你满意的一款工具。????开发工具1. RunJSJavaScript 运行器的桌面端工具,支持 Windows、macOS、Linux 等主流平台。一边写代码一边看运行效果。还可以导入已发布的包。官网:https://runjs.app2. Javascript Playground网页版在线 ...

2023-11-02 09:43:29 52

原创 Next、Nuxt、Nest 这些名称你分得清吗

前端的技术框架层出不穷,各种生态衍生的库更是多到让人眼花缭乱,光是看着这些名字就一时让人分不清谁是干什么的。这与 JavaScript 这门语言的广泛的应用有关,由它衍生出的运行时环境就有 Node.js 和各种浏览器的内核例如:Chrome V8,然后随着各种运行时环境中发展出来的应用场景衍生出来的技术框架。有专门应用于服务端的和客户端的技术,同时也有支持服务端渲染的。基本上前端框架就是围绕着...

2023-11-01 10:15:10 325

原创 学会用数据说话,我的网站统计

我的站点从搭建之日就接入了统计工具,为什么我一直很在意网站数据的统计?????因为我确确实实把自己的网站当产品在做,我需要关注网站每天的受访情况和当前访问用户的在网页上的一些 行为来作为反馈,来验证自己的文章和作品在网上产生的关注度和影响力。有人可能会说,你写个博客为什么要那么功利心?我觉得做凡事都要有个目的性,不达目的不罢休,这样你才能获得长久的动力。有功利心也没什么不好,至少在你成功之前,你需要通过...

2023-10-25 08:22:31 24

原创 Docusaurus 搭建站点不完全指南

介绍它是什么?Docusaurus 是一个基于 React 构建的帮助快速生成静态网站的工具,支持将 MDX 格式编写的文档生成静态 HTML 文件,同时还支持在 Markdown 中嵌入 React 组件。什么情况下你能用到它?使用 markdown 语法书写静态博客;构建一个文档类的站点;一个带有新闻功能和静态页面为主的官方网站;建立一个实时代码演示效果的教程类的网站;集成搜索的个人知识库。如...

2023-10-24 08:13:06 202

原创 【小程序】实现一个定制的音乐播放器

应用地址:https://spacexcode.com/player 介绍 这是为自己制作的一个在线 Web 版的音乐播放器。众所周知,现在市面上的所有的音乐平台都是会员制。而免费的资源却分散在网络上的各个角落,为此,我收集了自己喜欢的音乐,放到自己的服务器上,并制作了这样一个专属歌单的简单的音乐播放器。 实现讲解 该播放器虽然简单,但也是五脏俱全,该有的功能一个都没少。比如常见的音乐播放器,我...

2023-10-20 11:00:24 518

原创 A 标签有趣的样式

在网上看到很多对 <a> 标签样式的设计,觉得很有趣,做了个实现原理和 demo 的整理收集。浏览器默认,Hover 状态有下划线实现原理A 标签在浏览器默认样式下是有下划线的,可以通过 text-decoration 属性进行设置,当值为 none 时隐藏。常见网站的处理都是隐藏它,但为了突出它是一个超链接,会给它一个区别其它文本的颜色。样式代码a{color:#383c...

2023-10-19 10:47:25 266

原创 漂亮的弧形分隔线原来是这样实现的

应用地址:https://spacexcode.com/shapedivider[1]介绍在网页设计师的眼里不应该只有直线,那网页看起来实在太糟糕了!当我们要在区块之间增加一条有弧度的曲线分隔线的时候,我们能想到的实现方式是什么?上面的案例为我们提供了一个灵感,通过绘制一定路径的 SVG 并且设置背景色再重合在某个网页元素上而形成一个整体。实现详解就是下面的这样一个 SVG 图片,通过设置 wid...

2023-10-18 10:40:32 62

原创 如何实现这样一款代码图片生成器

这篇文章我来讲解下如何实现下面这样一个代码编辑器导出图片的工具。应用地址:https://spacexcode.com/codeimage[1] 介绍 要学好一门技术,最好的方式就是实践。上面这样一个代码图片生成器,就是当初为了学习 React 技术开发,特地找的一个功能不是很复杂,但是涉及的技术点又不至于太单一,于是找了这样一个工具型的项目(UI 参照 ray.so[2]),代码从零开始实现来...

2023-10-16 08:58:00 274

原创 双节前把我的网站重构了一遍

赶在中秋国庆假期前,终于将我的网站(https://spacexcode.com/[1])结构定好了,如之前所说,这个网站的定位就是作为自己的前端知识沉淀。内容大致从:前端涉及的基础知识分类汇总(知识库),实战类的代码演练(代码片段),特定技术的深度使用总结(专题),零散知识点的领悟总结(博客)这四个方面展开。还有最重要的一点就是这个网站不仅仅是给自己看的,我希望它像一个产品,面向的是整个互联...

2023-10-14 10:32:14 460

原创 Github 上很火的开源网页图标

Deviconhttps://devicon.dev一系列关于编程语言、设计和开发工具的图标,提供了字体格式和 SVG 代码可以直接应用在你的项目中VSCode Iconshttps://github.com/microsoft/vscode-icons#readme收藏了 Visual Studio Code 软件上的所有的图标Weather Iconshttps://github.com/er...

2023-09-23 23:35:20 428

原创 最近在干什么

不知不觉这个月要过去一大半了,说好的一个月更新一两篇博客又要食言了。就来随便聊聊最近在干的事吧。以图说话,作为程序员还有什么比 Git 提交记录更好说明你最近工作状态的呢。当然这里所有的提交记录仅仅来自一个 Repository (库) ,就是我的另一个编程方面的知识总结站点 https://spacexcode.com/。前面就说过,今年的主要经历会放在这个站点上。这个站点是用 Meta 公司开...

2023-08-24 08:00:18 80

原创 创造者的奢侈

这篇标题的由来是今天看到 MacTalk 公众号的写的关于 Vim 文本编辑器作者 Bram Moolenaar 因病离世的文章。里面讲到 Bram Moolenaar 是一个对技术纯粹热爱并且特别善良的一个人。为了将自己所有的精力 All in 在工作和自己创造的开源软件上,他直到去世都是一个人而没有选择另一半组建家庭。而他的善良体现在用自己的开源软件(Vim)募集捐款捐赠给乌干达的贫困儿童帮...

2023-08-09 17:29:28 53

原创 最近做了两款小工具

最近连着上线了两款在线小工具,乘着热度(是学习的热度,当然最近的温度也是很高,南方到了一年最难熬的湿热天气)抓紧熟练 React 开发,巩固学习的知识点。同时也是为了不断丰富站点的内容,把网站的流量搞上去,早点通过 Google Ads 广告的申请。下面就来介绍下这两款工具: 优雅的分隔线生成器 地址[1]网页中的信息区块之间为了避免单调的直线分隔或者空白间距,设计师经常会设计一些过度效果,而波...

2023-07-10 08:01:05 64

原创 要做一个知识分享站,放到别人收藏夹的那种

最近一有时间就更新“spacexcode.com”站点,这么多年做前端下来,沉淀的有质量的输出不多。想了很久,真正下定了决心,要做一个前端的知识分享站点,能放到别人收藏夹的那种(可不是吃灰哦)。目前是这样规划的,因为站点是采用 Docusaurus 搭建的,主要功能形态有文档、博客、页面三种,文档专注某一类的知识点的串联与汇总,博客分享一些小的知识点有深度的见解与分析。页面则开发一些含功能性的演示...

2023-07-04 08:00:06 51

原创 如何让自己的前端知识更全面?

我们很熟悉在 template 模板中使用自定义指令的方式,直接通过v-指令名,而 Vue 提供了和两个接口,前者可以获取到自定义的指令添加到第二个接口的回调参数中我们如何在 Vue 应用中自定义在 html 中可以使用的元素,可以分三步完成:第一步:通过 Vue 提供的接口import {第三步:在 HTML 结构中直接使用该自定义元素

2023-06-15 11:47:46 461

原创 那些可以当源码学习的优质开源项目分享

本篇收集的是自己平时逛 Github 发现的一些优质的开源项目,为什么收集它?借助优质的开源项目,我们不仅可以拿来二次开发快速实现想要的功能,而且还可以学习里面优秀的代码,提高我们的编程能力。读(拆解)源码一直都是被各程序员大佬极力推荐的一种编程的学习方式。PicXPicX 是一款基于 GitHub API 开发的图床工具,提供图片上传托管、生成图片链接和常用图片工具箱服务。仓库地址:https:...

2023-06-15 08:01:06 226

原创 关于 Vue 的使用中的一些注意事项和技巧

我们很熟悉在 template 模板中使用自定义指令的方式,直接通过v-指令名,而 Vue 提供了和两个接口,前者可以获取到自定义的指令添加到第二个接口的回调参数中我们如何在 Vue 应用中自定义在 html 中可以使用的元素,可以分三步完成:第一步:通过 Vue 提供的接口import {第三步:在 HTML 结构中直接使用该自定义元素

2023-04-14 10:07:09 296

原创 从原理讲解如何实现文章中图片的放大缩小

在开发中经常遇到需要将文章详情中的图片做放大预览处理,如上动图所示。这里以 Vue 框架为例,讲解下简单的实现过程。注意:为了视觉效果,当鼠标移动到图片上的时候显示放大效果,对文章中的 IMG 标签设置。组件作为放大图片的呈现载体。将图片设置撑满整个弹窗的内容区。首先我们从接口获取到文章的详情数据,将文章的主题内容(一段富文本)以。添加点击事件,目的是点击放大的图片后再次隐藏。,然后将图片的路径存储在变量中,用于放大显示。放大镜效果,对放大后的图片标签设置相反的。点击事件,然后捕获到点击目标元素是否是。

2023-04-14 10:06:34 150

原创 如何发布自己的 npm 包?

按照提示打开这个网址,输入第2步配置的邮箱,然后登录邮箱点击邮件进行验证即可。后面如果我们需要升级包,改了包的代码,同步更新到包管理平台 npm,需要修改。执行命令后依次输入用户名、密码、邮箱,最终输出如下内容表示登录成功。:包的入口文件,默认根目录的index.js。我们可以登录官网自己账号下查看发布的包是否成功。要唯一,不能和已发布的包重名,你可以到官网(然后我们在包目录中创建示例代码。:版本号,以后更新也要用到。在本地创建包目录,名为。,进入到目录下面执行。中的版本号,还是执行。

2023-04-14 10:05:02 610

原创 彻底了解 npm、cnpm、yarn、pnpm 几种包管理器

随着前端工程化的应用越来越广,插件和包的管理也逐渐衍生出很多的管理器,常见的几种包管理器如:npm、cnpm、yarn、pnpm,那你知道这些管理器之间有哪些区别吗?

2023-04-14 10:03:39 923

原创 前端 UI 组件库有哪些选择

Vue 3 Element Plus基于 Vue 3,面向设计师和开发者的组件库 。创作者:饿了么团队文档地址:https://element-plus.gitee.io/zh-CN/Ant Design Vueant-design-vue 为 Web 应用提供了丰富的基础 UI 组件,我们还将持续探索企业级应用的最佳 UI 实践。创作者:开源社区文档地址:https://antdv.com/c...

2023-02-12 10:23:59 144

原创 如何防止水印被恶意删除或者隐藏?

继上篇Vue3 实现网页背景水印功能我们了解了常见的网页水印功能是如何实现的,懂原理的都知道水印是通过在网页中添加代码绘制 DOM 元素覆盖在原有的网页上而来的,一旦你打开浏览器中的元素审查,可以通过删除元素或者在元素的样式上操作属性值,就可以用来临时屏蔽水印。为了防止作弊,我们可以利用接口 MutationObserver 对DOM元素进行监听。如果你对监听的元素进行样式属性的设置,或者...

2022-10-31 08:30:23 946

原创 关于 SSR、CSR、SSG 网页渲染技术的解关于 SSR、CSR、SSG 网页渲染技术的解读

之前只听过 SSR 和 CSR 这两个概念,分别指网页是由服务端渲染还是客户端渲染后由浏览器生成相应页面的技术。最原始的网页一直是客户端通过 JavaScript 请求数据并操作 DOM 元素后生成最终的 DOM 树再由浏览器的渲染进程进行绘制,后来为了优化网页的加载速度,将生成页面元素的过程由服务端进行,从而减轻客户端的工作负荷。我们先来回顾下网页的渲染详细过程:浏览器通过请求得到一个 HTML...

2022-10-26 23:13:17 1264

原创 使用 Element 组件搭建在线学习的课程卡片设计

假如我们要做一个在线课程学习的系统,其中我们需要做的一个功能就是课程信息流的一个展示,以等高卡片列表或者瀑布流的方式呈现。首先我们来罗列下这个卡片内应该包括哪些信息点:课程名称课程简介分类信息课程评分等级课程文件课时观看学习人次学习进度这是我们能想到的一些关键信息,考虑到必要性,剔除了一些其它的非必要的信息,需要用户点击进入详情页才能看到。作为一个前端程序员,在没有产品和设计的情况下,如何通过我们...

2022-08-16 16:20:19 486

原创 在线答卷系统的前端设计与数据库系统的设计与实现

如果要你实现一个在线的答题系统,你能想到它该具有哪些功能?当我接到这样一个需求的时候,脑海中立马能想到的就是它有录入题库的功能,创建试卷后可以从题库选择试题,并且可以针对试题进行分数的设置和排序。试卷发布后,用户通过指定的链接进入到试卷页面进行答题,答题完提交后,试卷由指定人进行评分。另外可能需要一个页面记录自己的答卷记录。初步设想罗列基本功能后,然后我们针对每个功能进行细化:1) 题库管理试题...

2022-08-15 11:39:58 1996 2

原创 Vue 自定义指令可以实现哪些有用的功能

Vue 有一些很实用的指令v-showv-ifv-textv-htmlv-bindv-on可以帮助我们实现很复杂的功能,同时它还开辟了钩子供我们自己实现自定义指令。根据自己平时开发总结了一些可以通过指令实现的功能场景:控制页面元素显示与隐藏,可用作控制权限功能页面元素点击事件防抖与节流通过自定义指令控制图片懒加载针对页面特定元素添加自定义行为对输入内容进行过...

2022-08-10 09:41:16 625

原创 Vue3 实现网页背景水印功能

经常有一些公司和组织出于系统文件或信息安全保密的需要,需要在系统网页上增加带有个人标识(系统账号或个人信息)的水印,可以简单防止截图外传首先我们来看这样一个水印功能的实现思路,通常是在我们原有的网页上附上一个 DIV 层,将它设置绝对定位铺满整个窗口,然后 z-index 值尽量往大了设,保证让水印层处于当前网页所有元素的上面,又不影响当前网页的操作。水印上的字体有两种方...

2022-08-06 22:14:28 3179

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除