butterfly主题的优点包括卡片化设计、支持二级目录、双栏设计、响应式主题、夜间模式、Pjax文章阅读模式、简繁体转换、电脑和手机都可查看TOC目录、内置多种代码配色、代码块显示代码语言/关闭或展开代码块/代码复制/代码自动换行、可关闭文字复制/可开启内容复制增加版权信息、两种搜索（Algolia搜索和本地搜索）、Mathjax和Katex、内置404页面、显示字数统计、显示相关文章、过期文章提醒、多种分享系统、多种评论系统、支持双评论部署、多种在线聊天、多种分析系统、谷歌广告/手动广告位置、各种站长验证、修改网站配色、打字特效activate_power_mode、多种背景特效、多种鼠标点击特效、内置一种Preloader加载动画和pace.js加载动画条、不蒜子访问统计、两种大图模式、Mermaid图表显示、照片墙、图片懒加载、Instantpage/Pangu/Snackbar弹窗/PWA。

安装文档 https://butterfly.js.org/posts/21cfbf15/

Github https://github.com/jerryc127/hexo-theme-butterfly

官方展示 https://butterfly.js.org/

美化教程 https://butterfly.zhheo.com/

img

1. Docker 构建及运行 Hexo 博客框架

构建运行 Hexo 教程 https://www.mqds.cc/posts/d445/

2. 下载主题

1
sudo docker exec -it my_hexo git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

升級方法：在主題目錄下，運行 git pull

3. 应用主题

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

3.1 编辑 Hexo 配置文件 _config.yml

1
sudo docker exec -it my_hexo nano _config.yml

3.2 修改主题为 butterfly

1
theme: butterfly

3.2 使插件生效

添加到 Hexo 配置文件 _config.yml 底部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 站点地图
sitemap:
  path: sitemap.xml
  
# rss
feed:
	enable: true
	type: atom
	path: atom.xml
	limit: 20
  
# 加强网站SEO和防止权重流失 hexo-filter-nofollow
nofollow:
  enable: true
  field: site
  exclude:
    - 'mqds.eu.org'  # 排除网站列表
    - 'mqds.cc'  # 排除网站列表
    
# 永久化 URL 网址链接插件 hexo-abbrlink
abbrlink:
  alg: crc16      # support crc16(default) and crc32
  rep: hex        # support dec(default) and hex

3.3 拷贝主题配置文件至 Hexo 根目录

1
sudo docker exec -it my_hexo cp themes/butterfly/_config.yml _config.butterfly.yml

注意： 以后只需要在 _config.butterfly.yml 进行配置就行。
如果使用了 _config.butterfly.yml，配置主题的 _config.yml 将不会有效果。

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

4. 重启 my_hexo 容器

1
sudo docker restart my_hexo

5. 修改及美化主题

安装文档 https://butterfly.js.org/posts/21cfbf15/

美化教程 https://butterfly.zhheo.com/

6. 插件说明

安装本地搜索插件 hexo-generator-searchdb

hexo-generator-searchdb

1
npm install hexo-generator-searchdb --save

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
# Local search (本地搜索)
local_search:
  enable: true # 是否开启本地搜索
  # 预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件
  preload: true
  # 匹配的文章结果，默认显示最开始的 1段结果
  top_n_per_article: 1
  # 将 html 字符串解码为可读字符串
  unescape: true
  # 搜索文件的 CDN 地址（默认使用的本地链接）
  CDN:

安装文章置顶插件 hexo-generator-index-pin-top

卸载 hexo-generator-index，然后安装 hexo-generator-index-pin-top

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

使用方法：

在需要置顶的文章的 Front-matter 中加上 top: true / 数字即可，数字越大，文章越靠前。

例如

1
2
3
cover: 
top: 1 #这里加一个top就行
date: 2023-07-15 10:32:05

安装站点地图生成插件 hexo-generator-sitemap

1
npm install hexo-generator-sitemap --save

修改配置文件 config.yml，并添加

1
2
3
# 站点地图
sitemap:
  path: sitemap.xml

访问 https://你的域名/sitemap.xml 查看是否生效

安装 RSS 插件 hexo-generator-feed

1
npm install hexo-generator-feed --save

修改配置文件 config.yml，并添加

1
2
3
4
5
6
# rss
feed:
	enable: true
	type: atom
	path: atom.xml
	limit: 20

访问 https://你的域名/atom.xml 查看是否生效

安装本地搜索插件 hexo-generator-search

1
npm install hexo-generator-search --save

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
# Local search
local_search:
  # 是否开启本地搜索
  enable: true
  # 预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件
  preload: true
  # 匹配的文章结果，默认显示最开始的 1段结果
  top_n_per_article: 1
  # 将 html 字符串解码为可读字符串
  unescape: false
  # 搜索文件的 CDN 地址（默认使用的本地链接）
  CDN:

安装字数统计插件 hexo-wordcount

1
npm install hexo-wordcount --save

修改主题配置文件

1
2
3
4
5
6
7
# wordcount (字数统计)
# see https://butterfly.js.org/posts/ceeb73f/#字数统计
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

安装永久化 URL 网址链接插件 hexo-abbrlink

我们可以发现 hexo 默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】
这种链接对搜索爬虫是很不友好的，第一它的 url 结构超过了三层，太深了。
关于此插件的详细信息参见它的官方文档。作用是将文章的链接转换成数字后字母，即将博客网站的网页转成.html 永久链接的格式，有利于搜索引擎的收录。

安装 hexo-abbrlink 插件

1
npm install hexo-abbrlink --save

修改 config.yml 中的 permalink 的值：

1
2
3
4
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://qmike.top
permalink: posts/:abbrlink.html

修改配置文件 config.yml，并添加

1
2
3
4
# 永久化 URL 网址链接插件 hexo-abbrlink
abbrlink:
  alg: crc32      # support crc16(default) and crc32
  rep: hex        # support dec(default) and hex

配置完成后，网站的链接应该类似这样

1
https://qmike.top/posts/77940e6f.html        # 有.html后缀

安装加强网站SEO和防止权重流失插件 hexo-filter-nofollow

1
npm install hexo-filter-nofollow --save

修改配置文件 config.yml，并添加

1
2
3
4
5
6
7
# 加强网站SEO和防止权重流失 hexo-filter-nofollow
nofollow:
  enable: true
  field: site
  exclude:
    - 'mqds.eu.org'  # 排除网站列表
    - 'hotlimy.com'  # 排除网站列表

安装文章加密插件 hexo-blog-encrypt
Github

实现文章输入密码才能浏览

安装插件

1
npm install hexo-blog-encrypt --save

在文章头部添加以下内容

1
2
3
4
password: test
message: 请输入密码查看
wrong_pass_message: 抱歉, 密码不正确
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.