本文简单介绍一下butterfly主题的安装过程。

1 安装butterfly

鼠标右键单击选择Git Bash，打开终端，在博客根目录下输入以下命令进行安装：

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

鼠标右键单击选择Git Bash，打开终端，在博客根目录下输入以下命令进行安装：

1
git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly

Hexo版本必须在5.0.0以上!

鼠标右键单击选择Git Bash，打开终端，在博客根目录下输入以下命令进行安装： 
1
npm i hexo-theme-butterfly

2 应用butterfly

在博客根目录下修改站点配置文件_config.yml，将主题应用为butterfly：

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

3 安装插件

butterfly主题需要pug及stylus的渲染器，打开终端，在博客根目录下输入以下命令进行安装：

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

4 配置模板

在博客根目录下打开scaffolds文件夹，对page.md和post.md文件进行修改。

修改page.md文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer: 
highlight_shrink:
---

page.md各参数描述如下所示：

参数 描述
title 页面标题
date 创建日期
updated 更新日期
type 类型，如标签(tag)、分类(categories)、友情链接(link)
comments 显示页面评论，默认显示
description 页面描述
keywords 页面关键字
top_img 页面顶部图
mathjax 数学公式mathjax
katex 数学公式katex
aside 侧边栏
aplayer 音乐播放器
highlight_shrink 代码块是否展开

修改post.md文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
title: {{title}}
date: {{date}}
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer: 
highlight_shrink:
aside:
---

post.md各参数描述如下所示：

参数 描述
title 文章标题
date 创建日期
updated 更新日期
tags 标签，如[‘技术’,’Hexo’]
categories 分类，如技术
keywords 文章关键字
description 文章描述
top_img 文章顶部图
cover 文章缩略图
comments 显示文章评论，默认显示
toc 显示目录
toc_number 显示目录标题序号
copyright 显示版权
copyright_author 文章作者
copyright_author_href 文章作者链接
copyright_url 文章链接
copyright_info 版权声明文字
mathjax 数学公式mathjax
katex 数学公式katex
aside 侧边栏
aplayer 音乐播放器
highlight_shrink 代码块是否展开

5 主题配置

5.1 导航目录配置

5.1.1 创建导航目录页面

鼠标右键单击选择Git Bash，打开终端，在博客根目录下输入以下命令创建归档页面：

1
hexo new page archives

对博客根目录source/archives下的index.md文件进行如下修改：

1
2
3
4
5
6
---
title: 归档
date: 2021-04-01 17:31:05
type: "archives"
top_img: https://cdn.jsdelivr.net/gh/GentleTK/cdn-source@latest/cover/cover1.jpg
---

鼠标右键单击选择Git Bash，打开终端，在博客根目录下输入以下命令创建标签页面：

1
hexo new page tags

对博客根目录source/tags下的index.md文件进行如下修改：

1
2
3
4
5
6
---
title: 标签
date: 2021-04-01 17:31:05
type: "tags"
top_img: https://cdn.jsdelivr.net/gh/GentleTK/cdn-source@latest/cover/cover1.jpg
---

鼠标右键单击选择Git Bash，打开终端，在博客根目录下输入以下命令创建分类页面：

1
hexo new page categories

对博客根目录source/categories下的index.md文件进行如下修改：

1
2
3
4
5
6
---
title: 分类
date: 2021-04-01 17:30:53
type: "categories"
top_img: https://cdn.jsdelivr.net/gh/GentleTK/cdn-source@latest/cover/cover1.jpg
---

鼠标右键单击选择Git Bash，打开终端，在博客根目录下输入以下命令创建友情链接页面：

1
hexo new page link

对博客根目录source/link下的index.md文件进行如下修改：

1
2
3
4
5
6
---
title: 友情链接
date: 2021-04-06 09:48:00
type: "link"
top_img: https://cdn.jsdelivr.net/gh/GentleTK/cdn-source@latest/cover/cover1.jpg
---

