📖 本教程更新于 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

1
2
aplayer:
  asset_inject: false

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

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 安装文档(七) 更新日志