Butterfly 进阶教程
Butterfly 进阶教程
重要建议
不要把个人需要的文件/图片放在主题 source 文件夹里，因为升级主题时可能会被覆盖删除。
正确做法：在 Hexo 根目录的 source 文件夹里创建一个文件夹来放置个人文件/图片，引用文件直接为 /文件夹名称/文件名
音乐功能
基础配置
音乐界面使用了插件 hexo-tag-aplayer，使用方法请参考插件文档
音乐页面是普通的 page 页，按普通页面操作生成即可。
优化配置
为了避免在每个文件都插入 js 和 css，可以进行以下配置：
- 在 Hexo 根目录
_config.yml中配置：
1 | aplayer: |
- 在需要使用 aplayer 的页面 front-matter 中添加：
1 | aplayer: true |
这样只会在需要 aplayer 的页面插入 js 和 css。
电影功能
电影界面使用了插件 hexo-douban
注意事项：
- hexo-douban 会主动生成页面，不需要自己创建
- 如遇到无法抓取问题，显示
INFO 0 movies have been loaded in xxx ms, because you are offline or your network is bad，请过段时间再试试
说说功能
Artitalk
安装插件：
1 | npm install hexo-butterfly-artitalk |
查看插件文档进行配置
HexoPlusPlus Talk
安装插件：
1 | npm install hexo-butterfly-hpptalk |
查看插件文档进行配置
图标系统
Font Awesome
Butterfly 主题内置了 Font Awesome V5（已更新到 5.13.0），共有 1,588 个免费图标。
iconfont（国内推荐）
国内最出名的是 iconfont，功能强大且图标丰富。
使用步骤
注册账号：打开 iconfont 网站，点击导航栏的人像图标进行注册
添加图标：选择需要的图标，点击添加入库按钮
生成 CSS 链接：
- 点击购物车图标
- 点击”添加到项目”
- 在项目详情页点击”Font class”
- 点击”暂无代码，点击生成”
- 复制生成的 CSS 链接
添加到主题配置：打开主题配置文件，找到
inject配置，填入 CSS 链接使用图标：在需要使用的地方填入 icon，格式为
iconfont icon名字
其他图标提供商
除了 iconfont，还有：
图片压缩
Butterfly 主题需要使用很多图片。图片太大会严重拖慢网站加载速度。
在线压缩工具
TinyPNG：https://tinypng.com/
- 在线压缩网站
- 压缩后保留高质量
- 免费版有限制
本地压缩软件
Caesium：https://saerasoft.com/caesium/
- 开源软件
- 支持 Windows 和 macOS
- 支持批量压缩
- 无限制
GitHub 自动压缩
ImgBot：https://github.com/marketplace/imgbot
- GitHub 插件
- 上传图片到 GitHub 后自动压缩
- 自动推送 PR
- 支持配置压缩方法（有损/无损）
插件推荐
hexo-abbrlink
- 功能：将链接 permalink 转为数字
- 优点：配置容易，生成时自动转为数字
hexo-generator-feed
- 功能：生成 RSS 文件
hexo-filter-nofollow
- 功能：为所有外链添加
rel="noopener external nofollow noreferrer" - 优点：加强网站 SEO，防止权重流失
hexo-generator-sitemap
- 功能：生成 sitemap 文件
hexo-generator-baidu-sitemap
- 功能：专门为百度生成 sitemap
自定义代码配色
可以自定义代码块的配色方案，具体方法请参考相关教程。
自定义侧边栏
可以根据需要自定义侧边栏的内容和样式。
全局吸底 Aplayer
可以添加全局吸底的音乐播放器，为用户提供更好的音乐体验。
总结
通过这些进阶配置和优化，你可以：
- 提升网站性能
- 增强用户体验
- 扩展网站功能
- 优化 SEO 效果
建议根据自己的需求逐步应用这些优化方案。