自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0

前言：
  一年多没升级主题了，作者添加了一些新特性，我目前的Butterfly版本是v3.0.0，而最新已经到v3.7.0了。一起来看看有什么新特性吧。

1 升级npm、Node.js、Hexo

  Hexo依赖Nodejs和Git环境，因此建议升级Hexo之前先将这两个也升级到最新版本。由于我的Git已经是最新版本了所以不用升级。如果是Windos平台需要升级Git，在命令上中输入以下指令即可。

1
git update-git-for-windows

  

1.1 升级Node.js和npm

  在命令行中输入以下指令查看自己的Nodejs版本。

1
node -v

  在命令行中输入以下指令查看自己的npm版本。

1
npm -v

  我现在的Nodejs版本是v12.16.1，而 Nodejs 官网显示最新的稳定版已经是v14.16.0了（装稳定版不要忙求最新，免得踩坑。），我现在npm版本是v6.13.4，npm最新版本已经是v6.14.11了。Nodejs中已经集成了npm，因此只需要升级Nodejs即可同步升级npm。
  在Windows平台下直接到Nodejs官网下载最新的稳定版msi文件安装即可，安装之前最好将旧版本卸载。

自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0

前言：
  一年多没升级主题了，作者添加了一些新特性，我目前的Butterfly版本是v3.0.0，而最新已经到v3.7.0了。一起来看看有什么新特性吧。

1 升级npm、Node.js、Hexo

  Hexo依赖Nodejs和Git环境，因此建议升级Hexo之前先将这两个也升级到最新版本。由于我的Git已经是最新版本了所以不用升级。如果是Windos平台需要升级Git，在命令上中输入以下指令即可。

1
git update-git-for-windows

  

1.1 升级Node.js和npm

  在命令行中输入以下指令查看自己的Nodejs版本。

1
node -v

  在命令行中输入以下指令查看自己的npm版本。

1
npm -v

  我现在的Nodejs版本是v12.16.1，而 Nodejs 官网显示最新的稳定版已经是v14.16.0了（装稳定版不要忙求最新，免得踩坑。），我现在npm版本是v6.13.4，npm最新版本已经是v6.14.11了。Nodejs中已经集成了npm，因此只需要升级Nodejs即可同步升级npm。
  在Windows平台下直接到Nodejs官网下载最新的稳定版msi文件安装即可，安装之前最好将旧版本卸载。

node_msi.png

  安装很简单，除了可能改下路径，其他按默认下一步就行。安装完成后再次查看版本确认是否更新成功。

1.3 升级Hexo

  我现在的Hexo版本是v5.0.0， Hexo 官网显示目前最新的正式版本是v5.4.0，现在将其升级到最新本体验。
  在cmd中输入指令升级hexo-cli，安装和升级是同一条指令。

1
npm install -g hexo-cli

  将cmd cd到你的Hexo根目录下（必须到根目录下），输入以下指令升级hexo，安装和升级是同一条指令。

1
npm install hexo

  输入指令查看hexo版本号。

1
hexo -v

hexo_v.png

2 升级Butterfly

2.1 重新生成Hexo博客目录

  由于我们升级了Hexo，中间隔了太多个版本，因此我建议使用新版本重新生成静态博客目录。将旧的静态博客目录做好备份，然后清空静态博客目录，在该目录下执行以下指令安装Hexo。

1
2
hexo init
npm install

  将会自动完成目录和环境搭建。

2.2 安装最新Butterfly主题

  已经半年多没有更新Butterfly了，现在还停留在Butterfly v3.0.0，最新的版本已经到v3.7.1，增加了一些新特性。要查看当前自己的butterfly版本只需在hexo下找到 ./thems/butterfly/package.json 文件，找到文件中的 version 项即可查看当前版本。

butterfly_version.png

  在刚搭建的Hexo根目录执行Git指令安装Butterfly主题。

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

2.3 最新pug和stylus插件

  由于最新版的Butterfly主题依赖于渲染器pug和stylus，因此我们还需要安装着两个插件，在静态博客根目录中输入以下指令即可。

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

2.4 升级建议

  为了将来升级时改动更小，将Butterfly主题根目录下的_config.yml复制到Hexo根目录里，并且重命名为_config.butterfly.yml。
  以后所有的主题配置只在这个文件里修改，解析时会自动合并Butterfly根目录下的_config.yml和_config.butterfly.yml文件里的配置，如果两边对同名配置冲突会按照_config.butterfly.yml文件里的配置，其优先级高于博客根目录下的文件。

3 拷贝配置和文章

  由于我们是新搭建的静态博客目录，因此还需要将之前旧的目录中的配置移植过来。需要注意的是对_config.yml和_config.butterfly.yml文件的配置，对source目录中文章和目录结构的移植，直接拷贝覆盖就行，但要注意如果之前按照旧版的Butterfly配置将其配置文件butterfly.yml放到了 source/_data 目录下，此时请将配置内容移植到_config.butterfly.yml文件中然后删除它。最好借助一些文件比较软件确认每一个差异点。
  由于是重新部署静态博客，因此之前使用的插件也要记得重新安装一下。

4 导航菜单

  v3.7.1的导航菜单语法规则已经不同于v3.0.0，请看以下并模仿规则编辑。

  • Butterfly v3.0.0 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf
  • Butterfly v3.7.1 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    分类: /categories/ || fas fa-box-open
    标签: /tags/ || fas fa-bookmark
    时间轴: /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    音乐: /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  规则差异主要在二级菜单栏的书写。

5 代码高亮

  Butterfly中总共支持6中代码高亮风格，分别是darker, pale night, light, ocean, mac, mac light。在_config.butterfly.yml文件中进行如下配置修改代码风格。

1
highlight_theme: mac light

mac_highlight.png

6 代码限高

  有时候博客中贴出的代码量偏大，占用非常多的行数，Butterfly v3.7.1提供了新的特性，用于实现代码限高，通过点击来展开剩下的代码行。

1
highlight_height_limit: 200 # unit: px

height_limit.gif

7 侧边栏

  Butterfly的侧边栏可以设置在左边或右边，只需修改_config.butterfly.yml中的配置，将 position 设置为 left 。

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right

left.png

8 运行时间

  若要显示网站已经运行的时间，只需在_config.butterfly.yml配置文件中进行如下配置，开启功能并且设置网站发布时间，时间格式为：月/日/年 時間。

1
2
3
runtimeshow:
  enable: true
  publish_date: 7/11/2020 00:00:00

run_time.png

9 最新评论

  开启了评论功能后，可以将最新评论显示在侧边栏中，进行如下配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false
参数 含义
limit 显示数量
storage 暂存时间（单位：分钟）
avatar 显示头像

newest.png

10 mermaid

  mermaid常在markdown中用来绘制流程图、时序图、类别图、状态图、甘特图等，在Hexo Butterfly主题中要使用mermaid需要准守以下语法，注意这不是markdown本身的语法规则。关于 mermaid 的详细语法可以查看官网。

1
2
3
{% mermaid %}
marmaid语法内容
{% endmermaid %}

  当然，要使用mermaid功能还需要在配置文件中配置使能。

1
2
3
4
5
6
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

  以下是使用mermaid的示例代码和效果展示。

1
2
3
4
5
6
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}

