安装主题

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

升级：

1
2
cd themes/butterfly
git pull
1
npm i hexo-theme-butterfly

升级：

1
npm update hexo-theme-butterfly

NPM 安装文件在 node_modules 里，不在 themes 目录。

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

适合国内网络慢的情况。

应用主题

修改根目录 _config.yml：

1
theme: butterfly

安装渲染器

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

配置文件分离（重要）

在根目录创建 _config.butterfly.yml，把主题目录的 _config.yml 内容复制进去。

好处：升级主题时不会覆盖你的配置。

固定文章链接（abbrlink）

中文标题会导致 URL 乱码，改标题后链接失效。

1
npm install hexo-abbrlink --save

修改 _config.yml：

1
2
3
4
5
permalink: post/:abbrlink.html

abbrlink:
  alg: crc32   # 算法：crc16 / crc32
  rep: hex     # 进制：dec / hex

效果：链接变成 https://xxx/post/abc123.html，简洁稳定。

代码块配置

深色背景，亮色文字，经典深色风。

柔和深色，护眼底色。

浅色背景，适合亮色主题。

海洋蓝色调。

Mac 风格深色（推荐）。

Mac 风格浅色。

1
2
3
highlight_theme: mac
highlight_copy: true       # 代码复制按钮
highlight_height_limit: 300 # 代码高度限制(px)

顶部图配置

配置项 说明
index_img 主页顶部图
default_top_img 默认顶部图
archive_img 归档页顶部图
tag_img 标签页默认顶部图
category_img 分类页默认顶部图 
1
2
index_img: /img/banner.jpg
default_top_img: /img/default-bg.jpg

单篇文章单独设置（front-matter）：

1
2
3
4
---
title: 文章标题
top_img: /img/post-special.jpg
---

页脚背景

1
footer_bg: true   # 页脚显示图片背景

打字粒子特效

鼠标点击时的粒子爆炸效果：

1
2
3
4
5
activate_power_mode:
  enable: true
  colorful: true    # 彩色粒子
  shake: true       # 抖动效果
  mobile: false     # 手机端关闭

背景特效

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

静态几何线条，点击可切换。

1
2
3
canvas_fluttering_ribbon:
  enable: true
  mobile: true

彩带随风飘动，更生动。

1
2
3
4
5
6
7
canvas_nest:
  enable: false
  onmobile: true
  color: '0,0,255'
  opacity: 0.7
  zIndex: -1
  count: 99

鼠标跟随粒子连线动画。

提示：特效越多加载越慢，手机端建议只开一个或全关。