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

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

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

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

进入 my_hexo 容器内部

1
sudo docker exec -it my_hexo bash

下载主题

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

安装必要插件

的渲染器插件 hexo-renderer-pug hexo-renderer-stylus
字数统计插件 hexo-wordcount
本地搜索插件 hexo-generator-searchdb
文章置顶插件 hexo-generator-index-pin-top
站点地图插件 hexo-generator-sitemap
RSS 插件 hexo-generator-feed
永久化 URL 网址链接插件 hexo-abbrlink
加强网站SEO和防止权重流失 hexo-filter-nofollow

1
npm install hexo-renderer-pug hexo-renderer-stylus hexo-wordcount hexo-generator-searchdb hexo-generator-index-pin-top hexo-generator-sitemap hexo-generator-feed  hexo-filter-nofollow hexo-blog-encrypt --save

因为有时候在捣鼓hexo的时候会安装一些想要的《hexo插件》，但是有时候安装的插件会和自己所用的hexo起冲突。

然后自己在执行hexo命令的时候，会出现一堆报错信息。

所以有时候需要删除一些自己安装的hexo插件，首先执行命令：

1
npm list

随后执行

1
npm uninstall "你插件的名字"

删除相关配置和文件

配置文件中有PLugins模块，删除对应的插件设置；

删除 node_modules/ 目录下对应的插件文件。

应用主题

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

编辑 Hexo 配置文件 _config.yml

1
nano _config.yml

修改主题为 butterfly

1
theme: butterfly

image-20230804121506152

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

1
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 的配置，其优先度较高。

重启 my_hexo 容器

1
sudo docker-compose restart

添加 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'  # 排除网站列表
    - 'hotlimy.com'  # 排除网站列表
  
# 永久化 URL 网址链接插件 hexo-abbrlink
abbrlink:
  alg: crc16      # support crc16(default) and crc32
  rep: hex        # support dec(default) and hex

插件说明

安装本地搜索插件 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: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

修改公告

修改 _config.butterfly.yml

1
2
3
4
aside:
  card_announcement:
    enable: true
    content: <center><b>--- 竹山一叶 ---<br><a href="https://zsyyblog.com" title="这里可以显示超链接" class="anno_content"><font color="#5ea6e5">还可以控制链接的颜色</font></a><br><a href="https://zsyyblog.com/xxx.zip" title="点这里可以下载网站的资源" class="anno_content"><font color="#5ea6e5">点此下载</font></a></b></center>
1
<center><b>如果遇到内容似乎没有更新<br>你可以尝试 <font color="fd5f00">刷新浏览器缓存</font> 再进行浏览<br>Windows/Linux：请按下 <font color="fd5f00">Ctrl + F5 </font>或 <font color="fd5f00">Ctrl + Shift + R</font><br>Mac：请按下 <font color="fd5f00">Cmd + Shift + R</font></b></center>