距离上次更新已经过了 1826 天，文章所描述的内容可能已经发生变化，请留意。

📖 本教程更新于 2022 年 10 月 21 日，教程的内容针对最新稳定版而更新（如果你是旧版，教程会有些出入，请留意）

🦋 Butterfly 已经更新到 4.5.0

📚 文档目录

🚀 快速开始📑 主题页面🛠 主题配置 - 1⚔️ 主题配置 - 2❓ 主题问答⚡️ 进阶教程自定义代码配色添加全局吸底 Aplayer 教程自定义侧边栏标签外挂 (Tag Plugins) 内置标签外挂 Markdown Style testCode Highlight Style test 个性化配置

你可以通过右下角的 简 按钮切换为简体显示

建议

  1. 不要把个人需要的文件 / 图片放在主题 source 文件夹里，因为在升级主题的过程中，可能会把文件覆盖删除了。
    在 Hexo 根目录的 source 文件夹里，创建一个文件夹来放置个人文件 / 图片。
    引用文件直接为 /文件夹名称/文件名

音乐

音乐界面使用了插件 hexo-tag-aplayer
使用方法请参考插件文档

音乐页面只是普通的 page 页，按普通页面操作生成就行。

以下内容可供选择配置

注意： 仍需要安装插件 hexo-tag-aplayer

插件会在每一个文件都插入 js 和 css，为了避免这一情况，3.0 版本内置了 aplayer 需要的 css 和 js。

首先在 Hexo 根目录_config 里配置 asset_inject 为 false

yaml
1
2
aplayer:
  asset_inject: false

然后在你需要使用 aplayer 的页面 Front-matter 添加

markdown
1
aplayer: true

这样只会在需要 aplayer 的页面插入 js 和 css。

如何添加全局 Aplayer 播放，请参考 这篇文章

电影

电影界面使用了插件 hexo-butterfly-douban
使用方法请参考插件的文档。

注意：

  1. hexo-butterfly-douban 会主动生成页面，所以不需要自己创建。
  2. 如遇到无法抓取问题，显示 INFO 0 movies have been loaded in xxx ms, because you are offline or your network is bad
    请过段时间再试试，这我也无能为力。

说说

Artitalk

安装插件 hexo-butterfly-artitalk

具体配置查看插件文档

HexoPlusPlus Talk

安装插件 hexo-butterfly-hpptalk

具体配置查看插件文档

自定义代码配色

点击前往

自定义侧边栏

点击前往

添加全局吸底 Aplayer 教程

点击前往

Icon

Butterfly 主题内置了 Font Awesome V5 图标，目前已更新到 5.13.0，总共有 1,588 个免费图标。由于是国外的图标网站，对于国内的一些网站 Icon 并不支持。如有需要，你可以引入其它的图标服务商。

iconfont

国内最出名的莫过于 iconfont, 功能很强大且图标内容很丰富的矢量图标库。很多 Font Awesome 不支持的图标都可以在这里找到。同时，iconfont 支持选择需要的图标生成 css 链接，减少不必要的 CSS 加载。

注册账号

打开 iconfont 的网站，点击导航栏的人像图标，会跳出注册界面，按要求注册账号。

添加图标入库

选择自己需要的图标，把鼠标移到图标上，会显示三个按钮（依次是添加入库、收藏和下载），而我们需要的是把图标添加入库

添加入库后，你可以看到网站右上角购物车图标显示了 1 字，代表图标已经添加入库，点击购物车图标，会弹出侧边栏显示详情。

已选择的图标会显示在上面，你可以重複上面的操作，把需要的图标添加入库，然后点击添加到项目。

接下来会要求选择项目名称，没有的自己创建一个。

生成 CSS 链接

在添加到项目之后，会跳到项目的详情界面。点击 Font class，然后再点击暂无代码，点击生成文字。网站会自动生成 CSS 链接，我们只需要复制链接就行。

添加链接进主题配置文件

打开主题配置文件，找到 inject 配置，按要求把链接填入

在我们需要使用的地方填入 icon，例如 Menu，图片使用格式为 iconfont icon名字

运行 Butterfly 之后，你就可以看到 menu 的图标生效了

其他添加方法

除了通过引入 CSS 链接使用图标，iconfont 也支持通过其它方法使用图标，具体可查看 iconfont 官方使用文档

其它图标提供商

除了 iconfont，还有 RemixIcon、Flaticon 等等提供商，很多图标可以选择，具体使用方法请参考各自的文档。

图片压缩

Butterfly 主题需要使用到很多图片。如果图片太大，会严重拖慢网站的加载速度。

图片压缩能够有效的缓解这个问题。

除了通过 gulp-imagemin 来压缩图片，还可以通过在綫压缩网站和软件来进行压缩。以下两款是我自己正在使用的工具。网上有很多这样的工具，挑选一款适合自己的就行。

  • tinypng

    一个在綫压缩的网站。压缩后的图片也保留了很高的质量，在知乎上很多人推荐，不过免费版有限制。

  • caesium

    开源软件，支持 Windows 和 macOS。可以批量压缩软件，无限制。

  • imgbot

imgbot 是一款 Github 插件。

安装后，你上传图片到 Github 去，imgbot 会自动压缩图片并推送 PR，我们只需要合併 PR 就行

你可以配置 imgbot 的侦测方法、压缩方法（有损 / 无损），具体可以查看插件的文档

插件推荐

✨ Butterfly 安装文档 (七) 更新日志