前言在我进入前端开发岗位之后，就有了想搭建博客的想法，在里面记录自己的工作和生活，还可以自己写文章。但碍于工作时间和自己的基础还很薄弱，一拖再拖，终于在2022年初在网上了解资源后，决定采用 Hexo 博客框架搭配 Butterfly 主题，再经过一段时间摸索之后，博客已初现雌形，感觉还不错，有想法的伙伴可以参考这篇文章 搭建一个个人博客需要什么呢❓唯一需要的就是：耐心、坚持，为什么呢❓ 在你搭建博客的过程中，你会遇到很多问题，你需要自己在网上或者博客社区、QQ群等渠道去寻找答案，有时候一个问题就要查半天，最后还有可能没解决，但是当问题解决时的满足感令人愉悦。 你需要了解很多知识，比如 Git、Github、域名服务、前端三剑客:[JS、CSS、HTML]、你没接触过的文件格式、MD文件语法、博客优化知识等，当然了，这些收益都是相对的。 博客需要美化，你需要自己去设计自己的博客，怎样才能让网站看起来比较漂亮，文章需要搭配怎样的封面图，使用怎样的图标等等，都需要你自己去想，当然了，你也可以参考一些大佬的网站。 博客前置工作搭建博客之前，你需要做以下准备工作： ...

前言Butterfly 主题自带的 Loading 效果晒微显得单调，在参考了 Akilar の糖果屋 等大佬的教程后，决定亲自添加一款比较自然的加载动画 魔改步骤 在配置本帖的魔改内容之前，请确保您已经完成了 Akilar の糖果屋 大佬的前置教程，即基于 Butterfly 的加载动画修改： Loading Animationhttps://akilar.top/posts/3d221bf2/ 完成后，在此基础上，继续新增加载动画，新建 [Blogroot]\themes\butterfly\layout\includes\loading\load_style\gooey.pug 1234#loading-box div.centered div.blob-1 div.blob-2 新建 [Blogroot]\themes\butterfly\source\css\_load_style\gooey.styl 123456789101112131415161718192021222324252627282930313233343536373839404142434 ...

前言Butterfly 主题提供的图标在视觉上稍微有点平淡，我们可以在博客上引入我们喜欢的多彩图标。这里我们引入了 阿里矢量图标库,请确保你已经完成了前置教程： 引入 Iconfont 阿里图标矢量库/post/3ab4ab8f.html/ 顶部菜单 Menu 图标修改配置文件 [Blogroot]\themes\butterfly\_config.yml 123456789101112131415menu: 博客: / || iconfont cyan-a-guoshushuzhiwu 时间轴: /archives/ || iconfont cyan-a-caozhiwu 归档|| iconfont cyan-a-huahuaduozhiwu: 标签: /tags/ || iconfont cyan-a-meiguihuahuahuaduozhiwu 分类: /categories/ || iconfont cyan-a-shuiguoguoshi 生活|| iconfont cyan-a-huahuaduopenzaizhiwu: 似水年华: / ...

文章转载自 Akilarの糖果屋，如有侵权，请联系作者，本站仅当学习使用。 Iconfont简介阿里图标库全名阿里巴巴矢量图标库。提供了丰富的免费图标资源。并且支持多种引入方式。 阿里巴巴矢量图标库https://www.iconfont.cn/ 本帖讨论的引入方案虽然是基于 Butterfly 主题进行的，但是仅仅是特化了引入写法（Butterfly 的文件引入使用 inject 配置项), 整体内容是完全可以兼容其他主题的。读者可以在熟读教程后自行修改引入方案。 新建图标项目 访问阿里巴巴矢量图标库 , 注册登录。 搜索自己心仪的图标，然后选择添加入库，加到购物车。 选择完毕后点击右上角的购物车图标，打开侧栏，选择添加到项目，如果没有项目就新建一个。 可以通过上方顶栏菜单 -> 资源管理 -> 我的项目，找到之前添加的图标项目。现在的 iconfont 可以在图标库的项目设置里直接打开彩色设置，然后采用 fontclass 的引用方式即可使用多彩图标。但是单一项目彩色图标上限是 40 个图标，酌情采用。 引入图标 官方文档提供的引入方案 ...

Github 徽章 GitHub 徽标可以直接通过 Shields.io 在线生成。 理论上可以放在页面的任何地方。教程案例是添加在页脚。 工具网站包括： 徽标生成网站:shields 图标查询网站:simpleicons html 压缩网站:htmlpack 转义字符查询 Shields.io简介Shields.io 是用的最多的徽章制作工具，支持静态动态，各种样式尺寸颜色格式，svg，png 具体的使用方式可访问： Shields.iohttps://shields.io/ 具体步骤 通过 Shields.io 在线生成。 label: 标签，徽标左侧内容 message: 信息，徽标右侧内容 color: 色值，支持支持十六进制、rgb、rgba、hsl、hsla 和 css 命名颜色。十六进制记得删除前面的 #号 输入相关信息后，点击 make badge 即可得到徽标的 URL。可以用 img 标签引用，写法简单。不过正式写法建议用 object 标签引用，写法示例如下。123456<!-- label=Frame，Message=Hexo，colo ...

文章转载自 Akilarの糖果屋，如有侵权，请联系作者，本站仅当学习使用。 Vercel 简介Vercel 提供免费的 serverless 和全局 CDN 服务，使用者只需要通过几步简单的注册以及导入仓库即可完成部署，从个人体验来看，Vercel 现已支持根据 username.github.io 的 master 分支是否变动来启动自动部署。 2020 年 10 月后 github 新建仓库默认分支改为 main，注意更改。 使用教程 访问 Vercel 官网，点击右上角的 sign up 进行注册 极有可能遇到的 bug 若注册时提示 Error:This user account is blocked.Contact support@vercel.com for more information.这是由于 Vercel 不支持大部分国内邮箱。可以将 github 账号主邮箱改为 Gmail 邮箱。但是根据群友反应，将 github 账号主邮箱切换为 Gmail 以后，Vercel 又会提示需要使用手机号码验证。 ...

文章转载自 Akilarの糖果屋，如有侵权，请联系作者，本站仅当学习使用。 前言gulp 能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括 css、js、html 乃至各类格式的图片文件。（图片文件的压缩往往只能节省几十 KB，效果远远不如 imagine、tinypng 等压缩方式，所以此处不再写使用 gulp 压缩图片的内容）。 配置教程 安装 Gulp 插件：在博客根目录 [Blogroot] 打开终端，输入： 12npm install --global gulp-cli #全局安装gulp指令集npm install gulp --save #安装gulp插件 安装各个下属插件以实现对各类静态资源的压缩。 压缩 HTML： 123npm install gulp-htmlclean --save-devnpm install gulp-html-minifier-terser --save-dev# 用gulp-html-minifier-terser可以压缩HTML中的ES6语法 压缩 CSS： 1npm install gulp-clean-css -- ...

樱花雨 Cherry 背景特效 新建 [Blogroot]\themes\butterfly\source\css\custom\index.css, 添加 Canvas 默认样式。 12345678910.cherry-container { position: fixed; width: 100%; height: 100vh; margin: 0; padding: 0; left: 0; top: 0; z-index: -1;} 修改 [Blogroot]\themes\butterfly\layout\includes\layout.pug,在第 19 行左右添加元素 id 绑定 1234 if page.type !== '404'+ #jsi-cherry-container(class='cherry-container') #body-wrap(class=pageType) include ./header/index.pug 新建 [Blogroo ...