Butterfly主题之开始使用
第一节：写在前面
1.01：主题选择
在搭建 Hexo 博客的过程中，我尝试过很多主题，每个主题都有自己鲜明的特点。截止到我发布这篇文章，Hexo 已经有 400 多个主题了，但是其中能拿得出手的也就二十多个。如果你是第一玩 Hexo，面对这么多主题肯定得眼花缭乱，尤其像我这种完美主义者，再加上患有很严重的选择困难症，真是不知道该选择哪个好！往往是刚开始选择了一个主题并折腾了一番以后，又发现别的主题有一个很牛逼的功能，就又想换主题了，反反复复，很是折腾！
再后来慢慢折腾不动了，终于想明白了一个道理，个人博客最重要的是内容，而不是“颜值”，踏踏实实写好博文才是博客真正的魅力！但所谓“颜值即正义”，选择一个好看的主题也是第一步！经过最终的选择比较，我选择了 Butterfly 主题，主要是因为这个主题具备以下几个优势：
- 颜值高。Butterfly 的颜值可是数一数二的，这一点只有你用过很多种主题以后才能有所体会；
- 可扩展性强。Butterfly 自带的配置文件有一千行，集成了很丰富的外观和功能扩展，通过简单配置就可实现；
- 社区良好。Butterfly 一直在不断更新，并且开发者是香港人，中文文档良好，遇到了问题查找解决方案比较简单；
但除此之外，我认为它还有一个不算缺点的缺点，就是它的灵活度太高了。怎么说呢？刚开始起步的时候，需要配置的东西比较零散，需要耐心！
友情提示，我这篇博文的主要内容包括两个部分：
- 更换主题：Hexo 博客更换每个主题的方式都一样，我这篇博文是以 Butterfly 来举例的；
- 基本配置：更换主题后，需要生成基本页面、替换博主自己的资料、内置的功能需要手动配置；
1.02：基本环境
我本地使用的是 macOS Tahoe 25.6.2，基本软件环境如下：
Hexo 自带的 npm 包如下：
在当前所有的依赖里面，只有hexo-deployer-git是我自己安装的，是为了支持将本地生成的静态博客文件上传到 Github，其他的都是 Hexo 程序自带的！
第二节：更换主题
2.01：下载主题
Butterfly 主题是托管在 Github 上的：传送门。默认分支是开发分支 dev，我选择下载稳定版本，截止到我当前更新这篇博文的时间，最新的稳定版本是 5.6.1 ！你可以在本地博客工程的/themes文件夹下使用 Git 来 clone 主题文件夹，也可以从 Github 网页上直接下载。
我打算以后都不更新主题了，所以我是直接从网页上下载的，解压后得到：
2.02：更换主题
第一步：重命名并移动
将下载下来的主题文件夹重命名为butterfly，并放到本地博客工程目录下的/themes文件夹中。注意：放到本地博客工程 /themes 文件夹中的主题文件夹必须重命名为 butteryfly，后面我会解释为什么！此外，博客根目录下的 /themes 文件夹中原本存在名为.gitkeep的文件，这是为了保证空文件夹能被 Git 管理，因为此时这个文件夹已经不是空的，所以这个文件也可以删除了！
第二步：修改站点配置文件
在本地博客工程根目录中找到并打开_config.yml文件，在其中找到theme，进行如下操作并保存：
第三步：安装插件
Butterfly 依赖模板引擎 pug 和 CSS 预处理语言 stylus，而 Hexo 程序本身自带 stylus：
所以只需要安装 pug，打开终端并切换到本地博客工程目录下，执行如下安装命令，安装后查看是否安装成功：
1 | npm install hexo-renderer-pug |
第四步：清理缓存
修改了博客根目录下的_config.yml文件，要想修改生效，就必须先清理缓存！
打开终端切换到本地博客工程目录下先后执行如下两条命令：
1 | hexo clean |
第五步：预览博客
执行完以后，打开浏览器访问http://localhost:4000/，可见效果：
2.03：配置文件
更换主题后，整个博客工程中就存在了两个名为_config.yml的配置文件，第一个是在本地博客工程根目录下的，另一个是在于主题根目录下的。在对博客主题进行修改优化的时候，会频繁地用到这两个文件，所以一定要区分清楚。习惯上，我们会将前者称为站点配置文件，将后者称为主题配置文件！
Butterfly 有更好的处理，为减少升级主题带来的不便，可在本地博客根目录创建一个名为_config.butterfly.yml 的配置文件，并把主题根目录下的_config.yml中的内容全部复制进去。然后 Hexo 会合并这两个配置文件中的配置，如果存在同名的配置，会使用_config.butterfly.yml 的配置。（前面将下载主题文件夹重命名为 butterfly 也是为了这个，如果不这样的话，即使在本地博客根目录创建了_config.butterfly.yml 并进行了正确的配置，配置的内容也不会生效。
若采取官网建议的话，从此博客根目录下就有两个配置文件：_config.yml和_config.butterfly.yml！但是我不打算按照官网的处理方式，因为我后面就不打算更新主题了！我决定就使用博客根目录下的主题配置文件。从现在开始：
- 博客工程根目录下的
_config.yml文件是用来修改网站的样式行为的，称之为站点配置文件； - 博客主题根目录下的
_config.yml文件是用来修改主题的样式行为的，称之为主题配置文件； - 博客工程根目录下的
_config.landscape.yml文件时用来修改默认主题样式的，可以删除了；
第三节：基本配置
Butterfly 主题的配置文件很长，有一千行，基本上所有的配置都可以在主题配置文件中找到。
3.01：Front-matter
Front-matter 是 Hexo 中的概念，它是文件最上方以 --- 分隔的区域，用于指定个别文件的变量！在写博客和主题基本设置之前，一定要先学习这部分内容！
- 首先，Hexo 中预置的 Front-matter，参看官网的这篇博文；
- 其次，Butterfly 在 Hexo 的基础上还定义了一些 Front-matter，参看 Butterfly 官方的这篇博文；
3.02：网站基本设置
在站点配置文件_config.yml的Site处可以配置网站的基本资料，包括如下内容：
| 参数 | 描述 |
|---|---|
| title | 网站标题 |
| subtitle | 副标题，在浏览器标签中跟在网站标题后面展示 |
| description | 网站描述 |
| keywords | 网站的关键词，支持多个关键词 |
| author | 网站作者，修改为自己的名字 |
| language | 网站使用的语言。使用2个字母的ISO-639-1代码，或它的变体，默认为en。参考主题来设置。 |
| timezone | 网站时区。Hexo 默认使用你电脑的时区，请参考时区列表进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。 |
比如我的配置如下：
1 | # Site |
3.03：导航栏设置
导航栏可以设置三个参数，分别是：
1 | nav: |
- logo：网站的 logo，支持图片，直接填入图片链接即可，相对路径或图片的网络URL都可以；
- display_title：是否展示网站的标题，默认是展示的；
- display_post_title：是否在滚动时显示文章标题，默认是展示的；
- fixed：是否固定导航栏，建议不固定，因为只要鼠标滚轮向上翻动页面，导航栏就会自动展示；
这部分内容可以根据自己的需要和习惯来自行修改，比如我这里就没有进行任何设置！
3.04：导航栏菜单
导航栏还可以展示菜单栏，需要在主题配置文件中打开设置，比如：
1 | menu: |
这里需要注意两点：
- 菜单的每个页面路径必须是
/xxx/，后面||分开，然后写图标名，如果不想显示图标，图标名可不写； - 若主题版本大于 4.0.0，可以直接在子目录里添加
hide来隐藏子目录，比如：List||fas fa-list||hide:；
这里展示的文字可以自行更改，比如我创建的菜单如下：
1 | # Menu 目錄 |
这只是展示在导航栏的菜单，对应的页面还没有（只有 Home 和 Archives 这两个是预置的），在满足主题菜单的配置规则下，我们可以任意组织自己的个性化菜单，最后还要创建对应的页面，如何创建可以查看本文 3.06！
3.05：创建页面
主题中给定的菜单目录是可以自己定义的，根据自己的需要设置一级目录和二级目录，这里只是配置了菜单，菜单对应的这些页面还不存在（除首页和归档页是 Hexo 自带的），需要我们自己创建！
分类页
打开终端，切换到博客工程根目录下，执行如下命令
1
hexo new page categories
执行成功以后，就会在博客根目录下的
/source目录下生成一个名为categories的子文件夹，文件夹中生成了一个名为index.md的文件，这个文件就是最终的分类页！然后在生成的
/source/categories/index.md中的 Front-matter 中添加type: "categories"：1
2
3
4
5---
title: 分类
date: 2023-01-01 06:00:00
type: "categories"
---注意：
title和date是自动生成的，我们可以任意修改这两项的值，但是必须添加type: "categories"，这样主题才能按照设定的 categories 布局来渲染这个页面！
标签页
打开终端，切换到博客工程根目录下，执行如下命令
1
hexo new page tags
执行成功以后，就会在博客根目录下的
/source目录下生成一个名为tags的子文件夹，文件夹中生成了一个名为index.md的文件，这个文件就是最终的标签页！然后在生成的
/source/tags/index.md中的 Front-matter 中添加type: "tags"：1
2
3
4
5---
title: 标签
date: 2023-01-01 06:00:00
type: "tags"
---注意：
title和date是自动生成的，我们可以任意修改这两项的值，但是必须添加type: "categories"，这样主题才能按照设定的 categories 布局来渲染这个页面！
友链页
打开终端，切换到博客工程根目录下，执行如下命令
1
hexo new page link
执行成功以后，就会在博客根目录下的
/source目录下生成一个名为link的子文件夹，文件夹中生成了一个名为index.md的文件，这个文件就是最终的友链页！然后在生成的
/source/link/index.md中的 Front-matter 中添加type: "link"：1
2
3
4
5---
title: 优秀链接
date: 2023-01-01 06:00:00
type: "link"
---在博客根目录下的
/source/_data/下创建名为link.yml的文件，并在其中按如下格式添加：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31- class_name: 友情链接
class_desc: 一些优秀的博客网站
link_list:
- name: 张洪Heo
link: https://blog.zhheo.com/
avatar: https://img02.anheyu.com/adminuploads/1/2022/09/02/6311fc38f1465.webp
descr: 一个真正的大佬
- name: 安知鱼
link: https://blog.anheyu.com/
avatar: https://npm.elemecdn.com/anzhiyu-blog-static@1.0.4/img/avatar.jpg
descr: 极致的Butterfly
- name: Leonus
link: https://blog.leonus.cn/
avatar: https://q1.qlogo.cn/g?b=qq&nk=990320751&s=5
descr: 优秀的Butterfly
- class_name: 技术站点
class_desc: 一些优秀的技术站点
link_list:
- name: Hexo
link: https://hexo.io/zh-cn/
avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
descr: Hexo官方网站
- name: Butterfly
link: https://butterfly.js.org
avatar: https://butterfly.js.org/img/avatar.png
descr: 美观且强大的Hexo主题
- name: Pug
link: https://www.pugjs.cn/
avatar: https://www.pugjs.cn/img/logo.png
descr: Pug模板引擎中文文档
图库页
打开终端，切换到博客工程根目录下，执行如下命令
1
hexo new page gallery
执行成功以后，就会在博客根目录下的
/source目录下生成一个名为gallery的子文件夹，文件夹中生成了一个名为index.md的文件，这个文件就是最终的图库页！在页面中使用标签外挂来实现图片
1
2
3
4
5
6
7
8
9
10
11
12---
title: 照片展
date: 2023-01-01 06:00:00
aside: false
---
<div class="gallery-group-main">
{% galleryGroup '壁紙' '收藏的一些壁紙' '/gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '关于漫威的图片' '/gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>创建子页面。比如创建 OH MY GIRL 的子页面，则执行命令
1
hexo new page ohmygirl
在生成的 /blog/source/ohmygirl/index.md 文件中写入如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16---
title: OH MY GIRL
date: 2023-01-01 06:00:00
aside: false
---
{% gallery %}
{% endgallery %}最后将文件夹 ohmygirl 整个剪切到 gallery 文件夹中，技能实现子页面的功能了。
404页面
404页面不需要使用
hexo new page命令来创建，主题内置了 404 页面；只需要在主题配置文件中打开设置即可：
1
2
3
4
5# A simple 404 page
error_404:
enable: true
subtitle: '您访问的页面找不到了~'
background: /img/error-page.png
说说页
- 我觉得这个页面比较鸡肋，暂时先不配置。
其他页
- 对于其他的页面也是用
hexo new page命令来生成，但是也可以直接在资源管理器或访达中手动创建这些文件夹和文件并手动编辑； - 在自定义的页面 Front-matter 的
type不用配置，只是分类、标签、友情链接这三个页面需要配置，因为主题对它们进行支持； - 如果要查看详细信息，可参考 Butterfly 的官方文档：Butterfly 文档(二) 主题页面；
3.06：网站域名
在设置之前，网站中的文章链接或者其他部分展示网站域名的地方都是默认的http://example.com，比如：
网站的域名是在站点配置文件_config.yml中配置的，只需要将url的值改为自己的域名即可：
1 | # URL |
3.07：永久链接
Hexo 会给每一篇博文生成一个永久性链接，默认情况下，链接的内容由博文发布时间和博文文件名称组成的。
常规优化：常规做法是安装 hexo-permalink-pinyin 插件，它可以将博客文件名称中的中文转为拼音，各个汉子之间用符号-来连接，但是如果我们在日常发布中，修改了某篇博客文件中 Front-matter 的时间或者文件名后重新发布，那么原本生成的永久链接就会失效！而且假如博客文件的中文名称很长，那么永久链接就会更长！出于这两点考虑，我选择放弃这种优化方式！
我的做法：我选择使用 hexo-abbrlink 插件来为博文生成永久静态短链接！
第一步：打开终端，切换到本地博客工程根目录下，执行安装插件的命令
1 | npm install hexo-abbrlink --save |
安装完以后使用 npm list 查看安装的插件：
第二步：打开站点配置文件，先找到并修改permalink，并在后面增加abbrlink配置
1 | # URL |
第三步：清理缓存后再执行hexo generate，可见此时默认博文的永久链接为数字类型
此时打开博文的MD文件，可见在 Front-metter 部分自动新增了abbrlink项目：
最后效果：
- 以后，当在
_post文件夹中创建一个新的 Markdown 文件或者复制一个 Markdown 文件过来以后，只要执行预览或者生成静态博客文件的命令，就会在 Front-matter 中自动生成abbrlink的配置项； - 无论是修改博文的文件名还是修改博文的 Front-matter 中的
date，只要不改变abbrlink的值，这篇博文的链接就永远不会改变，而且链接的长度不会很长； - 我的做法：在新建文章的时候，直接在 Front-matter 中指定
abbrlink的值，只要跟其他文章的abbrlink的值不重复，就不会存在问题（自己写的 abbrlink 的值，要大于等于 10000，否则会被覆盖）；
3.08：代码高亮
代码相关的设置，参考Butterfly官方文档，官网上写的太清楚了，没有什么坑点，我就不废话了！我这里设置如下：
1 | code_blocks: |
注意：Butterfly 还支持自定义代码块主题，详细教程在官网上也有，参考这里！我暂时选择使用hexo内置的代码高亮。
3.09：社交图标
Butterfly 支持 font-awesome v6 图标，但是社交图标默认是关闭的，需要自己打开。在主题配置文件中开启：
1 | # Formal: |
后续我会针对这部分进行魔改，可以查阅我后面的博客。
3.10：页面Meta
所谓的页面 Meta 设置，就是用来修改展示文章相关信息的配置，这个配置比较简单，我的配置如下：
1 | post_meta: |
第四节：图片设置
在 Butterfly 主题中，有很多类背景图片，这些背景图片都可以在主题配置文件中进行配置！第一次设置的时候会挺迷茫的，因为和图片相关的配置项太多了。
4.01：网站图标
第一步，在 favicon.io 中制作网站图标文件，制作好的文件有下面这些：
1 | android-chrome-192x192.png |
第二步，在博客根目录下的 source 目录下新建名为 img 的文件夹，并在其中再新建名为 favicon 的文件夹，然后把上述文件都放入其中：
第三步，打开主题根目录下的 layout/includes/head.pug 文件，找到如下位置：
1 | !=favicon_tag(theme.favicon || config.favicon) |
在这两行中间添加如下内容：
1 | link(rel="icon", type="image/png", sizes="16x16", href="/img/favicon/favicon-16x16.png") |
第四步，打开 source/icon/site.webmanifest 文件，将把里面icons下的src全部加上 /img/favicon/ 前缀：
1 | {"name":"","short_name":"","icons":[{"src":"/img/favicon/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/img/favicon/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} |
第五步，打开主题配置文件，找到 favicon 并进行如下配置：
1 | favicon: /img/favicon/favicon.ico |
第六步，打开终端切换到博客根目录下，执行如下命令即可预览：
1 | hexo clean && hexo server |
4.02：网站头像
第一步：把自己想用的头像放到本地博客根目录下的 /source/img/avatar 中（没有目录就新建）
第二步：在主题配置文件，搜索avatar，进行如下配置
1 | avatar: |
配置项effect是一个特效：
- false：鼠标悬浮和离开时头像快速旋转；
- true：头像一直旋转，并且兼具鼠标悬浮和离开时头像快速旋转
4.03：设置头图
顶部图又叫头图（top_img），就是首页的遮罩图片和其他页面上最上部的背景图，分为非文章页和文章页两类。
对于非文章页。它的取值逻辑是：
1 | 页面Front-matter中设置的top_img > 配置文件的配置项（下面6个）> 配置文件中的 default_top_img |
配置文件中可以配置六种非文章页的顶部图：
| 配置项 | 对应页面 |
|---|---|
| index_img | 首页 |
| archive_img | 归档页 |
| tag_img | 标签页 |
| tag_per_img | 标签子页面（不同的标签可配置不同的顶部图） |
| category_img | 分类页 |
| category_per_img | 分类子页面（不同的分类可配置不同的顶部图） |
所以针对非文章页的顶部图，我采取的策略是：只在主题配置文件中配置 default_top_img。这样一来：
- 所有非文章页的顶部图全部是一个；
- 如果以后想修改某个非文章页的顶部图，就直接在对应页面的 Front-matter 中设置 top_img。
第一步，将想用的图片 whale.webp 放到本地博客根目录下的 /source/img/top_img 目录中（没有就新建）；
第二步，在主题配置文件中，修改 default_top_img 配置项：
1 | # If the banner of page not setting, it will show the default_top_img |
对于文章页。它的取值逻辑是：
1 | Front-matter中的top_img > Front-matter中的cover > 配置文件中的cover > 配置文件中的default_top_img |
针对文章页的顶部图，我采取的策略是：
- 在主题配置文件中配置两张默认的 cover 图，用作默认的文章封面；
- 在文章页的 Front-matter 中只配置 cover 图（因为 cover 图负责文章卡片的封面，必须设置），这样 cover 图会成为文章页的头部图；
- 后面通过我自己的魔改，修改文章页的顶部图取值逻辑（后面魔改的部分再讲）；
第一步，将想用的图片放到本地博客根目录下的 /source/img/covers 目录中（没有就新建）；
第二步，在主题配置文件中，将图片配置到 defaut_cover 配置项：
1 | cover: |
4.04：网站背景
Butterfly 主题默认的网站背景是纯白或者纯黑（浅色模式和深色模式），可以将其修改为自己想要的图片，配置跟顶部图的配置一样，修改主题配置文件中的 background 配置项即可：
1 | # Website Background |
4.05：页脚背景
主题页脚的图片是由配置项 footer_img 来配置的，支持如下多种效果：
| 配置值 | 效果 |
|---|---|
| 留空 / false | 显示默认的颜色 |
| 图片链接 | 显示配置的图片 |
| 颜色值： HEX 值 - #0000FF RGB 值 - rgb(0,0,255) 顔色單詞 - orange 漸變色 - linear-gradient （135deg, #E2B0FF 10%, #9F44D3 100%） |
显示对应的颜色 |
| transparent | 透明 |
| true | 显示跟top_img一样 |
我选择将页脚设置为透明：
1 | # The background image of footer |
第五节：首页的设置
5.01：头图大小位置
使用默认的：
1 | # The top_img settings of home page |
5.02：首页的副标题
配置如下：
1 | # 首页副标题，The subtitle on homepage |
5.03：文章卡片布局
Butterfly 主题提供了 7 种首页文章卡片的布局结构，我选择使用默认的：
1 | # 首页文章卡片布局 |
5.04：主页文章节选
因为主题 UI 的关系，主页文章节选只支持自动节选和文章页 Front-matter 中的 description，我的配置如下：
1 | # 首页文章卡片的节选内容 |
我对这里没做大修改，只把 index_post_content.method 设置为 2，因为这样一来，只要我在文章的 Front-matter 中设置了 description，那么就展示 description 的内容，否则就展示文章的前 500 个字！这样比较灵活！
提示：description 不是 Hexo 内置的 Front-matter 参数，是主题 Butterfly 自建的参数！
第六节：文章页设置
6.01：TOC目录
在每一篇文章的侧边栏会有 TOC 目录，主题配置文件中可以配置它，我的配置如下：
1 | # TOC目录 |
PS：我后期会将其进行优化，优化后的效果为——默认展开两级，当浏览到某个三级标题时，再展开对应的三级标题！
6.02：文章版权
使用默认的：
1 | # 文章版权 |
6.03：打赏赞助
第一步，将微信赞赏码和支付宝收款码图片处理好，最合适的尺寸是 260*260，正方形；
第二步，将图片放到博客根目录下的 /source/img/sponsor/ 中（如果没有这个目录就新建）；
第三步，在主题配置文件中找到 reward 配置项，进行如下配置：
1 | # 打赏/赞助 |
6.04：在线编辑
文章在线编辑 post_edit 功能，开启后每篇文章页的标题旁边都有一个编辑按钮：
点击后，直接跳转到 GitHub/Gitee 在线编辑当前文章的 Markdown 源码，方便你快速修改博文，不用本地拉取仓库。我暂时先不开启这个功能。
6.05：相关文章
在某篇文章的最后，上一篇下一篇的后面，会给出本站的推荐文章，相关文章的推荐原理是根据当前文章的标签的比重来推荐的！默认的配置如下，我觉得没必要修改，保持默认配置：
1 | # 相关文章 |
6.06：上/下一篇
文章的结尾处，会有上一篇下一篇的卡片按钮，默认情况下，下一篇是指你当前阅读的文章的上一篇（创建时间在当前文章的前面），这是很反人类的！可以修改默认的配置来修正这种逻辑：
1 | # 上/下一篇 |
6.07：过期提醒
假如文章过期了，可以在文章的最上面展示提醒，默认配置为：
1 | # 过期提醒 |
修改为：
1 | # 过期提醒 |
6.08：图片描述
在 Butteryfly 中，关于图片描述有如下的配置：
1 | # 图片描述 |
在 Markdown 中，插入图片的语法是，开启了photofigcaption功能后，会将 Markdown 插图中的 alt 文本作为图片的标题描述，放到图片的正下方！假如没有 alt 文本的话，就不会展示了，并且也不会留出来多余的空间！
6.09：分享按钮
文章底部有很多分享按钮，Butterfly 内置了两种分享系统，分别是 Sharejs 和 Addtoany，默认使用 Sharejs 即可：
1 | # 分享系统 |
6.10：数学公式
假如博客中需要写数学公式的话，就需要用数学渲染引擎来渲染。Butterfly 提供了两种渲染引擎：MathJax 和 KaTeX，默认是不开启的。假如不需要写数学公式的话，就没必要配置这个了。我这里使用默认的（不开启）：
1 | # 数学公式 |
6.11：大图模式
默认情况下，文章页的图片是点不开的，就固定在文章页中，但是可以开启大图查看模式，点击后可以将图片单独点开放大查看。Butterfly 提供了两种大图查看模式，我的配置如下：
1 | # Choose: fancybox / medium_zoom |
6.12：文章连载
文章连载功能是默认关闭的，需要在主题配置文件中打开：
1 | # 文章连载功能，Series |
打开以后，还要在对应文章的 Front-matter 中设置series值。
6.13：乐谱代码块
abcjs 是一个将 ABC 记谱法文本渲染成可视化五线谱乐谱的 JS 库。开启后，你可以在文章 Markdown 中写入 ABC 乐谱代码块，页面自动转换成图形乐谱。
1 | # 乐谱代码块，暂时用不上，保持默认关闭 |
6.14：绘图语法库
Mermaid 是绘图语法库，可以在 Markdown 中用文本代码渲染流程图、时序图、甘特图、ER 关系图等图表，非常适合技术博客。
1 | # 绘图语法库，Mermaid，暂时用不上，保持默认的关闭 |
6.15：前端图表库
Chart.js 是前端图表库，用于在文章里渲染折线图、柱状图、饼图、雷达图等可视化图表。我暂时用不上，保持关闭：
1 | # 前端图表库，chartjs |
6.16：Note提示块
该配置控制文章内 Note 彩色提示块（警告、提示、注意框）的外观样式，也就是常用的 {% note %} 标签：
1 | # Note提示块，Note - Bootstrap Callout |
我这里保持默认的开启和默认的样式，没做任何修改。
第七节：页脚的设置
Butterfly 主题的每个页面都有页脚，页脚可以用来展示信息，默认的配置如下：
1 | footer: |
7.01：页脚菜单
页脚的菜单（导航栏）通过footer.nav来进行配置，我的设置如下：
1 | footer: |
这里我暂时先按照自己的想法配置一些功能页面，这些页面需要后面取生成后，再将链接填进去，起到占位符的作用。
7.02：博客年份
1 | owner: |
7.03：框架版本
在页脚展示 Hexo 框架和 Butterfly 主题：
1 | copyright: |
7.04：自定义文本
页脚最后可以设置一个自定义的文本，我将其设置为：
1 | custom_text: 山河漫漫，伏案拾光，留存每一段瞎折腾的细碎日常 |
第八节：侧边栏设置
8.01：基本设置
1 | aside: |
8.02：站长信息
1 | # 站长信息卡片 |
8.03：公告卡片
1 | # 公告信息卡片 |
8.04：最新文章
1 | # 最新文章卡片 |
9.05：最新评论
1 | # 最新评论卡片 |
8.05：分类卡片
1 | # 分类卡片 |
8.06：标签卡片
1 | # 标签卡片 |
8.07：归档卡片
1 | # 归档卡片 |
8.08：系列卡片
1 | # 文章系列卡片 |
8.09：网站信息
1 | # 网站信息卡片 |
8.10：自定义卡片
Butterfly 主题还支持在侧边栏自定义添加栏目，我这里暂时先不添加，具体教程参考官网自定義添加欄目。
第九节：右下角按钮
9.01：按钮位置
当开放 chat 聊天服务后，聊天服务的按钮可能会遮挡到右下角的按钮，所以 Butterfly 主题提供了修改右下角按钮的配置项。非必要不建议设置，默认就行。（我觉得博客网站不该有在线聊天功能，所以我压根就不需要修改这个配置）
1 | # The distance between the bottom right button and the bottom (default unit: px) |
9.02：繁简转换
主题内置了一个简单的简繁转换功能，采用一对一的形式配对。默认是关闭的，需要在主题配置文件中开启：
1 | # 繁简转换按钮 |
提示：遇到一字多繁或者一字多简的情况下，会出现不能正常转换的现象。
9.03：阅读模式
阅读模式下，会去掉除文章外的内容，避免干扰阅读，只会出现在文章页。默认就是开启的，不用修改配置：
1 | # 阅读模式 |
9.04：夜间模式
夜间模式按钮默认就有，我使用默认的配置：
1 | # 深色模式 |
9.05：显示百分比
在页面滚动查看时（不仅是文章页），右下角按钮显示阅读的百分比，这个功能默认是关闭的，需要修改配置来开启：
1 | # 显示百分比，Show scroll percent in scroll-to-top button |
9.06：按钮排序
可对右下角按钮进行排序，我这里没有修改，直接使用默认的：
1 | # 按钮排序 |
9.07：弹出动画
点击右下角设置按钮，展开 / 收起设置面板时，会带有弹出位移动画；页面初次加载，右下角按钮也会有滑入动画。
1 | # 右下角组建弹出动画，Animation for the bottom right config button |
第十节：全局的设置
10.01：页面锚点
文章锚点这个功能在分享文章链接时还是很好用的，但是我觉得它弊大于利，所以我还是使用默认的，不开启：
1 | # 页面锚点 |
10.02：复制行为
可设置网站是否可以复制、复制的内容是否添加版权信息，我的配置如下：
1 | # 复制行为 |
10.03：字数统计
Butterfly 主题可以展示字数统计，但是该功能需要安装插件 hexo-wordcount，所以需要先安装该插件！
第一步：打开终端切换到本地博客工程根目录下，执行如下命令来安装插件
1 | npm install hexo-wordcount --save |
查看确保依赖是否安装成功：
第二步：打开主题配置文件，进行字数统计的配置
1 | # 字数统计，Need to install the hexo-wordcount plugin |
10.04：访问统计
1 | # 不蒜子访问统计，Busuanzi count for PV / UV in site |
注意：假如想修改这里的文字，就修改主题根目录下的languages中的zh-CN.yml文件！
10.05：搜索功能
Butterfly 主题提供了两种本地搜索的选项，我选择使用的是插件 hexo-generator-search。
第一步：打开终端切换到本地博客工程根目录下，执行如下命令来安装插件
1 | npm install hexo-generator-search --save |
查看确保依赖是否安装成功：
第二步：打开站点配置文件，添加如下的配置
1 | # 本地搜索 |
第三步：打开主题配置文件，修改search配置项：
1 | search: |
10.06：评论系统
关于评论系统，我后面会单开一篇文章来详细介绍配置，这里先跳过，保持默认配置即可。
10.07：在线聊天
1 | # 在线聊天，对于博客网站来说，我觉得没必要，保持默认配置，不开启 |
10.08：分析统计
1 | # 访客分析统计，我觉得作用不大，不配置不开启（如果后期增加网站统计页面，或许可以从这里面找到灵感） |
10.09：广告集成
主题已经集成了谷歌广告和自定义广告，对于小白建站来说，可以不用管，暂时先不配置，默认不开启即可：
1 | # 广告，Advertisement，暂时不开启，保持默认配置 |
10.10：网站验证
网站验证这里，分为两种情况：
- 情况 A：你不在乎搜索引擎流量，不主动管收录；只是自己写写博客、分享给朋友看，完全不用配置，保持默认注释状态即可，百度爬虫想爬就爬，随缘。
- 情况 B：你希望更多陌生人通过百度搜到你的技术文章，那么就得配置了，具体步骤如下
- 去「百度搜索资源平台」注册账号
- 添加你的域名
- 启用这个验证配置，填入验证码，完成所有权校验
- 之后就可以主动推送文章链接，优化收录
最好是开启，因为我当前的域名还没备案完成，所以暂时不开启，保持默认配置即可：
1 | # 网站验证，Verification，域名备案完成以后，再来考虑配置网站验证 |
十一节：美化和特效
11.01：自定义主题配色
Butterfly 主题支持用户自定义颜色，我这里先不配置，保持默认配置，后面会专开一篇文章来介绍：
1 | # 自定义主题配色 |
11.02：文章列表的样式
除了主页的文章列表样式可以修改以外（index_layout），主题还支持修改归档页和标签页的文章列表样式：
1 | # 文章列表样式（设置为index可以让分类页和标签页的文章列表跟主页一样，留空则跟归档页一样） |
11.03：界面组件的圆角
1 | # 界面组件圆角样式（true：开启圆角，false：关闭圆角） |
11.04：文本行两端对齐
开启这个配置项，可以让文章正文部分的文字两端对齐（对最后一行无效），这样更美观，建议开启，默认是不开启的：
1 | # 文本行两端对齐 |
11.05：头部页脚遮蔽色
为了避免图片过于鲜艳而导致文字无法阅读，默认为顶部图和页脚添加黑色遮罩：
1 | mask: |
11.06：预加载动画配置
在页面之间跳转时，展示预加载动画，但是开启后会额外增加 JS/CSS 请求，我就保持默认不开启了：
1 | # 预加载动画配置 |
11.07：页面的过渡动画
开启以后，页面切换淡入动画；点击链接跳转新页面时，内容会淡入显示。但是这个要配合 Pjax 才生效，如果 Pjax 关闭的话，这个动画不会触发。因为我的网站是开启了 Pjax 的，所以这里我也开启：
1 | # 页面的过渡动画，Page Transition，开启的话也需要开启Pjax才有效 |
11.08：默认的明暗模式
1 | # 默认的明暗模式 - light (default) / dark |
11.09：页面的美化增强
开启以后，可以控制给哪个页面的内容进行美化增强，我不喜欢这个功能，使用默认的不开启：
1 | # 页面的美化增强，Configuration for beautifying the content of the article |
11.10：全局的字体设置
可以设置全站全局的字体族和字体大小，我觉得 Butterfly 的字体逻辑在这里是有一些问题的，就不在这进行配置，后续我会在魔改的文章中进行详细操作，主题配置文件里先保持默认的留空：
1 | # 全局的字体设置，Global font settings，不在这里修改，后续魔改再来分析 |
11.11：标题专用的字体
1 | # 标题专用的字体，不在这里进行配置 |
11.12：分割线图标设置
1 | # 分割线图标设置，没啥改头，先随便换个图标 |
11.13：打字的火花特效
1 | # 打字的火花特效 |
11.14：背景的粒子特效
主题提供了三种特效，我选择使用第三种：
1 | # 背景特效，彩带飘带 |
11.15：鼠标点击的特效
主题提供了三种鼠标点击的特效，我选择使用爱心特效：
1 | 鼠标点击烟花特效 |
十二节：其他的设置
12.01：Pjax
开启 Pjax 能让站内链接跳转不整页刷新，仅替换页面主体内容；导航栏、全局播放器、侧边栏 DOM 保留，还能实现诸如切页音乐不断播这种功能。默认是关闭的，我选择开启：
1 | pjax: |
只有开启了这个，才能实现：
- 页面过渡动画，
enter_transitions； - 页面跳转时音乐不断播；
12.02：APlayer
主题内置的音乐播放器，我暂时先不开启，后面会单独记录这部分的魔改，先保持默认的关闭配置：
1 | # APlayer音乐播放器，Inject the css and script (aplayer/meting) |
12.03：Snackbar
Snackbar 就是页面底部弹出的轻消息提示条（Toast），比如访客操作反馈、欢迎提示、复制成功等，我的配置如下：
1 | # Snackbar - Toast Notification |
12.04：Instantpage
这个配置的作用是：当鼠标悬停到链接上超过 65 毫秒时，Instantpage 会对该链接进行预加载，可以提升访问速度。访客体验更好，站内跳转感觉飞快，不需要等待加载。
但我不开启这个功能，因为哪怕访客只是鼠标划过链接、最终不点进去，网页依旧会被下载，造成额外的资源消耗：
1 | # Instant.page |
12.05：Lazyload
图片懒加载：不在可视区域内的图片，暂时不加载；滚动到视野内再请求图片资源，有效降低首屏加载体积、加快页面打开速度。我的配置如下：
1 | # 图片懒加载，Lazyload |
12.06：PWA
Progressive Web App 渐进式网页应用，我不打算开启这个功能：
1 | # Progressive Web App 渐进式网页应用，PWA |
12.07：Open Graph
先用大白话说明什么是 Open Graph。当你把博客文章链接转发到微信、QQ、Discord、知乎、Twitter等平台时。
不开启 Open Graph
平台只能抓取纯文字链接，预览很简陋，没有封面图、简介，只有光秃秃一串网址。
开启 Open Graph
网页头部自动写入元信息。社交平台读取这些信息，生成漂亮的卡片预览。
使用默认的配置即可：
1 | # Open graph meta tags，社交分享预览，保持默认开启即可 |
只要设置了enable为true，当你分享到微信、QQ、飞书等平台会自动生成 OG 数据。至于注释的这些海外账户，则不需要配置。
12.08：结构化数据
Structured Data，给搜索引擎（谷歌、必应）提供标准化页面信息，帮助搜索引擎识别文章类型、作者、发布时间、封面图。它的作用是优化搜索引擎收录，有机会在搜索结果展示富媒体摘要（大图、评分等增强展示）。因为开启以后只增加一小段 HTML，开销很低，所以我这里选择开启：
1 | # Structured Data，结构化数据，优化SEO |
12.09：CSS 前缀
有些 CSS 并不是所有浏览器都支持，需要增加对应的前缀才会生效。开启这个配置后，会自动为一些 CSS 增加前缀，但同时会增加 20% 的体积。
1 | # Add the vendor prefixes to ensure compatibility |
12.10：Inject
如果你想添加额外的js、css、meta等东西，可以在主题配置文件的Inject里添加，支持添加到 head（</body>标签之前）和 bottom（</html>标签之前）。
注意一：在主题配置文件的inject中，要以标准的 html 格式添加内容；
1 | inject: |
注意二：若你网站根目录不是/，使用本地图片时，需加上你的根目录，如网站是https://yoursite.com/blog，引用 css/xx.css，则设置为
1 | inject: |
12.11：CDN
Butterfly 主题页面运行需要很多外部文件：图标库、jQuery、代码高亮 JS、Math 公式脚本等等。默认情况下，主题内置本地加载。CDN 配置作用：把这些静态资源地址替换成公共 CDN 网络链接。
简单理解：
- 不配置 CDN：访客打开网页，从你的博客服务器下载这些 js、css 文件；
- 配置 CDN：访客从「公共加速节点」下载文件。
针对我目前的博客来说，暂时先不配置 CDN，这也是 Butterfly 主题默认的行为。等以后加载缓慢了，再来优化这部分。
微信
支付宝
