hexo博客更新公告

2025

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](https://www.huangshiqing.website/2022/11/03/HexoTagPlugins/)
  2. 添加一下赞助墙
  3. 更新算法相关博客并添加数学动画视频或者是算法演示动画
  4. 学习并在博客中添加图表-对于本网站以chartjs的图表为主,涉及UML就用Mermaid,对于精致的图表(比如数据分析)才会用Echart.
  5. 考虑21cloudbox或者阿里云等托管平台部署网站,实在不行就用域名+CDN的方式让游客能间接访问我的github.io网站。
  6. 如果托管平台不负责,就早日申请SSL证书、域名绑定(可选)和完成网站备案,参考网站将 Hexo 博客部署至 Netlify | Zander Hsueh 域名申请为HEXO绑定自己的域名
  7. 添加评论通知手机功能

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博客魔改的,由于每一次主题更新都会导致原来魔改的地方失效,建议一年更新一次并保存备份,然后按照以下链接更新对应的魔改部分

个人hexo博客更新

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

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

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

示例代码如下

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

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

评论功能:我设置的是twikoo静态评论控制+Valine评论

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

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

博客撰写

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

磁贴功能:我干脆把主设置里面的descr部分删掉,没写就是对的o( ̄▽ ̄)ブ(属于魔改教程中的)

图片方面

  • 方法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] %}