文中的配置文件仅为本人对主题的修改不代表butterfly主题的全部设置

主题安装

主题是来自jerryc127大佬的基于hexo-theme-melody修改的主題
主题地址:hexo-theme-butterfly

使用npm安装

在博客根目录下运行

1
npm i hexo-theme-butterfly

主题更新

在博客根目录下运行

1
npm update hexo-theme-butterfly

主题启用

修改站点配置文件_config.yml,把主题改为butterfly.

1
theme: butterfly

主题插件

butterfly依赖于pug与stylus渲染器

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

主题配置文件

把主题文件夹中的_config.yml复制到Hexo更目录下,并重命名为_config.butterfly.yml.

以后对butterfly主题的设置只需要在_config.butterfly.yml中进行即可。

如果是通过NPM安装的主题,主题配置文件在根目录下的node_modules/hexo-theme-butterfly中。

如果是同意Git安装的主题则主题的配置文件在根目录下的themes/butterfly中。

最终的结构

主题配置

页面设置

添加一些页面

标签页

  1. 进入博客根目录下

  2. 打开终端输入hexo new page tags

  3. 打开source/tags/index.md

  4. 修改其中的内容

1
2
3
4
5
---
title: 标签
date: 2020-01-01 00:00:00
type: "tags"
---

类别页

  1. 进入博客根目录下

  2. 打开终端输入hexo new page categories

  3. 打开source/categories/index.md

  4. 修改其中的内容

1
2
3
4
5
---
title: 类别
date: 2020-01-01 00:00:00
type: "categories"
---

番剧

影视剧·书籍·游戏

需要安装hexo-butterfly-douban插件

插件原地址:hexo-butterfly-douban

1
npm install hexo-butterfly-douban --save

将下方的配置加入到Hexo的配置文件中

Hexo的配置文件是根目录下的_config.yml_config.butterfly.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
douban:
user: userid
builtin: false
book:
title: 'This is my book title'
quote: 'This is my book quote'
meta: true
comments: true
top_img: https://cccccc.png
aside: true
movie:
title: 'This is my movie title'
quote: 'This is my movie quote'
meta: true
comments: true
top_img: https://cccccc.png
aside: true
game:
title: 'This is my game title'
quote: 'This is my game quote'
meta: true
comments: true
top_img: https://cccccc.png
aside: true
timeout: 10000

user: 你的豆瓣ID.打開豆瓣,登陆账号,点击 “个人主页” ,地址栏中的https://www.douban.com/people/xxxxxx/其中的”xxxxxx”就是你的ID了。
builtin: 是否将生成的页面的功能嵌入hexo s和hexo g中,默认是false,另一可选项为true。
title: 页面的标题.
quote: 写在页面开头的一段話,支持html语法.
timeout: 爬取数据的超時時間,默认是 10000ms。
meta: 插入 到页面,可解決部分浏览器无法显示豆瓣图片的問題(会导致一些插件出错,例如 不蒜子计数器。)
comments: 是否显示突变
top_img: 顶部图片
aside: 是否显示侧边栏

如果设置 builtin 设为 true 的,直接运行 hexo g 就会自动生成。

如果设置中 builtin 设为 false 的,需要在 hexo g 后再运行 hexo douban

应为hexo douban的缘故无法使用hexo d进行部署了,请使用hexo deploy

友链

  1. 进入博客根目录下

  2. 打开终端输入hexo new page link

  3. 打开source/link/index.md

  4. 修改其中的内容

1
2
3
4
5
---
title: 友链
date: 2020-01-01 00:00:00
type: "link"
---
添加友链

在博客根目录中找到source/_data文件夹,在其中创建link.yml 。(如果沒有 _data 文件夾,就一起创建了吧)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- class_name: 友情链接
class_desc:
link_list:
- name: Hexo
link: https://hexo.io/zh-tw/
avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
descr: Hexo官网

- class_name: 网站
class_desc: 一些可能或者貌似会用到的网站
link_list:
- name: Github
link: https://www.github.com/
avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
descr: 全球最大的交友网站
- name: Github
link: https://www.gitlab.com/
avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
descr: 全球最大私人朋友圈

随笔

需要安装hexo-butterfly-artitalk插件

1
npm install hexo-butterfly-artitalk --save

配置LeanCloud,移步Artitalk 文档 - LeanCloud 的相关准备

在Hexo的配置文件或者主題的配置文件中添加

1
2
3
4
5
6
7
8
9
10
# Artitalk
# see https://artitalk.js.org/
artitalk:
enable: true
appId:
appKey:
path:
js:
option:
front_matter:

appId:【必选】LeanCloud 创建的应用的 AppID。
appKey:【必选】LeanCloud 創建的应用中的 AppKEY。
path:可选】Artitalk 的路径名称(默认为 artitalk,生成的页面为 artitalk/index.html)。
js:【可选】更换 Artitalk 的 js CDN(默认为 https://cdn.jsdelivr.net/npm/artitalk)
option:【可选】Artitalk 需要的額外配置。
front_matter:【可选】Artitalk 页面的 front_matter 配置。

404页面

主题内置了一个简单的404頁面,可在设置中开启

本地预览时,访问出错的网站是不会跳到404页面的。

如需本地预览,请访问http://localhost:4000/404.html

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