hexo博客更新公告

2025

6-1

  1. 魔改了页脚
  2. 改变首页背景图像并添加雪花效果

5-31

  1. 首页添加了轮播图，移除了磁贴
  2. 优化了侧边栏部分，修改了首页布局风格
  3. 魔改并自定义了预加载动画
  4. 优化了文章链接，不用冗余的数字作为链接
  5. 移除了隐私用户政策

3-1

  1. 本blog从zeabur迁移到vercel并更换了一个域名，后续会找一个稳定的服务器。

2-14

  1. butterfly主题从5.1.0更新到5.3.2版本(以后一年更新一次版本)
  2. 美化了界面(魔改教程)
  3. 将原来的文字显示部分作了宽屏适配

2024

11-9

  1. 在网页/privacy下添加了隐私用户政策

10-29

  1. 修复了手机端视频溢出显示部分的问题
  2. 修改了几处笔误和显示问题。
  3. 优化了所有博客的参考部分

10-26

  1. butterfly主题从5.0.0更新到5.1.0版本
  2. 优化了chart插件
  3. 更新了一篇新博客

10-10

  1. butterfly主题从4.13.0更新到5.0.0版本
  2. 首页添加了磁贴,修复了磁贴名字和描述不匹配的问题
  3. 更新了留言板
  4. 优化了搜索功能
  5. 禁止B站视频自动播放
  6. 更新了主页“关于”部分
  7. 修复了几处笔误的问题
  8. 优化了评论功能的选择
  9. 添加了站点工具(谷歌与必应)，优化了文章的描述部分
  10. 优化一下图片无法放大查看的问题

未来更新内容

  1. 子菜单展示内容；方法：通过基本的markdown语言和butterfly专有语法-标签外挂实现效果，建议写成总领式的文章或者展示页面。可以参考此博客我的Blog美化日记——Hexo+Butterfly | Guo Le’s Blog 里面的“volantis”部分，和这个Hexo Built-in Tag Plugins (Hexo内置标签外挂) | Ofra Serendipity
  2. 添加一些CDN加快图片加载速度和其他相关资源速度。06_Hexo-elemecdn 加速 Butterfly 第三方资源 | Mycpen 、Butterfly CDN链接更改指南，替换jsdelivr提升访问速度 | 张洪Heo 注意看是否过时。
  3. 添加统计相关，替代busuanzi的统计，注意看评论中的可以用vercel部署。51la统计体验报告：很全面的惊喜 | 张洪Heo
  4. 换一个好一点的域名，比如com或者cn
  5. 更新算法相关博客并添加数学动画视频或者是算法演示动画
  6. 学习并在博客中添加图表-对于本网站以chartjs的图表为主，涉及UML就用Mermaid,对于精致的图表(比如数据分析)才会用Echart.
  7. 目前使用的是vercel部署，以后考虑用将其部署到国内的服务器(优先腾讯云)并备案。参考网站域名申请为HEXO绑定自己的域名
  8. 添加评论通知手机功能：Hexo增加Valine评论系统 | Cream薄荷糖 twikoo同样，还是优先添加twikoo
  9. 让hexo博客支持emoji表情：https://luckysusu.top/post/hexo_emoji.html

debug经验

目前由于butterfly的版本更新，导致以前的部分功能失效，建议先看官方文档，将对应过时的代码注释或者去除，没有的代码添加，然后再根据F12检查对应的板块，用前端的知识去搜查问题发生的地点和原因，然后再纠错。

hexo框架更新

参考此博客如何更新Hexo及插件的版本？如何更新主题版本？ | 张洪Heo (zhheo.com)

简单来说就是先进入博客根目录然后在终端输入npm update ，确保node.js包是最新版本。然后输入npm outdated 看哪些插件已经过时，可以更新。然后修改根目录的package.json文件，将对应插件名称所对应的版本号更改为要更新的版本号。再在终端输入npm install --save 开始更新hexo及其插件，通过hexo version 查看是否已经更新

butterfly主题更新

更新前记得留下blog快照

官方文档：Butterfly 文檔(一) 快速開始 | Butterfly

从butterfly5.0.0版本开始，可以直接在hexo根目录下输入npm update hexo-theme-butterfly

如果不行，就在你的博客/themes/butterfly 根目录下打开git bash并输入git pull 即可更新

建议以后更新博客直接在命令行输入hexo cl;hexo g 一键清除与生成，多个分号代表分别执行。

魔改内容