5.1.2 配置导航目录页面

对博客根目录下themes下的_config.yml进行编辑，设置导航目录如下：

1
2
3
4
5
6
7
8
9
10
11
# 导航目录设置
# 格式: name: link || icon
# 子菜单
# name || icon:
#   name || link || icon
menu:
  主页: / || fas fa-home
  归档: /archives || fas fa-archive
  标签: /tags || fas fa-tags
  分类: /categories || fas fa-folder-open
  友情链接: /link || fas fa-link

5.2 代码块配置

对博客根目录下themes下的_config.yml进行编辑，设置代码块如下：

1
2
3
4
5
6
7
# 代码块设置
highlight_theme: mac          # darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true          # 复制代码按钮
highlight_lang: true          # 显示代码语言
highlight_shrink: false       # true: 默认折叠代码  false: 默认展开代码  none: 展开代码并隐藏展开按钮
highlight_height_limit: false # 代码高度：px
code_word_wrap: false         # true: 代码自动换行(无滚动条)

5.3 复制配置

对博客根目录下themes下的_config.yml进行编辑，设置复制如下：

1
2
3
4
5
6
# 复制设置
copy:
  enable: true      # 开启复制设置
  copyright:
    enable: true    # 复制内容后加上版权信息
    limit_count: 50 # 复制字数限制(超过限制就会加上版权信息)

5.4 社交图标配置

对博客根目录下themes下的_config.yml进行编辑，设置社交图标如下：

1
2
3
4
5
6
7
8
9
# 社交图标设置
# 格式:
#   icon: link || the description
social:
  fab fa-github: https://github.com/YourGitHubUserName || Github
  fab fa-qq: http://wpa.qq.com/msgrd?v=3&uin=YourQQNumber&site=qq&menu=yes || QQ
  fab fa-weixin: https://cdn.jsdelivr.net/gh/GentleTK/cdn-source@latest/qrcode/weixin.jpg || WeChat
  fas fa-envelope: mailto:YourEmailAddress || Email
  fas fa-rss: /atom.xml

订阅需要安装安装hexo-generator-feed插件。

鼠标右键单击选择Git Bash，打开终端，在博客根目录下输入以下命令安装订阅插件：

1
npm install hexo-generator-feed --save

安装完成后，对博客根目录下的_config.yml进行修改，添加如下配置：

注意，是博客根目录下的_config.yml!

1
2
3
4
5
# 订阅
feed:
    type: atom
    path: atom.xml
    limit: 20

5.5 本地搜索配置

鼠标右键单击选择Git Bash，打开终端，在博客根目录下输入以下命令安装本地搜索插件：

1
npm install hexo-generator-searchdb --save

安装完成后，对博客根目录下的_config.yml进行修改，添加如下配置：

注意，是博客根目录下的_config.yml!

1
2
3
4
5
# 本地搜索
search:
    path: search.xml
    field: post
    format: html

5.6 字数统计配置

鼠标右键单击选择Git Bash，打开终端，在博客根目录下输入以下命令安装字数统计插件：

1
npm install hexo-wordcount --save

安装完成后，对博客根目录下themes下的_config.yml进行编辑，设置字数统计如下：

1
2
3
4
5
6
# 字数统计
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

5.7 文章过期提醒配置

对博客根目录下themes下的_config.yml进行编辑，设置文章过期提醒如下：

1
2
3
4
5
6
7
8
9
10
# 文章过期提醒设置
# limit_day: 距离更新时间多少天才显示提醒
# style: flat 样式(simple/flat)
noticeOutdate:
  enable: true
  style: flat 
  limit_day: 150 
  position: top
  message_prev: 请注意，本文更新于
  message_next: 天前，其中某些内容可能已经过时。

5.8 评论系统配置

Valine是一款快速、简洁且高效的无后端评论系统，使用Valine需要前往LeanCloud进行注册并登陆，进入控制台后点击创建应用

