Hexo Butterfly 主题配置修改文档
写在前面：
我今天对我的 Hexo Butterfly 主题进行了大量的修改。为了方便日后整理，我把两份文件diff后让AI帮我生成了修改文档。此文档仅用于我个人日后重新配置时使用
Hexo Butterfly 主题配置修改文档
本文档记录了对
_config.yml（初始配置）到_config.butterfly.yml（修改后配置）的所有修改项，方便日后重新配置时快速查阅。修改日期：2026-07-01
目录
导航设置
1. 导航栏固定
- 配置项：
nav.fixed - 修改类型：删除
- 原始值：
false - 修改后：删除该配置项
- 说明：不再固定导航栏
2. 菜单项配置
- 配置项：
menu - 修改类型：新增/启用
- 原始值：全部注释掉，无实际菜单
- 修改后：
1
2
3
4
5Home: / || fas fa-home
Categories: /categories/ || fa fa-th-large
Tags: /tags/ || fa fa-tags
Archives: /archives/ || fa fa-archive
About: /about/ || fa fa-user - 说明：启用了首页、分类、标签、归档、关于五个导航菜单
代码块设置
3. Mac 风格代码块
- 配置项：
code_blocks.macStyle - 原始值：
false - 修改后：
true - 说明：启用 Mac 风格代码块（显示圆角和红黄绿按钮）
4. 代码块高度限制
- 配置项：
code_blocks.height_limit - 原始值：
false - 修改后：
200 - 说明：代码块高度限制为 200px
5. 全屏按钮
- 配置项：
code_blocks.fullpage - 原始值：
false - 修改后：
true - 说明：启用代码块全屏按钮
社交媒体链接
6. GitHub 链接
- 配置项：
social - 修改类型：新增
- 原始值：注释掉
- 修改后：
fab fa-github: https://github.com/zhangxixi2008 || Github || '#24292e' - 说明：添加 GitHub 社交链接
7. 邮箱链接
- 配置项：
social - 修改类型：新增
- 原始值：注释掉
- 修改后：
fas fa-envelope: mailto:2008zhangtx@gmail.com || Email || '#4a7dbe' - 说明：添加邮箱联系链接
图片设置
8. 网站图标
- 配置项：
favicon - 修改类型：新增
- 原始值：注释掉
- 修改后：
/img/avatar.png - 说明：设置网站图标为头像图片
9. 头像设置
- 配置项：
avatar - 修改类型：新增/启用
- 原始值：注释掉
- 修改后：
1
2
3avatar:
img: /img/avatar.png
effect: false - 说明：启用头像，不启用动画效果
10. 默认横幅图片
- 配置项：
default_top_img - 原始值：空
- 修改后：
/img/background5.png - 说明：设置默认页面横幅图片
11. 首页横幅图片
- 配置项：
index_img - 原始值：空
- 修改后：
/img/background.png - 说明：设置首页顶部横幅图片
12. 归档页横幅图片
- 配置项：
archive_img - 原始值：空
- 修改后：
/img/background2.png - 说明：设置归档页顶部横幅图片
13. 标签页横幅图片
- 配置项：
tag_img - 原始值：空
- 修改后：
/img/background3.png - 说明：设置标签页顶部横幅图片
14. 各标签独立横幅
- 配置项：
tag_per_img - 原始值：空
- 修改后：
/img/background3.png - 说明：设置各标签页的默认横幅图片
15. 分类页横幅图片
- 配置项：
category_img - 原始值：空
- 修改后：
/img/background4.png - 说明：设置分类页顶部横幅图片
16. 各分类独立横幅
- 配置项：
category_per_img - 原始值：空
- 修改后：
/img/background4.png - 说明：设置各分类页的默认横幅图片
17. 页脚背景图片
- 配置项：
footer_img - 原始值：
false - 修改后：
/img/footimg.png - 说明：启用并设置页脚背景图片
18. 网站背景
- 配置项：
background - 原始值：空
- 修改后：
https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png - 说明：设置网站全局背景图片
19. 默认文章封面
- 配置项：
cover.default_cover - 修改类型：新增
- 原始值：空数组
- 修改后：添加了 20 张默认封面图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21default_cover:
- /page_img/p1.png
- /page_img/p2.png
- /page_img/p3.png
- /page_img/p4.png
- /page_img/p5.png
- /page_img/p6.png
- /page_img/p7.png
- /page_img/p8.png
- /page_img/p9.png
- /page_img/p10.png
- /page_img/p11.png
- /page_img/p12.png
- /page_img/p13.png
- /page_img/p14.png
- /page_img/p15.png
- /page_img/p16.png
- /page_img/p17.png
- /page_img/p18.png
- /page_img/p19.png
- /page_img/p20.png - 说明：当文章未设置封面时，随机从这 20 张图片中选择一张作为封面
20. 文章 404 图片
- 配置项：
error_img.post_page - 原始值：
/img/404.jpg - 修改后：
/img/404.png - 说明：修改文章页面 404 错误图片格式为 png
21. 404 页面启用
- 配置项：
error_404.enable - 原始值：
false - 修改后：
true - 说明：启用自定义 404 页面
22. 404 页面背景
- 配置项：
error_404.background - 原始值：
/img/error-page.png - 修改后：
/img/page_not_found.png - 说明：更换 404 页面背景图片
首页设置
23. 首页标签显示
- 配置项：
post_meta.page.tags - 原始值：
false - 修改后：
true - 说明：首页文章元信息中显示标签
24. 文章页日期类型
- 配置项：
post_meta.post.date_type - 原始值：
both - 修改后：
created - 说明：文章页只显示创建日期，不显示更新日期
25. 首页副标题启用
- 配置项：
subtitle.enable - 原始值：
false - 修改后：
true - 说明：启用首页副标题显示
26. 副标题来源
- 配置项：
subtitle.source - 原始值：
false - 修改后：
3 - 说明：使用今日诗词（jinrishici.com）作为副标题来源
27. 副标题内容
- 配置项：
subtitle.sub - 原始值：空
- 修改后：
愿你成为时代栋梁！ - 说明：设置首页副标题文字
28. 首页摘要显示方式
- 配置项：
index_post_content.method - 原始值：
3 - 修改后：
2 - 说明：首页摘要显示方式改为：优先使用 description，否则使用自动摘要
29. 首页摘要长度
- 配置项：
index_post_content.length - 原始值：
500 - 修改后：
300 - 说明：首页摘要长度限制为 300 字
文章设置
30. 目录简洁样式
- 配置项：
toc.style_simple - 原始值：
false - 修改后：
true - 说明：启用目录简洁样式
31. 版权信息解码
- 配置项：
post_copyright.decode - 原始值：
false - 修改后：
true - 说明：对版权信息中的作者链接进行解码（用于中文链接）
32. 文章过期提示
- 配置项：
noticeOutdate.enable - 原始值：
false - 修改后：
true - 说明：启用文章过期提示功能
页脚设置
33. 自定义页脚文字
- 配置项：
footer.custom_text - 原始值：空
- 修改后：
你的未来定闪闪发光、光芒万丈！ - 说明：在页脚添加自定义文字
侧边栏设置
34. 网站信息显示
- 配置项：
aside.display.webinfo - 修改类型：新增
- 原始值：无此配置
- 修改后：
true - 说明：在归档/标签/分类页面显示网站信息
35. 作者描述
- 配置项：
aside.card_author.description - 原始值：空
- 修改后：
如风自由、如星璀璨 - 说明：设置侧边栏作者卡片描述文字
36. 公告内容
- 配置项：
aside.card_announcement.content - 原始值：
This is zhangxixi's Blog - 修改后：
本博客中有部分内容搬运自博客园（本人初中博客）和CSDN（本人高中博客），若图片加载不出，可以点击文章最上方链接回原网页访问 - 说明：更新侧边栏公告内容
37. 分类数量限制
- 配置项：
aside.card_categories.limit - 原始值：
8 - 修改后：
12 - 说明：侧边栏分类卡片最多显示 12 个分类
38. 标签数量限制
- 配置项：
aside.card_tags.limit - 原始值：
40 - 修改后：
100 - 说明：侧边栏标签卡片最多显示 100 个标签
39. 标签颜色
- 配置项：
aside.card_tags.color - 原始值：
false - 修改后：
true - 说明：启用标签云彩色显示
40. 归档类型
- 配置项：
aside.card_archives.type - 原始值：
monthly - 修改后：
yearly - 说明：侧边栏归档按年显示
41. 归档格式
- 配置项：
aside.card_archives.format - 原始值：
MMMM YYYY - 修改后：
YYYY - 说明：归档显示格式改为仅显示年份
42. 归档数量限制
- 配置项：
aside.card_archives.limit - 原始值：
8 - 修改后：
0 - 说明：显示全部归档（0 表示不限制）
43. 网站运行时间
- 配置项：
aside.card_webinfo.runtime_date - 原始值：空
- 修改后：
2026/7/1 - 说明：设置网站运行时间的起始日期
右下角按钮
44. 繁简转换
- 配置项：
translate.enable - 原始值：
false - 修改后：
true - 说明：启用繁简中文转换功能
45. 繁简转换按钮文字
- 配置项：
translate.msgToSimplifiedChinese - 原始值：
'簡' - 修改后：
'简' - 说明：修改转换按钮文字为简体"简"
全局设置
46. 字数统计
- 配置项：
wordcount.enable - 原始值：
false - 修改后：
true - 说明：启用文章字数统计功能（需要安装 hexo-wordcount 插件）
网站分析
47. Microsoft Clarity
- 配置项：
microsoft_clarity - 原始值：空
- 修改后：
xfiga2r6c8 - 说明：添加 Microsoft Clarity 分析追踪 ID
美化特效
48. 两端对齐
- 配置项：
text_align_justify - 原始值：
false - 修改后：
true - 说明：启用文章两端对齐
49. 加载动画
- 配置项：
preloader.enable - 原始值：
false - 修改后：
true - 说明：启用页面加载动画
50. 文章内容美化
- 配置项：
beautify.enable - 原始值：
false - 修改后：
true - 说明：启用文章内容美化功能
51. 标题前缀图标
- 配置项：
beautify.title_prefix_icon - 原始值：空
- 修改后：
'\f0c1' - 说明：设置文章标题前缀图标（Font Awesome 链接图标）
52. 标题前缀图标颜色
- 配置项：
beautify.title_prefix_icon_color - 原始值：空
- 修改后：
'#F47466' - 说明：设置标题前缀图标颜色为橙红色
53. 飘动彩带
- 配置项：
canvas_fluttering_ribbon.enable - 原始值：
false - 修改后：
true - 说明：启用飘动彩带背景特效
54. 飘动彩带移动端
- 配置项：
canvas_fluttering_ribbon.mobile - 原始值：
false - 修改后：
true - 说明：移动端也显示飘动彩带
55. 烟花特效
- 配置项：
fireworks.enable - 原始值：
false - 修改后：
true - 说明：启用鼠标点击烟花特效
56. 灯箱
- 配置项：
lightbox - 原始值：空
- 修改后：
fancybox - 说明：启用 fancybox 图片灯箱效果
其他设置
57. Toast 通知
- 配置项：
snackbar.enable - 原始值：
false - 修改后：
true - 说明：启用 Snackbar Toast 通知功能
58. 图片懒加载
- 配置项：
lazyload.enable - 原始值：
false - 修改后：
true - 说明：启用图片懒加载功能
59. 原生懒加载
- 配置项：
lazyload.native - 原始值：
false - 修改后：
true - 说明：使用浏览器原生懒加载
60. 模糊占位效果
- 配置项：
lazyload.blur - 原始值：
false - 修改后：
true - 说明：启用图片加载时的模糊占位效果
修改统计
| 分类 | 修改数量 |
|---|---|
| 导航设置 | 2 |
| 代码块设置 | 3 |
| 社交媒体链接 | 2 |
| 图片设置 | 15 |
| 首页设置 | 7 |
| 文章设置 | 3 |
| 页脚设置 | 1 |
| 侧边栏设置 | 10 |
| 右下角按钮 | 2 |
| 全局设置 | 1 |
| 网站分析 | 1 |
| 美化特效 | 7 |
| 其他设置 | 4 |
| 总计 | 60 |
备注
- 本配置文件基于 Butterfly 主题，修改时需注意 YAML 语法缩进
- 图片路径需确保对应文件存在于
source/img/或source/page_img/目录下 - 部分功能需要安装额外插件（如 hexo-wordcount）
- 如需恢复默认配置，可参考
_config.yml原始文件
文档生成时间：2026-07-01
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 zhangxixi的博客！
相关推荐
2026-07-01
博客园文章搬运至Hexo
博客园文章导入Hexo 获取文章 在博客园后台可以选择备份下载所有文章。 很久以前可以以 md 形式导出（现在不行了），而我那个时候导出过，所以我就有所有原始md文件 然后再以 xml 形式导出，这是为了补充我们前面的yml。 接下来我们把xml和md进行合并： 首先保证目录结构是这样子的： 123456789D:\cnblog\├─ cnblogs_backup.xml # 博客园后台导出的官方备份文件├─ md_original/ # 你之前下载好的所有MD原稿（带子目录分类也没关系）│ ├─ 算法/│ │ └─ DP/│ │ └...
2026-07-01
Hexo数据统计页面
Hexo数据统计页面 参考文档：Hexo 博客文章统计图 | Eurkon 新建page： 1hexo new page charts 注入至 _config.butterfly.yml： 123inject: head: - <script src="https://npm.elemecdn.com/echarts@4.9.0/dist/echarts.min.js"></script> 在 \themes\butterfly\scripts\helpers\ 中新建 charts.js，注入： 1234567891011121314...
2026-06-30
Hexo启动搜索功能
Hexo启动搜索功能 下载插件 hexo-generator-searchdb 1npm install hexo-generator-searchdb --save 在Butterfly的 Search 项中，打开本地搜索： 随后即可使用
2026-05-31
hexo博客上传github page
hexo博客上传github page 本文搬运自本人高中时期CSDN博客，若图片加载不出来，可到原文查看：https://blog.csdn.net/zhangtingxiqwq/article/details/161562364 在github上新建仓库，仓库名必须严格为 用户名.github.io， 并在setting里打开github page的设置 在 _config.yml 加入： 1234deploy: type: git # 部署类型，如 git, heroku 等 repo: https://github.com/2008zhangtx-oss/20...
2026-07-01
Hexo 生成永久文章链接
Hexo 生成永久文章链接 参考文献：https://blog.csdn.net/xinruodingshui/article/details/105682550 Hexo默认生成的文章链接规则是按日期标题，非常臃肿，URL层级很深，而且一旦修改就会404。 我们可以使用插件生成唯一的链接 安装 1npm install hexo-abbrlink --save 配置 在 _config.yml 文件中： 12345# permalink: :year/:month/:day/:title/permalink: p/:abbrlink.html # p 是自定义的前缀abbrlink:...
2026-05-30
Hexo博客本地配置
Hexo博客本地配置 本文搬运自本人高中时期CSDN博客，若图片加载不出来，可到原文查看：https://blog.csdn.net/zhangtingxiqwq/article/details/161539158 0. 环境 nodejs git 1. 本地安装 选择一个本地文件夹路劲（不带中文） 右键 open git bash here 输入： 1npm install -g hexo-cli 安装hexo 4. 输入 hexo -v ，查看是否安装成功： 2. 初始化 继续输入： 1hexo init 然后我报错了 换个方法： 在 htt...