我主要是参考以下几个链接对hexo和butterfly博客魔改的，由于每一次主题更新都会导致原来魔改的地方失效，建议一年更新一次并保存备份，然后按照以下链接更新对应的魔改部分

魔改加载动画

Loading Animation | Akilarの糖果屋 此作者基于旧版hexo修改，其第一步的loading.pug和补充内容中的loading-js.pug均在index.pug文件中添加，其他不变

如果想要添加自定义的动画

  1. 修改[Blogroot]\themes\butterfly\layout\includes\loading\index.pug 中语句，添加when ..... include..
  2. 然后在[Blogroot]\themes\butterfly\layout\includes\loading\load_style\目录下 添加对应与第一步同名的 .pug文件
  3. 修改[Blogroot]\themes\butterfly\source\css\_layout\loading.styl，同样添加对应的代码
  4. 在[Blogroot]\themes\butterfly\source\css\_load_style\目录下添加对应动画的.styl 文件
  5. 修改[Blogroot]\_config.butterfly.yml的preloader配置项，将load_style: 改成你要的部分

魔改字体

参考此篇博客(部分地方过时)， hexo butterfly主题下更换字体 | ZHI’S BLOG ，思路就是打开blog\source 目录，在下面建立一个font文件夹，然后将字体放入此文件夹，再修改blog\source\css\custom.css 文件(按照博客方式写)即可。因为我魔改了，所以不能完全按照博客所说的直接调用另一个css文件，魔改参考 butterfly魔改教程（二） | 山花终将烂漫

魔改页脚

主要参考的链接：hexo-butterfly魔改美化 | Yan Zhang’s blog

如果想要添加“推荐友链”或者修改“猜你想看”部分，在[BlogRoot]/themes/butterfly/layout/includes/footer.pug 部分按照路由或者网址 的格式修改(我的和原作者不同，尤其是推荐友链部分，我没有使用img标签而是用a)

如果想要添加徽章，在shields.io 上生成一个。参考下图

demo_blog_001.png

个人hexo博客更新

以下是我写博客过程中常用的一些配置和功能

标签和分类：在md文件开头的是配置部分，tags是标签(就是在文档末尾出现的几个按钮文字)，可以有很多个;categories是分类，建议将其分为大类，小类从属于大类。在首页中博客只显示发布日期，更新日期、分类和标签(第一个).

示例代码如下

1
2
3
4
tags: 
 - blog
 - 测试
 - 教程

部署：我是参考这个博客部署到vercel上的参考链接 。注意一旦部署到新的服务器上都要更新valine上的leancloud上的安全中心-web安全域名

评论功能：我设置的是twikoo静态评论控制+Valine评论，注意如果侧边栏最新评论不显示的话参考此博客修改：解决 Hexo ButterFly 主题中最新评论功能模块出现无法获取评论的问题 | 梦家博客

文章置顶功能：可以直接在文章的 front-matter 区域里添加 sticky: 1 属性来把这篇文章置顶。数值越大，置顶的优先级越大。

文章加密功能：文章加密插件 参考链接 也许以后添加。

博客撰写：

  1. hexo会自动给分级标题编号，不需要自己添加
  2. 不要给标点符号加标签或者是特性，容易出现显示问题。

图片方面

  • 方法1：通过picgo图床实现图片上传。参考链接

  • 方法2-本地上传图片：参考此链接 简单来说就是在post文件夹内对应每一个md文件创建同名的文件夹，然后将图片放在里面，需要引用的时候就按照![](./文件夹名/图片名.png 进行引用。注意图片必须放在与md文件同名的文件夹下且不允许中文命名。

  • 方法3：使用其他的图床网站如SMMS。上传图片后，点击markdown格式就可以复制图片路径，再用markdown语法粘贴即可。

音乐：我使用的是网易云的平台，如果要修改就在自己设置的那个歌单中修改对应的歌曲即可。

导航栏设置：在_config.butterfly.yml 文件中搜索menu, 注意格式要和下面的一样，可以自行设置。 图标（就是||后面的内容）在这里Font Awesome Icons_ 搜索然后复制class= " 复制这里的内容" 替代即可。

系列文章：在文章的 front-matter 上添加参数 series，并给予一個标签

1
2
{% series %}
{% series [series name] %}

首页轮播：在文章的front-matter 上添加参数swiper_index: 1 数字越大越靠前。

自定义URL：分享链接的时候如果标题是中文，就会出现分隔符中文的情况，参考https://blog.csdn.net/weixin_42464282/article/details/130982114 教你安装abbrlink插件并为每一个博客自定义URL链接，防止URL过长。