o(￣▽￣)o！

继续优化我们的 hexo 博客，使用 Butterfly 主题。

Butterfly 仓库：https://github.com/jerryc127/hexo-theme-butterfly

Butterfly 文档：https://butterfly.js.org/

快速开始

主题安装

使用 Git 安装：

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

使用 npm 安装：

1
npm install hexo-theme-butterfly

上述两种方法都需要在 Hexo 项目的根目录下使用。

npm 方法只支持 Hexo 5.0.0 以上版本，且不会在 themes 里生成主题文件夹，而是在 node_modules 里生成。

主题使用

修改 Hexo 项目根目录下的 _config.yml，把主题改为 butterfly

1
theme: butterfly

安装 pug 以及 stylus 的渲染器插件

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。

Hexo会自动合併主题中的 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其优先度较高。

页面设置

标签页

首先前往 Hexo 项目的根目录，打开终端输入 hexo new page tags，会在 ./source 目录下生成 tags 目录。

然后找到 ./source/tags/index.md 这个文件，修改内容如下：

1
2
3
4
5
6
7
---
title: 标签
date: 2018-01-05 00:00:00
type: "tags"
orderby: random
order: 1
---

注意必须添加 type: "tags" 标签对，且双引号中的内容不要修改。

分类页

前往 Hexo 项目的根目录，打开终端输入 hexo new page categories，会在 ./source 目录下生成 categories 目录。

然后找到 ./source/categories/index.md 这个文件，修改内容如下：

1
2
3
4
5
---
title: 分类
date: 2018-01-05 00:00:00
type: "categories"
---

注意必须添加 type: "categories" 标签对，且双引号中的内容不要修改。

友情链接

前往 Hexo 项目的根目录，打开终端输入 hexo new page link，会在 ./source 目录下生成 link 目录。

然后找到 ./source/link/index.md 这个文件，修改内容如下：

1
2
3
4
5
---
title: 友情链接
date: 2018-06-07 22:17:49
type: "link"
---

注意必须添加 type: "link" 标签对，且双引号中的内容不要修改。

最后添加友情链接，在Hexo根目录中的 ./source/_data（如果没有 _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
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

404页面

Butterfly 主题内置了一个简单的 404 页面，可在设置中开启，在 _config.butterfly.yml 中修改如下：

1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: "页面没有找到"
  background:

主题配置

Butterfly 主题配置参照官方文档：https://butterfly.js.org/posts/4aa8abbe/