image-20210625150013397

点击创建好的应用，在左侧导航栏选择设置，点击应用凭证查看AppID和AppKey。

image-20210625150120739

获取AppID和AppKey后，对博客根目录下themes下的_config.yml进行编辑，设置评论系统为Valine：

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
32
33
34
35
36
37
38
39
40
41
42
43
# 评论系统设置
# use: 双评论系统设置，第一个为默认评论系统
#   -  评论系统选择: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
# text: 按钮旁显示评论系统名称
# lazyload: 懒加载，开启后，只有滚动到评论位置时才会加载评论所需要的资源，评论数不显示
# count: 文章顶部显示评论数
# card_post_count: 主页文章卡片显示评论数
comments:
  use:
    - Valine
    #- Disqus
  text: true 
  lazyload: false
  count: true 
  card_post_count: true 

# valine
# https://valine.js.org
valine:
  appId: 								                                  # leancloud application app id
  appKey: 							                                      # leancloud application app key
  tagMeta: 博主,小伙伴,访客                                               # 评论者标识
  master: 									                              # 博主md5加密邮箱
  nickPlaceholder: QQ号(输入QQ会自动补全邮箱)                             # 昵称占位符  
  mailPlaceholder: 邮箱                                                   # 邮箱占位符  
  placeholder: 填写QQ可以及时收到回复哦(●\'◡\'●)~                         # 评论区占位符
  avatar: monsterid                                                       # 默认头像样式 https://valine.js.org/#/avatar
  guest_info: nick,mail                                                   # 评论者信息(昵称，邮箱，链接)
  pageSize: 10                                                            # 评论列表每页最大数目
  lang: zh-CN                                                             # 语言设置(zh-CN/zh-TW/en/ja)
  recordIP: true                                                          # 是否记录评论者IP
  bg: 																	  # 评论区背景图
  emojiCDN: https://cdn.jsdelivr.net/gh/GentleTK/cdn-source@latest/emoji/ # emoji CDN
  enableQQ: true                                                          # 允许获取QQ头像
  requiredFields: nick,mail                                               # 必填项(nick/mail)
  visitor: true                                                           # 文章访问量统计
  option: 

# CDN
# 设置Valine的CDN为魔改后的
CDN:
  #valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
  valine: https://cdn.jsdelivr.net/gh/GentleTK/cdn-source@latest/js/Valine.min.js

5.9 音乐播放器配置

5.9.1 安装插件

鼠标右键单击选择Git Bash，打开终端，在博客根目录下输入以下命令安装音乐播放器插件：

1
npm install --save hexo-tag-aplayer

5.9.2 引入MeingJS

安装完成后，对博客根目录下的_config.yml进行修改，添加如下配置：

注意，是博客根目录下的_config.yml!

1
2
3
4
# 音乐播放器
aplayer:
  meting: true
  asset_inject: false

5.9.3 插入代码

然后对博客根目录下themes下的_config.yml进行编辑，设置主題的aplayerInject如下并插入代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true
  
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
      - <div class="aplayer no-destroy" data-id="NetEasePlaylistID" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>
    # - <script src="xxxx"></script>

其中参数的描述如下所示：

选项 默认值 描述
data-id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
data-server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
data-type 必须值 song, playlist, album, search, artist
data-fixed false 开启固定模式
data-mini false 开启迷你模式
data-listfolded false 指定音乐播放列表是否折叠
data-order list 列表播放模式： list, random
data-preload auto 音乐文件预载入模式，可选项： none, metadata, auto
data-autoplay true 自动播放，移动端浏览器暂时不支持此功能
data-loop all 列表循环模式：all, one,none
data-volume 0.7 播放器音量
data-lrctype 0 歌词格式类型
data-storagename metingjs LocalStorage 中存储播放器设定的键名
data-mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
data-listmaxheight 340px 播放列表的最大长度
data-theme #ad7a86 播放器风格色彩设置

如果想在页面跳转后，音乐不会中断，需要设置博客根目录下themes下的_config.yml文件中的pjax为true。

5.10 标签外挂配置

对博客根目录下themes下的_config.yml进行编辑，设置标签外挂如下：

1
2
3
4
5
6
7
# Note (Bootstrap Callout)
# style: simple/modern/flat/disable
note:
  style: flat
  icons: true
  border_radius: 3
  light_bg_offset: 0

5.10.1 default提示块标签

  1. simple样式
    1
    2
    3
    {% note default simple %}
    default 提示块标签
    {% endnote %}

    default 提示块标签

  2. modern样式
    1
    2
    3
    {% note default modern %}
    default 提示块标签
    {% endnote %}

    default 提示块标签

  3. flat样式
    1
    2
    3
    {% note default flat %}
    default 提示块标签
    {% endnote %}

    default 提示块标签

  4. disable样式
    1
    2
    3
    {% note default disable %}
    default 提示块标签
    {% endnote %}

    default 提示块标签

5.10.2 primary提示块标签

  1. simple样式
    1
    2
    3
    {% note primary simple %}
    primary提示块标签
    {% endnote %}

    primary提示块标签

  2. modern样式
    1
    2
    3
    {% note primary modern %}
    primary提示块标签
    {% endnote %}

    primary提示块标签

  3. flat样式
    1
    2
    3
    {% note primary flat %}
    primary提示块标签
    {% endnote %}

    primary提示块标签

  4. disable样式
    1
    2
    3
    {% note primary disable %}
    primary提示块标签
    {% endnote %}

    primary提示块标签

5.10.3 success提示块标签

  1. simple样式
    1
    2
    3
    {% note success simple %}
    success提示块标签
    {% endnote %}

    success提示块标签

  2. modern样式
    1
    2
    3
    {% note success modern %}
    success提示块标签
    {% endnote %}

    success提示块标签

  3. flat样式
    1
    2
    3
    {% note success flat %}
    success提示块标签
    {% endnote %}

    success提示块标签

  4. disable样式
    1
    2
    3
    {% note success disable %}
    success提示块标签
    {% endnote %}

    success提示块标签

5.10.4 info提示块标签

  1. simple样式
    1
    2
    3
    {% note info simple %}
    info提示块标签签
    {% endnote %}

    info提示块标签签

  2. modern样式
    1
    2
    3
    {% note info modern %}
    info提示块标签签
    {% endnote %}

    info提示块标签签

  3. flat样式
    1
    2
    3
    {% note info flat %}
    info提示块标签签
    {% endnote %}

    info提示块标签签

  4. disable样式
    1
    2
    3
    {% note info disable %}
    info提示块标签签
    {% endnote %}

    info提示块标签签

5.10.5 warning提示块标签

  1. simple样式
    1
    2
    3
    {% note warning simple %}
    warning提示块标签
    {% endnote %}

    warning提示块标签

  2. modern样式
    1
    2
    3
    {% note warning modern %}
    warning提示块标签
    {% endnote %}

    warning提示块标签

  3. flat样式
    1
    2
    3
    {% note warning flat %}
    warning提示块标签
    {% endnote %}

    warning提示块标签

  4. disable样式
    1
    2
    3
    {% note warning disable %}
    warning提示块标签
    {% endnote %}

    warning提示块标签

5.10.6 danger提示块标签

  1. simple样式
    1
    2
    3
    {% note danger simple %}
    danger提示块标签
    {% endnote %}

    danger提示块标签

  2. modern样式
    1
    2
    3
    {% note danger modern %}
    danger提示块标签
    {% endnote %}

    danger提示块标签

  3. flat样式
    1
    2
    3
    {% note danger flat %}
    danger提示块标签
    {% endnote %}

    danger提示块标签

  4. disable样式
    1
    2
    3
    {% note danger disable %}
    danger提示块标签
    {% endnote %}

    danger提示块标签