## 10 统计
### 10.1 添加百度统计
  在 [百度统计](https://tongji.baidu.com/) 注册账号，获取你的统计百度统计代码填写到配置文件中。

![baidu_tongji.png](https://blogimage-1302867234.cos.ap-chengdu.myqcloud.com/blogimage/docs/工具/Hexo/自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0/baidu_tongji.png "baidu_tongji")

```yml
baidu_analytics: #这里填你的百度统计代碼

11 KaTeX

  为了在博客中更好的显示一些公式效果，可以添加 KaTeX 插件支持进行渲染。在配置文件中开启这项功能。

1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true

  安装一下插件支持。

1
2
npm i hexo-renderer-markdown-it --save
npm install @neilsustc/markdown-it-katex --save

  修改博客根目录的_config.yml文件，添加以下配置。

1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

  以下是使用KaTeX的示例代码和效果展示。

1
$$x+y^{2x}$$

$$x+y^{2x}$$

11 开启页面加载动画

  登录博客网页时，加载需要一段时间，可能会导致首页图片显示效果不完整，这时候可以先显示加载动画等待页面加载完成。

1
2
# Loading Animation (加載動畫)
preloader: true

loading.gif

12 部署

  由于是重新部署的Hexo，因此要使用指令 hexo d 部署需要先安装插件。

1
npm install hexo-deployer-git --save

13 取消目录标题编号

  默认配置会开启目录中的标题编号，可在配置中将其关闭。

1
2
3
4
5
# toc (目錄)
toc:
  enable: true
  number: false
  style_simple: false

  安装很简单，除了可能改下路径，其他按默认下一步就行。安装完成后再次查看版本确认是否更新成功。

1.3 升级Hexo

  我现在的Hexo版本是v5.0.0， Hexo 官网显示目前最新的正式版本是v5.4.0，现在将其升级到最新本体验。
  在cmd中输入指令升级hexo-cli，安装和升级是同一条指令。

1
npm install -g hexo-cli

  将cmd cd到你的Hexo根目录下（必须到根目录下），输入以下指令升级hexo，安装和升级是同一条指令。

1
npm install hexo

  输入指令查看hexo版本号。

1
hexo -v

自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0

前言：
  一年多没升级主题了，作者添加了一些新特性，我目前的Butterfly版本是v3.0.0，而最新已经到v3.7.0了。一起来看看有什么新特性吧。

1 升级npm、Node.js、Hexo

  Hexo依赖Nodejs和Git环境，因此建议升级Hexo之前先将这两个也升级到最新版本。由于我的Git已经是最新版本了所以不用升级。如果是Windos平台需要升级Git，在命令上中输入以下指令即可。

1
git update-git-for-windows

  

1.1 升级Node.js和npm

  在命令行中输入以下指令查看自己的Nodejs版本。

1
node -v

  在命令行中输入以下指令查看自己的npm版本。

1
npm -v

  我现在的Nodejs版本是v12.16.1，而 Nodejs 官网显示最新的稳定版已经是v14.16.0了（装稳定版不要忙求最新，免得踩坑。），我现在npm版本是v6.13.4，npm最新版本已经是v6.14.11了。Nodejs中已经集成了npm，因此只需要升级Nodejs即可同步升级npm。
  在Windows平台下直接到Nodejs官网下载最新的稳定版msi文件安装即可，安装之前最好将旧版本卸载。

node_msi.png

  安装很简单，除了可能改下路径，其他按默认下一步就行。安装完成后再次查看版本确认是否更新成功。

1.3 升级Hexo

  我现在的Hexo版本是v5.0.0， Hexo 官网显示目前最新的正式版本是v5.4.0，现在将其升级到最新本体验。
  在cmd中输入指令升级hexo-cli，安装和升级是同一条指令。

1
npm install -g hexo-cli

  将cmd cd到你的Hexo根目录下（必须到根目录下），输入以下指令升级hexo，安装和升级是同一条指令。

1
npm install hexo

  输入指令查看hexo版本号。

1
hexo -v

hexo_v.png

2 升级Butterfly

2.1 重新生成Hexo博客目录

  由于我们升级了Hexo，中间隔了太多个版本，因此我建议使用新版本重新生成静态博客目录。将旧的静态博客目录做好备份，然后清空静态博客目录，在该目录下执行以下指令安装Hexo。

1
2
hexo init
npm install

  将会自动完成目录和环境搭建。

2.2 安装最新Butterfly主题

  已经半年多没有更新Butterfly了，现在还停留在Butterfly v3.0.0，最新的版本已经到v3.7.1，增加了一些新特性。要查看当前自己的butterfly版本只需在hexo下找到 ./thems/butterfly/package.json 文件，找到文件中的 version 项即可查看当前版本。

butterfly_version.png

  在刚搭建的Hexo根目录执行Git指令安装Butterfly主题。

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

2.3 最新pug和stylus插件

  由于最新版的Butterfly主题依赖于渲染器pug和stylus，因此我们还需要安装着两个插件，在静态博客根目录中输入以下指令即可。

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

2.4 升级建议

  为了将来升级时改动更小，将Butterfly主题根目录下的_config.yml复制到Hexo根目录里，并且重命名为_config.butterfly.yml。
  以后所有的主题配置只在这个文件里修改，解析时会自动合并Butterfly根目录下的_config.yml和_config.butterfly.yml文件里的配置，如果两边对同名配置冲突会按照_config.butterfly.yml文件里的配置，其优先级高于博客根目录下的文件。

3 拷贝配置和文章

  由于我们是新搭建的静态博客目录，因此还需要将之前旧的目录中的配置移植过来。需要注意的是对_config.yml和_config.butterfly.yml文件的配置，对source目录中文章和目录结构的移植，直接拷贝覆盖就行，但要注意如果之前按照旧版的Butterfly配置将其配置文件butterfly.yml放到了 source/_data 目录下，此时请将配置内容移植到_config.butterfly.yml文件中然后删除它。最好借助一些文件比较软件确认每一个差异点。
  由于是重新部署静态博客，因此之前使用的插件也要记得重新安装一下。

4 导航菜单

  v3.7.1的导航菜单语法规则已经不同于v3.0.0，请看以下并模仿规则编辑。

  • Butterfly v3.0.0 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf
  • Butterfly v3.7.1 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    分类: /categories/ || fas fa-box-open
    标签: /tags/ || fas fa-bookmark
    时间轴: /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    音乐: /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  规则差异主要在二级菜单栏的书写。

5 代码高亮

  Butterfly中总共支持6中代码高亮风格，分别是darker, pale night, light, ocean, mac, mac light。在_config.butterfly.yml文件中进行如下配置修改代码风格。

1
highlight_theme: mac light

mac_highlight.png

6 代码限高

  有时候博客中贴出的代码量偏大，占用非常多的行数，Butterfly v3.7.1提供了新的特性，用于实现代码限高，通过点击来展开剩下的代码行。

1
highlight_height_limit: 200 # unit: px

height_limit.gif

7 侧边栏

  Butterfly的侧边栏可以设置在左边或右边，只需修改_config.butterfly.yml中的配置，将 position 设置为 left 。

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right

left.png

8 运行时间

  若要显示网站已经运行的时间，只需在_config.butterfly.yml配置文件中进行如下配置，开启功能并且设置网站发布时间，时间格式为：月/日/年 時間。

1
2
3
runtimeshow:
  enable: true
  publish_date: 7/11/2020 00:00:00

run_time.png

9 最新评论

  开启了评论功能后，可以将最新评论显示在侧边栏中，进行如下配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false
参数 含义
limit 显示数量
storage 暂存时间（单位：分钟）
avatar 显示头像

newest.png

10 mermaid

  mermaid常在markdown中用来绘制流程图、时序图、类别图、状态图、甘特图等，在Hexo Butterfly主题中要使用mermaid需要准守以下语法，注意这不是markdown本身的语法规则。关于 mermaid 的详细语法可以查看官网。

1
2
3
{% mermaid %}
marmaid语法内容
{% endmermaid %}

  当然，要使用mermaid功能还需要在配置文件中配置使能。

1
2
3
4
5
6
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

  以下是使用mermaid的示例代码和效果展示。

1
2
3
4
5
6
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}

## 10 统计
### 10.1 添加百度统计
  在 [百度统计](https://tongji.baidu.com/) 注册账号，获取你的统计百度统计代码填写到配置文件中。

![baidu_tongji.png](https://blogimage-1302867234.cos.ap-chengdu.myqcloud.com/blogimage/docs/工具/Hexo/自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0/baidu_tongji.png "baidu_tongji")

```yml
baidu_analytics: #这里填你的百度统计代碼

11 KaTeX

  为了在博客中更好的显示一些公式效果，可以添加 KaTeX 插件支持进行渲染。在配置文件中开启这项功能。

1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true

  安装一下插件支持。

1
2
npm i hexo-renderer-markdown-it --save
npm install @neilsustc/markdown-it-katex --save

  修改博客根目录的_config.yml文件，添加以下配置。

1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

  以下是使用KaTeX的示例代码和效果展示。

1
$$x+y^{2x}$$

$$x+y^{2x}$$

11 开启页面加载动画

  登录博客网页时，加载需要一段时间，可能会导致首页图片显示效果不完整，这时候可以先显示加载动画等待页面加载完成。

1
2
# Loading Animation (加載動畫)
preloader: true

loading.gif

12 部署

  由于是重新部署的Hexo，因此要使用指令 hexo d 部署需要先安装插件。

1
npm install hexo-deployer-git --save

13 取消目录标题编号

  默认配置会开启目录中的标题编号，可在配置中将其关闭。

1
2
3
4
5
# toc (目錄)
toc:
  enable: true
  number: false
  style_simple: false

2 升级Butterfly

2.1 重新生成Hexo博客目录

  由于我们升级了Hexo，中间隔了太多个版本，因此我建议使用新版本重新生成静态博客目录。将旧的静态博客目录做好备份，然后清空静态博客目录，在该目录下执行以下指令安装Hexo。

1
2
hexo init
npm install

  将会自动完成目录和环境搭建。

2.2 安装最新Butterfly主题

  已经半年多没有更新Butterfly了，现在还停留在Butterfly v3.0.0，最新的版本已经到v3.7.1，增加了一些新特性。要查看当前自己的butterfly版本只需在hexo下找到 ./thems/butterfly/package.json 文件，找到文件中的 version 项即可查看当前版本。

自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0

前言：
  一年多没升级主题了，作者添加了一些新特性，我目前的Butterfly版本是v3.0.0，而最新已经到v3.7.0了。一起来看看有什么新特性吧。

1 升级npm、Node.js、Hexo

  Hexo依赖Nodejs和Git环境，因此建议升级Hexo之前先将这两个也升级到最新版本。由于我的Git已经是最新版本了所以不用升级。如果是Windos平台需要升级Git，在命令上中输入以下指令即可。

1
git update-git-for-windows

  

1.1 升级Node.js和npm

  在命令行中输入以下指令查看自己的Nodejs版本。

1
node -v

  在命令行中输入以下指令查看自己的npm版本。

1
npm -v

  我现在的Nodejs版本是v12.16.1，而 Nodejs 官网显示最新的稳定版已经是v14.16.0了（装稳定版不要忙求最新，免得踩坑。），我现在npm版本是v6.13.4，npm最新版本已经是v6.14.11了。Nodejs中已经集成了npm，因此只需要升级Nodejs即可同步升级npm。
  在Windows平台下直接到Nodejs官网下载最新的稳定版msi文件安装即可，安装之前最好将旧版本卸载。

node_msi.png

  安装很简单，除了可能改下路径，其他按默认下一步就行。安装完成后再次查看版本确认是否更新成功。

1.3 升级Hexo

  我现在的Hexo版本是v5.0.0， Hexo 官网显示目前最新的正式版本是v5.4.0，现在将其升级到最新本体验。
  在cmd中输入指令升级hexo-cli，安装和升级是同一条指令。

1
npm install -g hexo-cli

  将cmd cd到你的Hexo根目录下（必须到根目录下），输入以下指令升级hexo，安装和升级是同一条指令。

1
npm install hexo

  输入指令查看hexo版本号。

1
hexo -v

hexo_v.png

2 升级Butterfly

2.1 重新生成Hexo博客目录

  由于我们升级了Hexo，中间隔了太多个版本，因此我建议使用新版本重新生成静态博客目录。将旧的静态博客目录做好备份，然后清空静态博客目录，在该目录下执行以下指令安装Hexo。

1
2
hexo init
npm install

  将会自动完成目录和环境搭建。

2.2 安装最新Butterfly主题

  已经半年多没有更新Butterfly了，现在还停留在Butterfly v3.0.0，最新的版本已经到v3.7.1，增加了一些新特性。要查看当前自己的butterfly版本只需在hexo下找到 ./thems/butterfly/package.json 文件，找到文件中的 version 项即可查看当前版本。

butterfly_version.png

  在刚搭建的Hexo根目录执行Git指令安装Butterfly主题。

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

2.3 最新pug和stylus插件

  由于最新版的Butterfly主题依赖于渲染器pug和stylus，因此我们还需要安装着两个插件，在静态博客根目录中输入以下指令即可。

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

2.4 升级建议

  为了将来升级时改动更小，将Butterfly主题根目录下的_config.yml复制到Hexo根目录里，并且重命名为_config.butterfly.yml。
  以后所有的主题配置只在这个文件里修改，解析时会自动合并Butterfly根目录下的_config.yml和_config.butterfly.yml文件里的配置，如果两边对同名配置冲突会按照_config.butterfly.yml文件里的配置，其优先级高于博客根目录下的文件。

3 拷贝配置和文章

  由于我们是新搭建的静态博客目录，因此还需要将之前旧的目录中的配置移植过来。需要注意的是对_config.yml和_config.butterfly.yml文件的配置，对source目录中文章和目录结构的移植，直接拷贝覆盖就行，但要注意如果之前按照旧版的Butterfly配置将其配置文件butterfly.yml放到了 source/_data 目录下，此时请将配置内容移植到_config.butterfly.yml文件中然后删除它。最好借助一些文件比较软件确认每一个差异点。
  由于是重新部署静态博客，因此之前使用的插件也要记得重新安装一下。

4 导航菜单

  v3.7.1的导航菜单语法规则已经不同于v3.0.0，请看以下并模仿规则编辑。

  • Butterfly v3.0.0 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf
  • Butterfly v3.7.1 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    分类: /categories/ || fas fa-box-open
    标签: /tags/ || fas fa-bookmark
    时间轴: /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    音乐: /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  规则差异主要在二级菜单栏的书写。

5 代码高亮

  Butterfly中总共支持6中代码高亮风格，分别是darker, pale night, light, ocean, mac, mac light。在_config.butterfly.yml文件中进行如下配置修改代码风格。

1
highlight_theme: mac light

mac_highlight.png

6 代码限高

  有时候博客中贴出的代码量偏大，占用非常多的行数，Butterfly v3.7.1提供了新的特性，用于实现代码限高，通过点击来展开剩下的代码行。

1
highlight_height_limit: 200 # unit: px

height_limit.gif

7 侧边栏

  Butterfly的侧边栏可以设置在左边或右边，只需修改_config.butterfly.yml中的配置，将 position 设置为 left 。

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right

left.png

8 运行时间

  若要显示网站已经运行的时间，只需在_config.butterfly.yml配置文件中进行如下配置，开启功能并且设置网站发布时间，时间格式为：月/日/年 時間。

1
2
3
runtimeshow:
  enable: true
  publish_date: 7/11/2020 00:00:00

run_time.png

9 最新评论

  开启了评论功能后，可以将最新评论显示在侧边栏中，进行如下配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false
参数 含义
limit 显示数量
storage 暂存时间（单位：分钟）
avatar 显示头像

newest.png

10 mermaid

  mermaid常在markdown中用来绘制流程图、时序图、类别图、状态图、甘特图等，在Hexo Butterfly主题中要使用mermaid需要准守以下语法，注意这不是markdown本身的语法规则。关于 mermaid 的详细语法可以查看官网。

1
2
3
{% mermaid %}
marmaid语法内容
{% endmermaid %}

  当然，要使用mermaid功能还需要在配置文件中配置使能。

1
2
3
4
5
6
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

  以下是使用mermaid的示例代码和效果展示。

1
2
3
4
5
6
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}

## 10 统计
### 10.1 添加百度统计
  在 [百度统计](https://tongji.baidu.com/) 注册账号，获取你的统计百度统计代码填写到配置文件中。

![baidu_tongji.png](https://blogimage-1302867234.cos.ap-chengdu.myqcloud.com/blogimage/docs/工具/Hexo/自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0/baidu_tongji.png "baidu_tongji")

```yml
baidu_analytics: #这里填你的百度统计代碼

11 KaTeX

  为了在博客中更好的显示一些公式效果，可以添加 KaTeX 插件支持进行渲染。在配置文件中开启这项功能。

1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true

  安装一下插件支持。

1
2
npm i hexo-renderer-markdown-it --save
npm install @neilsustc/markdown-it-katex --save

  修改博客根目录的_config.yml文件，添加以下配置。

1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

  以下是使用KaTeX的示例代码和效果展示。

1
$$x+y^{2x}$$

$$x+y^{2x}$$

11 开启页面加载动画

  登录博客网页时，加载需要一段时间，可能会导致首页图片显示效果不完整，这时候可以先显示加载动画等待页面加载完成。

1
2
# Loading Animation (加載動畫)
preloader: true

loading.gif

12 部署

  由于是重新部署的Hexo，因此要使用指令 hexo d 部署需要先安装插件。

1
npm install hexo-deployer-git --save

13 取消目录标题编号

  默认配置会开启目录中的标题编号，可在配置中将其关闭。

1
2
3
4
5
# toc (目錄)
toc:
  enable: true
  number: false
  style_simple: false

  在刚搭建的Hexo根目录执行Git指令安装Butterfly主题。

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

2.3 最新pug和stylus插件

  由于最新版的Butterfly主题依赖于渲染器pug和stylus，因此我们还需要安装着两个插件，在静态博客根目录中输入以下指令即可。

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

2.4 升级建议

  为了将来升级时改动更小，将Butterfly主题根目录下的_config.yml复制到Hexo根目录里，并且重命名为_config.butterfly.yml。
  以后所有的主题配置只在这个文件里修改，解析时会自动合并Butterfly根目录下的_config.yml和_config.butterfly.yml文件里的配置，如果两边对同名配置冲突会按照_config.butterfly.yml文件里的配置，其优先级高于博客根目录下的文件。

3 拷贝配置和文章

  由于我们是新搭建的静态博客目录，因此还需要将之前旧的目录中的配置移植过来。需要注意的是对_config.yml和_config.butterfly.yml文件的配置，对source目录中文章和目录结构的移植，直接拷贝覆盖就行，但要注意如果之前按照旧版的Butterfly配置将其配置文件butterfly.yml放到了 source/_data 目录下，此时请将配置内容移植到_config.butterfly.yml文件中然后删除它。最好借助一些文件比较软件确认每一个差异点。
  由于是重新部署静态博客，因此之前使用的插件也要记得重新安装一下。

4 导航菜单

  v3.7.1的导航菜单语法规则已经不同于v3.0.0，请看以下并模仿规则编辑。

  • Butterfly v3.0.0 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf
  • Butterfly v3.7.1 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    分类: /categories/ || fas fa-box-open
    标签: /tags/ || fas fa-bookmark
    时间轴: /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    音乐: /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  规则差异主要在二级菜单栏的书写。

5 代码高亮

  Butterfly中总共支持6中代码高亮风格，分别是darker, pale night, light, ocean, mac, mac light。在_config.butterfly.yml文件中进行如下配置修改代码风格。

1
highlight_theme: mac light

自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0

前言：
  一年多没升级主题了，作者添加了一些新特性，我目前的Butterfly版本是v3.0.0，而最新已经到v3.7.0了。一起来看看有什么新特性吧。

1 升级npm、Node.js、Hexo

  Hexo依赖Nodejs和Git环境，因此建议升级Hexo之前先将这两个也升级到最新版本。由于我的Git已经是最新版本了所以不用升级。如果是Windos平台需要升级Git，在命令上中输入以下指令即可。

1
git update-git-for-windows

  

1.1 升级Node.js和npm

  在命令行中输入以下指令查看自己的Nodejs版本。

1
node -v

  在命令行中输入以下指令查看自己的npm版本。

1
npm -v

  我现在的Nodejs版本是v12.16.1，而 Nodejs 官网显示最新的稳定版已经是v14.16.0了（装稳定版不要忙求最新，免得踩坑。），我现在npm版本是v6.13.4，npm最新版本已经是v6.14.11了。Nodejs中已经集成了npm，因此只需要升级Nodejs即可同步升级npm。
  在Windows平台下直接到Nodejs官网下载最新的稳定版msi文件安装即可，安装之前最好将旧版本卸载。

node_msi.png

  安装很简单，除了可能改下路径，其他按默认下一步就行。安装完成后再次查看版本确认是否更新成功。

1.3 升级Hexo

  我现在的Hexo版本是v5.0.0， Hexo 官网显示目前最新的正式版本是v5.4.0，现在将其升级到最新本体验。
  在cmd中输入指令升级hexo-cli，安装和升级是同一条指令。

1
npm install -g hexo-cli

  将cmd cd到你的Hexo根目录下（必须到根目录下），输入以下指令升级hexo，安装和升级是同一条指令。

1
npm install hexo

  输入指令查看hexo版本号。

1
hexo -v

hexo_v.png

2 升级Butterfly

2.1 重新生成Hexo博客目录

  由于我们升级了Hexo，中间隔了太多个版本，因此我建议使用新版本重新生成静态博客目录。将旧的静态博客目录做好备份，然后清空静态博客目录，在该目录下执行以下指令安装Hexo。

1
2
hexo init
npm install

  将会自动完成目录和环境搭建。

2.2 安装最新Butterfly主题

  已经半年多没有更新Butterfly了，现在还停留在Butterfly v3.0.0，最新的版本已经到v3.7.1，增加了一些新特性。要查看当前自己的butterfly版本只需在hexo下找到 ./thems/butterfly/package.json 文件，找到文件中的 version 项即可查看当前版本。

butterfly_version.png

  在刚搭建的Hexo根目录执行Git指令安装Butterfly主题。

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

2.3 最新pug和stylus插件

  由于最新版的Butterfly主题依赖于渲染器pug和stylus，因此我们还需要安装着两个插件，在静态博客根目录中输入以下指令即可。

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

2.4 升级建议

  为了将来升级时改动更小，将Butterfly主题根目录下的_config.yml复制到Hexo根目录里，并且重命名为_config.butterfly.yml。
  以后所有的主题配置只在这个文件里修改，解析时会自动合并Butterfly根目录下的_config.yml和_config.butterfly.yml文件里的配置，如果两边对同名配置冲突会按照_config.butterfly.yml文件里的配置，其优先级高于博客根目录下的文件。

3 拷贝配置和文章

  由于我们是新搭建的静态博客目录，因此还需要将之前旧的目录中的配置移植过来。需要注意的是对_config.yml和_config.butterfly.yml文件的配置，对source目录中文章和目录结构的移植，直接拷贝覆盖就行，但要注意如果之前按照旧版的Butterfly配置将其配置文件butterfly.yml放到了 source/_data 目录下，此时请将配置内容移植到_config.butterfly.yml文件中然后删除它。最好借助一些文件比较软件确认每一个差异点。
  由于是重新部署静态博客，因此之前使用的插件也要记得重新安装一下。

4 导航菜单

  v3.7.1的导航菜单语法规则已经不同于v3.0.0，请看以下并模仿规则编辑。

  • Butterfly v3.0.0 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf
  • Butterfly v3.7.1 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    分类: /categories/ || fas fa-box-open
    标签: /tags/ || fas fa-bookmark
    时间轴: /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    音乐: /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  规则差异主要在二级菜单栏的书写。

5 代码高亮

  Butterfly中总共支持6中代码高亮风格，分别是darker, pale night, light, ocean, mac, mac light。在_config.butterfly.yml文件中进行如下配置修改代码风格。

1
highlight_theme: mac light

mac_highlight.png

6 代码限高

  有时候博客中贴出的代码量偏大，占用非常多的行数，Butterfly v3.7.1提供了新的特性，用于实现代码限高，通过点击来展开剩下的代码行。

1
highlight_height_limit: 200 # unit: px

height_limit.gif

7 侧边栏

  Butterfly的侧边栏可以设置在左边或右边，只需修改_config.butterfly.yml中的配置，将 position 设置为 left 。

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right

left.png

8 运行时间

  若要显示网站已经运行的时间，只需在_config.butterfly.yml配置文件中进行如下配置，开启功能并且设置网站发布时间，时间格式为：月/日/年 時間。

1
2
3
runtimeshow:
  enable: true
  publish_date: 7/11/2020 00:00:00

run_time.png

9 最新评论

  开启了评论功能后，可以将最新评论显示在侧边栏中，进行如下配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false
参数 含义
limit 显示数量
storage 暂存时间（单位：分钟）
avatar 显示头像

newest.png

10 mermaid

  mermaid常在markdown中用来绘制流程图、时序图、类别图、状态图、甘特图等，在Hexo Butterfly主题中要使用mermaid需要准守以下语法，注意这不是markdown本身的语法规则。关于 mermaid 的详细语法可以查看官网。

1
2
3
{% mermaid %}
marmaid语法内容
{% endmermaid %}

  当然，要使用mermaid功能还需要在配置文件中配置使能。

1
2
3
4
5
6
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

  以下是使用mermaid的示例代码和效果展示。

1
2
3
4
5
6
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}

## 10 统计
### 10.1 添加百度统计
  在 [百度统计](https://tongji.baidu.com/) 注册账号，获取你的统计百度统计代码填写到配置文件中。

![baidu_tongji.png](https://blogimage-1302867234.cos.ap-chengdu.myqcloud.com/blogimage/docs/工具/Hexo/自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0/baidu_tongji.png "baidu_tongji")

```yml
baidu_analytics: #这里填你的百度统计代碼

11 KaTeX

  为了在博客中更好的显示一些公式效果，可以添加 KaTeX 插件支持进行渲染。在配置文件中开启这项功能。

1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true

  安装一下插件支持。

1
2
npm i hexo-renderer-markdown-it --save
npm install @neilsustc/markdown-it-katex --save

  修改博客根目录的_config.yml文件，添加以下配置。

1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

  以下是使用KaTeX的示例代码和效果展示。

1
$$x+y^{2x}$$

$$x+y^{2x}$$

11 开启页面加载动画

  登录博客网页时，加载需要一段时间，可能会导致首页图片显示效果不完整，这时候可以先显示加载动画等待页面加载完成。

1
2
# Loading Animation (加載動畫)
preloader: true

loading.gif

12 部署

  由于是重新部署的Hexo，因此要使用指令 hexo d 部署需要先安装插件。

1
npm install hexo-deployer-git --save

13 取消目录标题编号

  默认配置会开启目录中的标题编号，可在配置中将其关闭。

1
2
3
4
5
# toc (目錄)
toc:
  enable: true
  number: false
  style_simple: false

6 代码限高

  有时候博客中贴出的代码量偏大，占用非常多的行数，Butterfly v3.7.1提供了新的特性，用于实现代码限高，通过点击来展开剩下的代码行。

1
highlight_height_limit: 200 # unit: px

自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0

前言：
  一年多没升级主题了，作者添加了一些新特性，我目前的Butterfly版本是v3.0.0，而最新已经到v3.7.0了。一起来看看有什么新特性吧。

1 升级npm、Node.js、Hexo

  Hexo依赖Nodejs和Git环境，因此建议升级Hexo之前先将这两个也升级到最新版本。由于我的Git已经是最新版本了所以不用升级。如果是Windos平台需要升级Git，在命令上中输入以下指令即可。

1
git update-git-for-windows

  

1.1 升级Node.js和npm

  在命令行中输入以下指令查看自己的Nodejs版本。

1
node -v

  在命令行中输入以下指令查看自己的npm版本。

1
npm -v

  我现在的Nodejs版本是v12.16.1，而 Nodejs 官网显示最新的稳定版已经是v14.16.0了（装稳定版不要忙求最新，免得踩坑。），我现在npm版本是v6.13.4，npm最新版本已经是v6.14.11了。Nodejs中已经集成了npm，因此只需要升级Nodejs即可同步升级npm。
  在Windows平台下直接到Nodejs官网下载最新的稳定版msi文件安装即可，安装之前最好将旧版本卸载。

node_msi.png

  安装很简单，除了可能改下路径，其他按默认下一步就行。安装完成后再次查看版本确认是否更新成功。

1.3 升级Hexo

  我现在的Hexo版本是v5.0.0， Hexo 官网显示目前最新的正式版本是v5.4.0，现在将其升级到最新本体验。
  在cmd中输入指令升级hexo-cli，安装和升级是同一条指令。

1
npm install -g hexo-cli

  将cmd cd到你的Hexo根目录下（必须到根目录下），输入以下指令升级hexo，安装和升级是同一条指令。

1
npm install hexo

  输入指令查看hexo版本号。

1
hexo -v

hexo_v.png

2 升级Butterfly

2.1 重新生成Hexo博客目录

  由于我们升级了Hexo，中间隔了太多个版本，因此我建议使用新版本重新生成静态博客目录。将旧的静态博客目录做好备份，然后清空静态博客目录，在该目录下执行以下指令安装Hexo。

1
2
hexo init
npm install

  将会自动完成目录和环境搭建。

2.2 安装最新Butterfly主题

  已经半年多没有更新Butterfly了，现在还停留在Butterfly v3.0.0，最新的版本已经到v3.7.1，增加了一些新特性。要查看当前自己的butterfly版本只需在hexo下找到 ./thems/butterfly/package.json 文件，找到文件中的 version 项即可查看当前版本。

butterfly_version.png

  在刚搭建的Hexo根目录执行Git指令安装Butterfly主题。

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

2.3 最新pug和stylus插件

  由于最新版的Butterfly主题依赖于渲染器pug和stylus，因此我们还需要安装着两个插件，在静态博客根目录中输入以下指令即可。

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

2.4 升级建议

  为了将来升级时改动更小，将Butterfly主题根目录下的_config.yml复制到Hexo根目录里，并且重命名为_config.butterfly.yml。
  以后所有的主题配置只在这个文件里修改，解析时会自动合并Butterfly根目录下的_config.yml和_config.butterfly.yml文件里的配置，如果两边对同名配置冲突会按照_config.butterfly.yml文件里的配置，其优先级高于博客根目录下的文件。

3 拷贝配置和文章

  由于我们是新搭建的静态博客目录，因此还需要将之前旧的目录中的配置移植过来。需要注意的是对_config.yml和_config.butterfly.yml文件的配置，对source目录中文章和目录结构的移植，直接拷贝覆盖就行，但要注意如果之前按照旧版的Butterfly配置将其配置文件butterfly.yml放到了 source/_data 目录下，此时请将配置内容移植到_config.butterfly.yml文件中然后删除它。最好借助一些文件比较软件确认每一个差异点。
  由于是重新部署静态博客，因此之前使用的插件也要记得重新安装一下。

4 导航菜单

  v3.7.1的导航菜单语法规则已经不同于v3.0.0，请看以下并模仿规则编辑。

  • Butterfly v3.0.0 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf
  • Butterfly v3.7.1 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    分类: /categories/ || fas fa-box-open
    标签: /tags/ || fas fa-bookmark
    时间轴: /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    音乐: /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  规则差异主要在二级菜单栏的书写。

5 代码高亮

  Butterfly中总共支持6中代码高亮风格，分别是darker, pale night, light, ocean, mac, mac light。在_config.butterfly.yml文件中进行如下配置修改代码风格。

1
highlight_theme: mac light

mac_highlight.png

6 代码限高

  有时候博客中贴出的代码量偏大，占用非常多的行数，Butterfly v3.7.1提供了新的特性，用于实现代码限高，通过点击来展开剩下的代码行。

1
highlight_height_limit: 200 # unit: px

height_limit.gif

7 侧边栏

  Butterfly的侧边栏可以设置在左边或右边，只需修改_config.butterfly.yml中的配置，将 position 设置为 left 。

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right

left.png

8 运行时间

  若要显示网站已经运行的时间，只需在_config.butterfly.yml配置文件中进行如下配置，开启功能并且设置网站发布时间，时间格式为：月/日/年 時間。

1
2
3
runtimeshow:
  enable: true
  publish_date: 7/11/2020 00:00:00

run_time.png

9 最新评论

  开启了评论功能后，可以将最新评论显示在侧边栏中，进行如下配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false
参数 含义
limit 显示数量
storage 暂存时间（单位：分钟）
avatar 显示头像

newest.png

10 mermaid

  mermaid常在markdown中用来绘制流程图、时序图、类别图、状态图、甘特图等，在Hexo Butterfly主题中要使用mermaid需要准守以下语法，注意这不是markdown本身的语法规则。关于 mermaid 的详细语法可以查看官网。

1
2
3
{% mermaid %}
marmaid语法内容
{% endmermaid %}

  当然，要使用mermaid功能还需要在配置文件中配置使能。

1
2
3
4
5
6
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

  以下是使用mermaid的示例代码和效果展示。

1
2
3
4
5
6
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}

## 10 统计
### 10.1 添加百度统计
  在 [百度统计](https://tongji.baidu.com/) 注册账号，获取你的统计百度统计代码填写到配置文件中。

![baidu_tongji.png](https://blogimage-1302867234.cos.ap-chengdu.myqcloud.com/blogimage/docs/工具/Hexo/自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0/baidu_tongji.png "baidu_tongji")

```yml
baidu_analytics: #这里填你的百度统计代碼

11 KaTeX

  为了在博客中更好的显示一些公式效果，可以添加 KaTeX 插件支持进行渲染。在配置文件中开启这项功能。

1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true

  安装一下插件支持。

1
2
npm i hexo-renderer-markdown-it --save
npm install @neilsustc/markdown-it-katex --save

  修改博客根目录的_config.yml文件，添加以下配置。

1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

  以下是使用KaTeX的示例代码和效果展示。

1
$$x+y^{2x}$$

$$x+y^{2x}$$

11 开启页面加载动画

  登录博客网页时，加载需要一段时间，可能会导致首页图片显示效果不完整，这时候可以先显示加载动画等待页面加载完成。

1
2
# Loading Animation (加載動畫)
preloader: true

loading.gif

12 部署

  由于是重新部署的Hexo，因此要使用指令 hexo d 部署需要先安装插件。

1
npm install hexo-deployer-git --save

13 取消目录标题编号

  默认配置会开启目录中的标题编号，可在配置中将其关闭。

1
2
3
4
5
# toc (目錄)
toc:
  enable: true
  number: false
  style_simple: false

7 侧边栏

  Butterfly的侧边栏可以设置在左边或右边，只需修改_config.butterfly.yml中的配置，将 position 设置为 left 。

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right

自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0

前言：
  一年多没升级主题了，作者添加了一些新特性，我目前的Butterfly版本是v3.0.0，而最新已经到v3.7.0了。一起来看看有什么新特性吧。

1 升级npm、Node.js、Hexo

  Hexo依赖Nodejs和Git环境，因此建议升级Hexo之前先将这两个也升级到最新版本。由于我的Git已经是最新版本了所以不用升级。如果是Windos平台需要升级Git，在命令上中输入以下指令即可。

1
git update-git-for-windows

  

1.1 升级Node.js和npm

  在命令行中输入以下指令查看自己的Nodejs版本。

1
node -v

  在命令行中输入以下指令查看自己的npm版本。

1
npm -v

  我现在的Nodejs版本是v12.16.1，而 Nodejs 官网显示最新的稳定版已经是v14.16.0了（装稳定版不要忙求最新，免得踩坑。），我现在npm版本是v6.13.4，npm最新版本已经是v6.14.11了。Nodejs中已经集成了npm，因此只需要升级Nodejs即可同步升级npm。
  在Windows平台下直接到Nodejs官网下载最新的稳定版msi文件安装即可，安装之前最好将旧版本卸载。

node_msi.png

  安装很简单，除了可能改下路径，其他按默认下一步就行。安装完成后再次查看版本确认是否更新成功。

1.3 升级Hexo

  我现在的Hexo版本是v5.0.0， Hexo 官网显示目前最新的正式版本是v5.4.0，现在将其升级到最新本体验。
  在cmd中输入指令升级hexo-cli，安装和升级是同一条指令。

1
npm install -g hexo-cli

  将cmd cd到你的Hexo根目录下（必须到根目录下），输入以下指令升级hexo，安装和升级是同一条指令。

1
npm install hexo

  输入指令查看hexo版本号。

1
hexo -v

hexo_v.png

2 升级Butterfly

2.1 重新生成Hexo博客目录

  由于我们升级了Hexo，中间隔了太多个版本，因此我建议使用新版本重新生成静态博客目录。将旧的静态博客目录做好备份，然后清空静态博客目录，在该目录下执行以下指令安装Hexo。

1
2
hexo init
npm install

  将会自动完成目录和环境搭建。

2.2 安装最新Butterfly主题

  已经半年多没有更新Butterfly了，现在还停留在Butterfly v3.0.0，最新的版本已经到v3.7.1，增加了一些新特性。要查看当前自己的butterfly版本只需在hexo下找到 ./thems/butterfly/package.json 文件，找到文件中的 version 项即可查看当前版本。

butterfly_version.png

  在刚搭建的Hexo根目录执行Git指令安装Butterfly主题。

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

2.3 最新pug和stylus插件

  由于最新版的Butterfly主题依赖于渲染器pug和stylus，因此我们还需要安装着两个插件，在静态博客根目录中输入以下指令即可。

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

2.4 升级建议

  为了将来升级时改动更小，将Butterfly主题根目录下的_config.yml复制到Hexo根目录里，并且重命名为_config.butterfly.yml。
  以后所有的主题配置只在这个文件里修改，解析时会自动合并Butterfly根目录下的_config.yml和_config.butterfly.yml文件里的配置，如果两边对同名配置冲突会按照_config.butterfly.yml文件里的配置，其优先级高于博客根目录下的文件。

3 拷贝配置和文章

  由于我们是新搭建的静态博客目录，因此还需要将之前旧的目录中的配置移植过来。需要注意的是对_config.yml和_config.butterfly.yml文件的配置，对source目录中文章和目录结构的移植，直接拷贝覆盖就行，但要注意如果之前按照旧版的Butterfly配置将其配置文件butterfly.yml放到了 source/_data 目录下，此时请将配置内容移植到_config.butterfly.yml文件中然后删除它。最好借助一些文件比较软件确认每一个差异点。
  由于是重新部署静态博客，因此之前使用的插件也要记得重新安装一下。

4 导航菜单

  v3.7.1的导航菜单语法规则已经不同于v3.0.0，请看以下并模仿规则编辑。

  • Butterfly v3.0.0 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf
  • Butterfly v3.7.1 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    分类: /categories/ || fas fa-box-open
    标签: /tags/ || fas fa-bookmark
    时间轴: /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    音乐: /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  规则差异主要在二级菜单栏的书写。

5 代码高亮

  Butterfly中总共支持6中代码高亮风格，分别是darker, pale night, light, ocean, mac, mac light。在_config.butterfly.yml文件中进行如下配置修改代码风格。

1
highlight_theme: mac light

mac_highlight.png

6 代码限高

  有时候博客中贴出的代码量偏大，占用非常多的行数，Butterfly v3.7.1提供了新的特性，用于实现代码限高，通过点击来展开剩下的代码行。

1
highlight_height_limit: 200 # unit: px

height_limit.gif

7 侧边栏

  Butterfly的侧边栏可以设置在左边或右边，只需修改_config.butterfly.yml中的配置，将 position 设置为 left 。

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right

left.png

8 运行时间

  若要显示网站已经运行的时间，只需在_config.butterfly.yml配置文件中进行如下配置，开启功能并且设置网站发布时间，时间格式为：月/日/年 時間。

1
2
3
runtimeshow:
  enable: true
  publish_date: 7/11/2020 00:00:00

run_time.png

9 最新评论

  开启了评论功能后，可以将最新评论显示在侧边栏中，进行如下配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false
参数 含义
limit 显示数量
storage 暂存时间（单位：分钟）
avatar 显示头像

newest.png

10 mermaid

  mermaid常在markdown中用来绘制流程图、时序图、类别图、状态图、甘特图等，在Hexo Butterfly主题中要使用mermaid需要准守以下语法，注意这不是markdown本身的语法规则。关于 mermaid 的详细语法可以查看官网。

1
2
3
{% mermaid %}
marmaid语法内容
{% endmermaid %}

  当然，要使用mermaid功能还需要在配置文件中配置使能。

1
2
3
4
5
6
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

  以下是使用mermaid的示例代码和效果展示。

1
2
3
4
5
6
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}

## 10 统计
### 10.1 添加百度统计
  在 [百度统计](https://tongji.baidu.com/) 注册账号，获取你的统计百度统计代码填写到配置文件中。

![baidu_tongji.png](https://blogimage-1302867234.cos.ap-chengdu.myqcloud.com/blogimage/docs/工具/Hexo/自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0/baidu_tongji.png "baidu_tongji")

```yml
baidu_analytics: #这里填你的百度统计代碼

11 KaTeX

  为了在博客中更好的显示一些公式效果，可以添加 KaTeX 插件支持进行渲染。在配置文件中开启这项功能。

1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true

  安装一下插件支持。

1
2
npm i hexo-renderer-markdown-it --save
npm install @neilsustc/markdown-it-katex --save

  修改博客根目录的_config.yml文件，添加以下配置。

1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

  以下是使用KaTeX的示例代码和效果展示。

1
$$x+y^{2x}$$

$$x+y^{2x}$$

11 开启页面加载动画

  登录博客网页时，加载需要一段时间，可能会导致首页图片显示效果不完整，这时候可以先显示加载动画等待页面加载完成。

1
2
# Loading Animation (加載動畫)
preloader: true

loading.gif

12 部署

  由于是重新部署的Hexo，因此要使用指令 hexo d 部署需要先安装插件。

1
npm install hexo-deployer-git --save

13 取消目录标题编号

  默认配置会开启目录中的标题编号，可在配置中将其关闭。

1
2
3
4
5
# toc (目錄)
toc:
  enable: true
  number: false
  style_simple: false

8 运行时间

  若要显示网站已经运行的时间，只需在_config.butterfly.yml配置文件中进行如下配置，开启功能并且设置网站发布时间，时间格式为：月/日/年 時間。

1
2
3
runtimeshow:
  enable: true
  publish_date: 7/11/2020 00:00:00

自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0

前言：
  一年多没升级主题了，作者添加了一些新特性，我目前的Butterfly版本是v3.0.0，而最新已经到v3.7.0了。一起来看看有什么新特性吧。

1 升级npm、Node.js、Hexo

  Hexo依赖Nodejs和Git环境，因此建议升级Hexo之前先将这两个也升级到最新版本。由于我的Git已经是最新版本了所以不用升级。如果是Windos平台需要升级Git，在命令上中输入以下指令即可。

1
git update-git-for-windows

  

1.1 升级Node.js和npm

  在命令行中输入以下指令查看自己的Nodejs版本。

1
node -v

  在命令行中输入以下指令查看自己的npm版本。

1
npm -v

  我现在的Nodejs版本是v12.16.1，而 Nodejs 官网显示最新的稳定版已经是v14.16.0了（装稳定版不要忙求最新，免得踩坑。），我现在npm版本是v6.13.4，npm最新版本已经是v6.14.11了。Nodejs中已经集成了npm，因此只需要升级Nodejs即可同步升级npm。
  在Windows平台下直接到Nodejs官网下载最新的稳定版msi文件安装即可，安装之前最好将旧版本卸载。

node_msi.png

  安装很简单，除了可能改下路径，其他按默认下一步就行。安装完成后再次查看版本确认是否更新成功。

1.3 升级Hexo

  我现在的Hexo版本是v5.0.0， Hexo 官网显示目前最新的正式版本是v5.4.0，现在将其升级到最新本体验。
  在cmd中输入指令升级hexo-cli，安装和升级是同一条指令。

1
npm install -g hexo-cli

  将cmd cd到你的Hexo根目录下（必须到根目录下），输入以下指令升级hexo，安装和升级是同一条指令。

1
npm install hexo

  输入指令查看hexo版本号。

1
hexo -v

hexo_v.png

2 升级Butterfly

2.1 重新生成Hexo博客目录

  由于我们升级了Hexo，中间隔了太多个版本，因此我建议使用新版本重新生成静态博客目录。将旧的静态博客目录做好备份，然后清空静态博客目录，在该目录下执行以下指令安装Hexo。

1
2
hexo init
npm install

  将会自动完成目录和环境搭建。

2.2 安装最新Butterfly主题

  已经半年多没有更新Butterfly了，现在还停留在Butterfly v3.0.0，最新的版本已经到v3.7.1，增加了一些新特性。要查看当前自己的butterfly版本只需在hexo下找到 ./thems/butterfly/package.json 文件，找到文件中的 version 项即可查看当前版本。

butterfly_version.png

  在刚搭建的Hexo根目录执行Git指令安装Butterfly主题。

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

2.3 最新pug和stylus插件

  由于最新版的Butterfly主题依赖于渲染器pug和stylus，因此我们还需要安装着两个插件，在静态博客根目录中输入以下指令即可。

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

2.4 升级建议

  为了将来升级时改动更小，将Butterfly主题根目录下的_config.yml复制到Hexo根目录里，并且重命名为_config.butterfly.yml。
  以后所有的主题配置只在这个文件里修改，解析时会自动合并Butterfly根目录下的_config.yml和_config.butterfly.yml文件里的配置，如果两边对同名配置冲突会按照_config.butterfly.yml文件里的配置，其优先级高于博客根目录下的文件。

3 拷贝配置和文章

  由于我们是新搭建的静态博客目录，因此还需要将之前旧的目录中的配置移植过来。需要注意的是对_config.yml和_config.butterfly.yml文件的配置，对source目录中文章和目录结构的移植，直接拷贝覆盖就行，但要注意如果之前按照旧版的Butterfly配置将其配置文件butterfly.yml放到了 source/_data 目录下，此时请将配置内容移植到_config.butterfly.yml文件中然后删除它。最好借助一些文件比较软件确认每一个差异点。
  由于是重新部署静态博客，因此之前使用的插件也要记得重新安装一下。

4 导航菜单

  v3.7.1的导航菜单语法规则已经不同于v3.0.0，请看以下并模仿规则编辑。

  • Butterfly v3.0.0 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf
  • Butterfly v3.7.1 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    分类: /categories/ || fas fa-box-open
    标签: /tags/ || fas fa-bookmark
    时间轴: /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    音乐: /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  规则差异主要在二级菜单栏的书写。

5 代码高亮

  Butterfly中总共支持6中代码高亮风格，分别是darker, pale night, light, ocean, mac, mac light。在_config.butterfly.yml文件中进行如下配置修改代码风格。

1
highlight_theme: mac light

mac_highlight.png

6 代码限高

  有时候博客中贴出的代码量偏大，占用非常多的行数，Butterfly v3.7.1提供了新的特性，用于实现代码限高，通过点击来展开剩下的代码行。

1
highlight_height_limit: 200 # unit: px

height_limit.gif

7 侧边栏

  Butterfly的侧边栏可以设置在左边或右边，只需修改_config.butterfly.yml中的配置，将 position 设置为 left 。

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right

left.png

8 运行时间

  若要显示网站已经运行的时间，只需在_config.butterfly.yml配置文件中进行如下配置，开启功能并且设置网站发布时间，时间格式为：月/日/年 時間。

1
2
3
runtimeshow:
  enable: true
  publish_date: 7/11/2020 00:00:00

run_time.png

9 最新评论

  开启了评论功能后，可以将最新评论显示在侧边栏中，进行如下配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false
参数 含义
limit 显示数量
storage 暂存时间（单位：分钟）
avatar 显示头像

newest.png

10 mermaid

  mermaid常在markdown中用来绘制流程图、时序图、类别图、状态图、甘特图等，在Hexo Butterfly主题中要使用mermaid需要准守以下语法，注意这不是markdown本身的语法规则。关于 mermaid 的详细语法可以查看官网。

1
2
3
{% mermaid %}
marmaid语法内容
{% endmermaid %}

  当然，要使用mermaid功能还需要在配置文件中配置使能。

1
2
3
4
5
6
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

  以下是使用mermaid的示例代码和效果展示。

1
2
3
4
5
6
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}

## 10 统计
### 10.1 添加百度统计
  在 [百度统计](https://tongji.baidu.com/) 注册账号，获取你的统计百度统计代码填写到配置文件中。

![baidu_tongji.png](https://blogimage-1302867234.cos.ap-chengdu.myqcloud.com/blogimage/docs/工具/Hexo/自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0/baidu_tongji.png "baidu_tongji")

```yml
baidu_analytics: #这里填你的百度统计代碼

11 KaTeX

  为了在博客中更好的显示一些公式效果，可以添加 KaTeX 插件支持进行渲染。在配置文件中开启这项功能。

1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true

  安装一下插件支持。

1
2
npm i hexo-renderer-markdown-it --save
npm install @neilsustc/markdown-it-katex --save

  修改博客根目录的_config.yml文件，添加以下配置。

1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

  以下是使用KaTeX的示例代码和效果展示。

1
$$x+y^{2x}$$

$$x+y^{2x}$$

11 开启页面加载动画

  登录博客网页时，加载需要一段时间，可能会导致首页图片显示效果不完整，这时候可以先显示加载动画等待页面加载完成。

1
2
# Loading Animation (加載動畫)
preloader: true

loading.gif

12 部署

  由于是重新部署的Hexo，因此要使用指令 hexo d 部署需要先安装插件。

1
npm install hexo-deployer-git --save

13 取消目录标题编号

  默认配置会开启目录中的标题编号，可在配置中将其关闭。

1
2
3
4
5
# toc (目錄)
toc:
  enable: true
  number: false
  style_simple: false

9 最新评论

  开启了评论功能后，可以将最新评论显示在侧边栏中，进行如下配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false
参数 含义
limit 显示数量
storage 暂存时间（单位：分钟）
avatar 显示头像

自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0

前言：
  一年多没升级主题了，作者添加了一些新特性，我目前的Butterfly版本是v3.0.0，而最新已经到v3.7.0了。一起来看看有什么新特性吧。

1 升级npm、Node.js、Hexo

  Hexo依赖Nodejs和Git环境，因此建议升级Hexo之前先将这两个也升级到最新版本。由于我的Git已经是最新版本了所以不用升级。如果是Windos平台需要升级Git，在命令上中输入以下指令即可。

1
git update-git-for-windows

  

1.1 升级Node.js和npm

  在命令行中输入以下指令查看自己的Nodejs版本。

1
node -v

  在命令行中输入以下指令查看自己的npm版本。

1
npm -v

  我现在的Nodejs版本是v12.16.1，而 Nodejs 官网显示最新的稳定版已经是v14.16.0了（装稳定版不要忙求最新，免得踩坑。），我现在npm版本是v6.13.4，npm最新版本已经是v6.14.11了。Nodejs中已经集成了npm，因此只需要升级Nodejs即可同步升级npm。
  在Windows平台下直接到Nodejs官网下载最新的稳定版msi文件安装即可，安装之前最好将旧版本卸载。

node_msi.png

  安装很简单，除了可能改下路径，其他按默认下一步就行。安装完成后再次查看版本确认是否更新成功。

1.3 升级Hexo

  我现在的Hexo版本是v5.0.0， Hexo 官网显示目前最新的正式版本是v5.4.0，现在将其升级到最新本体验。
  在cmd中输入指令升级hexo-cli，安装和升级是同一条指令。

1
npm install -g hexo-cli

  将cmd cd到你的Hexo根目录下（必须到根目录下），输入以下指令升级hexo，安装和升级是同一条指令。

1
npm install hexo

  输入指令查看hexo版本号。

1
hexo -v

hexo_v.png

2 升级Butterfly

2.1 重新生成Hexo博客目录

  由于我们升级了Hexo，中间隔了太多个版本，因此我建议使用新版本重新生成静态博客目录。将旧的静态博客目录做好备份，然后清空静态博客目录，在该目录下执行以下指令安装Hexo。

1
2
hexo init
npm install

  将会自动完成目录和环境搭建。

2.2 安装最新Butterfly主题

  已经半年多没有更新Butterfly了，现在还停留在Butterfly v3.0.0，最新的版本已经到v3.7.1，增加了一些新特性。要查看当前自己的butterfly版本只需在hexo下找到 ./thems/butterfly/package.json 文件，找到文件中的 version 项即可查看当前版本。

butterfly_version.png

  在刚搭建的Hexo根目录执行Git指令安装Butterfly主题。

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

2.3 最新pug和stylus插件

  由于最新版的Butterfly主题依赖于渲染器pug和stylus，因此我们还需要安装着两个插件，在静态博客根目录中输入以下指令即可。

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

2.4 升级建议

  为了将来升级时改动更小，将Butterfly主题根目录下的_config.yml复制到Hexo根目录里，并且重命名为_config.butterfly.yml。
  以后所有的主题配置只在这个文件里修改，解析时会自动合并Butterfly根目录下的_config.yml和_config.butterfly.yml文件里的配置，如果两边对同名配置冲突会按照_config.butterfly.yml文件里的配置，其优先级高于博客根目录下的文件。

3 拷贝配置和文章

  由于我们是新搭建的静态博客目录，因此还需要将之前旧的目录中的配置移植过来。需要注意的是对_config.yml和_config.butterfly.yml文件的配置，对source目录中文章和目录结构的移植，直接拷贝覆盖就行，但要注意如果之前按照旧版的Butterfly配置将其配置文件butterfly.yml放到了 source/_data 目录下，此时请将配置内容移植到_config.butterfly.yml文件中然后删除它。最好借助一些文件比较软件确认每一个差异点。
  由于是重新部署静态博客，因此之前使用的插件也要记得重新安装一下。

4 导航菜单

  v3.7.1的导航菜单语法规则已经不同于v3.0.0，请看以下并模仿规则编辑。

  • Butterfly v3.0.0 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf
  • Butterfly v3.7.1 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    分类: /categories/ || fas fa-box-open
    标签: /tags/ || fas fa-bookmark
    时间轴: /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    音乐: /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  规则差异主要在二级菜单栏的书写。

5 代码高亮

  Butterfly中总共支持6中代码高亮风格，分别是darker, pale night, light, ocean, mac, mac light。在_config.butterfly.yml文件中进行如下配置修改代码风格。

1
highlight_theme: mac light

mac_highlight.png

6 代码限高

  有时候博客中贴出的代码量偏大，占用非常多的行数，Butterfly v3.7.1提供了新的特性，用于实现代码限高，通过点击来展开剩下的代码行。

1
highlight_height_limit: 200 # unit: px

height_limit.gif

7 侧边栏

  Butterfly的侧边栏可以设置在左边或右边，只需修改_config.butterfly.yml中的配置，将 position 设置为 left 。

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right

left.png

8 运行时间

  若要显示网站已经运行的时间，只需在_config.butterfly.yml配置文件中进行如下配置，开启功能并且设置网站发布时间，时间格式为：月/日/年 時間。

1
2
3
runtimeshow:
  enable: true
  publish_date: 7/11/2020 00:00:00

run_time.png

9 最新评论

  开启了评论功能后，可以将最新评论显示在侧边栏中，进行如下配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false
参数 含义
limit 显示数量
storage 暂存时间（单位：分钟）
avatar 显示头像

newest.png

10 mermaid

  mermaid常在markdown中用来绘制流程图、时序图、类别图、状态图、甘特图等，在Hexo Butterfly主题中要使用mermaid需要准守以下语法，注意这不是markdown本身的语法规则。关于 mermaid 的详细语法可以查看官网。

1
2
3
{% mermaid %}
marmaid语法内容
{% endmermaid %}

  当然，要使用mermaid功能还需要在配置文件中配置使能。

1
2
3
4
5
6
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

  以下是使用mermaid的示例代码和效果展示。

1
2
3
4
5
6
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}

## 10 统计
### 10.1 添加百度统计
  在 [百度统计](https://tongji.baidu.com/) 注册账号，获取你的统计百度统计代码填写到配置文件中。

![baidu_tongji.png](https://blogimage-1302867234.cos.ap-chengdu.myqcloud.com/blogimage/docs/工具/Hexo/自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0/baidu_tongji.png "baidu_tongji")

```yml
baidu_analytics: #这里填你的百度统计代碼

11 KaTeX

  为了在博客中更好的显示一些公式效果，可以添加 KaTeX 插件支持进行渲染。在配置文件中开启这项功能。

1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true

  安装一下插件支持。

1
2
npm i hexo-renderer-markdown-it --save
npm install @neilsustc/markdown-it-katex --save

  修改博客根目录的_config.yml文件，添加以下配置。

1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

  以下是使用KaTeX的示例代码和效果展示。

1
$$x+y^{2x}$$

$$x+y^{2x}$$

11 开启页面加载动画

  登录博客网页时，加载需要一段时间，可能会导致首页图片显示效果不完整，这时候可以先显示加载动画等待页面加载完成。

1
2
# Loading Animation (加載動畫)
preloader: true

loading.gif

12 部署

  由于是重新部署的Hexo，因此要使用指令 hexo d 部署需要先安装插件。

1
npm install hexo-deployer-git --save

13 取消目录标题编号

  默认配置会开启目录中的标题编号，可在配置中将其关闭。

1
2
3
4
5
# toc (目錄)
toc:
  enable: true
  number: false
  style_simple: false

10 mermaid

  mermaid常在markdown中用来绘制流程图、时序图、类别图、状态图、甘特图等，在Hexo Butterfly主题中要使用mermaid需要准守以下语法，注意这不是markdown本身的语法规则。关于 mermaid 的详细语法可以查看官网。

1
2
3
{% mermaid %}
marmaid语法内容
{% endmermaid %}

  当然，要使用mermaid功能还需要在配置文件中配置使能。

1
2
3
4
5
6
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

  以下是使用mermaid的示例代码和效果展示。

1
2
3
4
5
6
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}

## 10 统计
### 10.1 添加百度统计
  在 [百度统计](https://tongji.baidu.com/) 注册账号，获取你的统计百度统计代码填写到配置文件中。


# 
自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0


*前言：*
  *一年多没升级主题了，作者添加了一些新特性，我目前的Butterfly版本是v3.0.0，而最新已经到v3.7.0了。一起来看看有什么新特性吧。*

## 1 升级npm、Node.js、Hexo
  Hexo依赖Nodejs和Git环境，因此建议升级Hexo之前先将这两个也升级到最新版本。由于我的Git已经是最新版本了所以不用升级。如果是Windos平台需要升级Git，在命令上中输入以下指令即可。


1
git update-git-for-windows



  


1.1 升级Node.js和npm
  在命令行中输入以下指令查看自己的Nodejs版本。


1
node -v



  在命令行中输入以下指令查看自己的npm版本。


1
npm -v



  我现在的Nodejs版本是v12.16.1，而 Nodejs 官网显示最新的稳定版已经是v14.16.0了（装稳定版不要忙求最新，免得踩坑。），我现在npm版本是v6.13.4，npm最新版本已经是v6.14.11了。Nodejs中已经集成了npm，因此只需要升级Nodejs即可同步升级npm。
  在Windows平台下直接到Nodejs官网下载最新的稳定版msi文件安装即可，安装之前最好将旧版本卸载。


node_msi.png


  安装很简单，除了可能改下路径，其他按默认下一步就行。安装完成后再次查看版本确认是否更新成功。


1.3 升级Hexo
  我现在的Hexo版本是v5.0.0， Hexo 官网显示目前最新的正式版本是v5.4.0，现在将其升级到最新本体验。
  在cmd中输入指令升级hexo-cli，安装和升级是同一条指令。


1
npm install -g hexo-cli



  将cmd cd到你的Hexo根目录下（必须到根目录下），输入以下指令升级hexo，安装和升级是同一条指令。


1
npm install hexo



  输入指令查看hexo版本号。


1
hexo -v



hexo_v.png


2 升级Butterfly
2.1 重新生成Hexo博客目录
  由于我们升级了Hexo，中间隔了太多个版本，因此我建议使用新版本重新生成静态博客目录。将旧的静态博客目录做好备份，然后清空静态博客目录，在该目录下执行以下指令安装Hexo。


1
2
hexo init
npm install



  将会自动完成目录和环境搭建。


2.2 安装最新Butterfly主题
  已经半年多没有更新Butterfly了，现在还停留在Butterfly v3.0.0，最新的版本已经到v3.7.1，增加了一些新特性。要查看当前自己的butterfly版本只需在hexo下找到 ./thems/butterfly/package.json 文件，找到文件中的 version 项即可查看当前版本。


butterfly_version.png


  在刚搭建的Hexo根目录执行Git指令安装Butterfly主题。


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



2.3 最新pug和stylus插件
  由于最新版的Butterfly主题依赖于渲染器pug和stylus，因此我们还需要安装着两个插件，在静态博客根目录中输入以下指令即可。


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



2.4 升级建议
  为了将来升级时改动更小，将Butterfly主题根目录下的_config.yml复制到Hexo根目录里，并且重命名为_config.butterfly.yml。
  以后所有的主题配置只在这个文件里修改，解析时会自动合并Butterfly根目录下的_config.yml和_config.butterfly.yml文件里的配置，如果两边对同名配置冲突会按照_config.butterfly.yml文件里的配置，其优先级高于博客根目录下的文件。


3 拷贝配置和文章
  由于我们是新搭建的静态博客目录，因此还需要将之前旧的目录中的配置移植过来。需要注意的是对_config.yml和_config.butterfly.yml文件的配置，对source目录中文章和目录结构的移植，直接拷贝覆盖就行，但要注意如果之前按照旧版的Butterfly配置将其配置文件butterfly.yml放到了 source/_data 目录下，此时请将配置内容移植到_config.butterfly.yml文件中然后删除它。最好借助一些文件比较软件确认每一个差异点。
  由于是重新部署静态博客，因此之前使用的插件也要记得重新安装一下。


4 导航菜单
  v3.7.1的导航菜单语法规则已经不同于v3.0.0，请看以下并模仿规则编辑。




    

  • Butterfly v3.0.0 中导航菜单的配置
    • 





1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf





    

  • Butterfly v3.7.1 中导航菜单的配置
    • 





1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    分类: /categories/ || fas fa-box-open
    标签: /tags/ || fas fa-bookmark
    时间轴: /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    音乐: /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf



  规则差异主要在二级菜单栏的书写。


5 代码高亮
  Butterfly中总共支持6中代码高亮风格，分别是darker, pale night, light, ocean, mac, mac light。在_config.butterfly.yml文件中进行如下配置修改代码风格。


1
highlight_theme: mac light



mac_highlight.png


6 代码限高
  有时候博客中贴出的代码量偏大，占用非常多的行数，Butterfly v3.7.1提供了新的特性，用于实现代码限高，通过点击来展开剩下的代码行。


1
highlight_height_limit: 200 # unit: px



height_limit.gif


7 侧边栏
  Butterfly的侧边栏可以设置在左边或右边，只需修改_config.butterfly.yml中的配置，将 position 设置为 left 。


1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right



left.png


8 运行时间
  若要显示网站已经运行的时间，只需在_config.butterfly.yml配置文件中进行如下配置，开启功能并且设置网站发布时间，时间格式为：月/日/年 時間。


1
2
3
runtimeshow:
  enable: true
  publish_date: 7/11/2020 00:00:00



run_time.png


9 最新评论
  开启了评论功能后，可以将最新评论显示在侧边栏中，进行如下配置。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false







参数
含义





limit
显示数量




storage
暂存时间（单位：分钟）




avatar
显示头像





newest.png


10 mermaid
  mermaid常在markdown中用来绘制流程图、时序图、类别图、状态图、甘特图等，在Hexo Butterfly主题中要使用mermaid需要准守以下语法，注意这不是markdown本身的语法规则。关于 mermaid 的详细语法可以查看官网。


1
2
3
{% mermaid %}
marmaid语法内容
{% endmermaid %}



  当然，要使用mermaid功能还需要在配置文件中配置使能。


1
2
3
4
5
6
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default



  以下是使用mermaid的示例代码和效果展示。


1
2
3
4
5
6
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}

## 10 统计
### 10.1 添加百度统计
  在 [百度统计](https://tongji.baidu.com/) 注册账号，获取你的统计百度统计代码填写到配置文件中。

![baidu_tongji.png](https://blogimage-1302867234.cos.ap-chengdu.myqcloud.com/blogimage/docs/工具/Hexo/自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0/baidu_tongji.png "baidu_tongji")

```yml
baidu_analytics: #这里填你的百度统计代碼



11 KaTeX
  为了在博客中更好的显示一些公式效果，可以添加 KaTeX 插件支持进行渲染。在配置文件中开启这项功能。


1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true



  安装一下插件支持。


1
2
npm i hexo-renderer-markdown-it --save
npm install @neilsustc/markdown-it-katex --save



  修改博客根目录的_config.yml文件，添加以下配置。


1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false



  以下是使用KaTeX的示例代码和效果展示。


1
$$x+y^{2x}$$



$$x+y^{2x}$$


11 开启页面加载动画
  登录博客网页时，加载需要一段时间，可能会导致首页图片显示效果不完整，这时候可以先显示加载动画等待页面加载完成。


1
2
# Loading Animation (加載動畫)
preloader: true



loading.gif


12 部署
  由于是重新部署的Hexo，因此要使用指令 hexo d 部署需要先安装插件。


1
npm install hexo-deployer-git --save



13 取消目录标题编号
  默认配置会开启目录中的标题编号，可在配置中将其关闭。


1
2
3
4
5
# toc (目錄)
toc:
  enable: true
  number: false
  style_simple: false




```yml
baidu_analytics: #这里填你的百度统计代碼

11 KaTeX

  为了在博客中更好的显示一些公式效果，可以添加 KaTeX 插件支持进行渲染。在配置文件中开启这项功能。

1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true

  安装一下插件支持。

1
2
npm i hexo-renderer-markdown-it --save
npm install @neilsustc/markdown-it-katex --save

  修改博客根目录的_config.yml文件，添加以下配置。

1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

  以下是使用KaTeX的示例代码和效果展示。

1
$$x+y^{2x}$$

$$x+y^{2x}$$

11 开启页面加载动画

  登录博客网页时，加载需要一段时间，可能会导致首页图片显示效果不完整，这时候可以先显示加载动画等待页面加载完成。

1
2
# Loading Animation (加載動畫)
preloader: true

自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0

前言：
  一年多没升级主题了，作者添加了一些新特性，我目前的Butterfly版本是v3.0.0，而最新已经到v3.7.0了。一起来看看有什么新特性吧。

1 升级npm、Node.js、Hexo

  Hexo依赖Nodejs和Git环境，因此建议升级Hexo之前先将这两个也升级到最新版本。由于我的Git已经是最新版本了所以不用升级。如果是Windos平台需要升级Git，在命令上中输入以下指令即可。

1
git update-git-for-windows

  

1.1 升级Node.js和npm

  在命令行中输入以下指令查看自己的Nodejs版本。

1
node -v

  在命令行中输入以下指令查看自己的npm版本。

1
npm -v

  我现在的Nodejs版本是v12.16.1，而 Nodejs 官网显示最新的稳定版已经是v14.16.0了（装稳定版不要忙求最新，免得踩坑。），我现在npm版本是v6.13.4，npm最新版本已经是v6.14.11了。Nodejs中已经集成了npm，因此只需要升级Nodejs即可同步升级npm。
  在Windows平台下直接到Nodejs官网下载最新的稳定版msi文件安装即可，安装之前最好将旧版本卸载。

node_msi.png

  安装很简单，除了可能改下路径，其他按默认下一步就行。安装完成后再次查看版本确认是否更新成功。

1.3 升级Hexo

  我现在的Hexo版本是v5.0.0， Hexo 官网显示目前最新的正式版本是v5.4.0，现在将其升级到最新本体验。
  在cmd中输入指令升级hexo-cli，安装和升级是同一条指令。

1
npm install -g hexo-cli

  将cmd cd到你的Hexo根目录下（必须到根目录下），输入以下指令升级hexo，安装和升级是同一条指令。

1
npm install hexo

  输入指令查看hexo版本号。

1
hexo -v

hexo_v.png

2 升级Butterfly

2.1 重新生成Hexo博客目录

  由于我们升级了Hexo，中间隔了太多个版本，因此我建议使用新版本重新生成静态博客目录。将旧的静态博客目录做好备份，然后清空静态博客目录，在该目录下执行以下指令安装Hexo。

1
2
hexo init
npm install

  将会自动完成目录和环境搭建。

2.2 安装最新Butterfly主题

  已经半年多没有更新Butterfly了，现在还停留在Butterfly v3.0.0，最新的版本已经到v3.7.1，增加了一些新特性。要查看当前自己的butterfly版本只需在hexo下找到 ./thems/butterfly/package.json 文件，找到文件中的 version 项即可查看当前版本。

butterfly_version.png

  在刚搭建的Hexo根目录执行Git指令安装Butterfly主题。

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

2.3 最新pug和stylus插件

  由于最新版的Butterfly主题依赖于渲染器pug和stylus，因此我们还需要安装着两个插件，在静态博客根目录中输入以下指令即可。

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

2.4 升级建议

  为了将来升级时改动更小，将Butterfly主题根目录下的_config.yml复制到Hexo根目录里，并且重命名为_config.butterfly.yml。
  以后所有的主题配置只在这个文件里修改，解析时会自动合并Butterfly根目录下的_config.yml和_config.butterfly.yml文件里的配置，如果两边对同名配置冲突会按照_config.butterfly.yml文件里的配置，其优先级高于博客根目录下的文件。

3 拷贝配置和文章

  由于我们是新搭建的静态博客目录，因此还需要将之前旧的目录中的配置移植过来。需要注意的是对_config.yml和_config.butterfly.yml文件的配置，对source目录中文章和目录结构的移植，直接拷贝覆盖就行，但要注意如果之前按照旧版的Butterfly配置将其配置文件butterfly.yml放到了 source/_data 目录下，此时请将配置内容移植到_config.butterfly.yml文件中然后删除它。最好借助一些文件比较软件确认每一个差异点。
  由于是重新部署静态博客，因此之前使用的插件也要记得重新安装一下。

4 导航菜单

  v3.7.1的导航菜单语法规则已经不同于v3.0.0，请看以下并模仿规则编辑。

  • Butterfly v3.0.0 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    - 分类 || /categories/ || fas fa-box-open
    - 标签 || /tags/ || fas fa-bookmark
    - 时间轴 || /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    - 音乐 || /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf
  • Butterfly v3.7.1 中导航菜单的配置
1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fab fa-fort-awesome
  文章 || fas fa-book-open:
    分类: /categories/ || fas fa-box-open
    标签: /tags/ || fas fa-bookmark
    时间轴: /archives/ || fas fa-hourglass-half
  娱乐 || fas fa-icons:
    音乐: /music/ || fas fa-headphones
  友链: /link/ || fas fa-user-friends
  打赏: /reward/ || fas fa-gift
  关于: /about/ || fab fa-canadian-maple-leaf

  规则差异主要在二级菜单栏的书写。

5 代码高亮

  Butterfly中总共支持6中代码高亮风格，分别是darker, pale night, light, ocean, mac, mac light。在_config.butterfly.yml文件中进行如下配置修改代码风格。

1
highlight_theme: mac light

mac_highlight.png

6 代码限高

  有时候博客中贴出的代码量偏大，占用非常多的行数，Butterfly v3.7.1提供了新的特性，用于实现代码限高，通过点击来展开剩下的代码行。

1
highlight_height_limit: 200 # unit: px

height_limit.gif

7 侧边栏

  Butterfly的侧边栏可以设置在左边或右边，只需修改_config.butterfly.yml中的配置，将 position 设置为 left 。

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right

left.png

8 运行时间

  若要显示网站已经运行的时间，只需在_config.butterfly.yml配置文件中进行如下配置，开启功能并且设置网站发布时间，时间格式为：月/日/年 時間。

1
2
3
runtimeshow:
  enable: true
  publish_date: 7/11/2020 00:00:00

run_time.png

9 最新评论

  开启了评论功能后，可以将最新评论显示在侧边栏中，进行如下配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false
参数 含义
limit 显示数量
storage 暂存时间（单位：分钟）
avatar 显示头像

newest.png

10 mermaid

  mermaid常在markdown中用来绘制流程图、时序图、类别图、状态图、甘特图等，在Hexo Butterfly主题中要使用mermaid需要准守以下语法，注意这不是markdown本身的语法规则。关于 mermaid 的详细语法可以查看官网。

1
2
3
{% mermaid %}
marmaid语法内容
{% endmermaid %}

  当然，要使用mermaid功能还需要在配置文件中配置使能。

1
2
3
4
5
6
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

  以下是使用mermaid的示例代码和效果展示。

1
2
3
4
5
6
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% mermaid %}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
{% endmermaid %}

## 10 统计
### 10.1 添加百度统计
  在 [百度统计](https://tongji.baidu.com/) 注册账号，获取你的统计百度统计代码填写到配置文件中。

![baidu_tongji.png](https://blogimage-1302867234.cos.ap-chengdu.myqcloud.com/blogimage/docs/工具/Hexo/自娱自乐，我的博客（十二）——Butterfly主题更新至v3.7.0/baidu_tongji.png "baidu_tongji")

```yml
baidu_analytics: #这里填你的百度统计代碼

11 KaTeX

  为了在博客中更好的显示一些公式效果，可以添加 KaTeX 插件支持进行渲染。在配置文件中开启这项功能。

1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true

  安装一下插件支持。

1
2
npm i hexo-renderer-markdown-it --save
npm install @neilsustc/markdown-it-katex --save

  修改博客根目录的_config.yml文件，添加以下配置。

1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

  以下是使用KaTeX的示例代码和效果展示。

1
$$x+y^{2x}$$

$$x+y^{2x}$$

11 开启页面加载动画

  登录博客网页时，加载需要一段时间，可能会导致首页图片显示效果不完整，这时候可以先显示加载动画等待页面加载完成。

1
2
# Loading Animation (加載動畫)
preloader: true

loading.gif

12 部署

  由于是重新部署的Hexo，因此要使用指令 hexo d 部署需要先安装插件。

1
npm install hexo-deployer-git --save

13 取消目录标题编号

  默认配置会开启目录中的标题编号，可在配置中将其关闭。

1
2
3
4
5
# toc (目錄)
toc:
  enable: true
  number: false
  style_simple: false

12 部署

  由于是重新部署的Hexo，因此要使用指令 hexo d 部署需要先安装插件。

1
npm install hexo-deployer-git --save

13 取消目录标题编号

  默认配置会开启目录中的标题编号，可在配置中将其关闭。

1
2
3
4
5
# toc (目錄)
toc:
  enable: true
  number: false
  style_simple: false