说明

本博文为笔记性质的内容，全部内容来自于网络，有一些是官方描述，也有一些个人博客上的内容，另外我会把自己操作过程中遇到的问题记下来。
如果涉及到版权信息，请联系我删除。

本文汇总了我的博客中用到的（或者曾经用到的）hexo butterfly 主题插件。

NPM 使用

使用以下命令来管理插件：

1
2
3
4
5
6
7
8
9
10
11
# 列出所有插件
npm list

# 安装插件到博客目录
npm install xxxx

# 更新插件
npm update xxxx

# 移除插件
npm remove xxxx

Hexo 相关的插件

  • hexo-server：Hexo 的服务器模块
  • hexo-generator-archive：实现博客 archive 功能
  • hexo-generator-category：实现博客 category 功能
  • hexo-generator-tag：实现博客 tags 功能
  • hexo-renderer-ejs：EJS 的渲染器
  • hexo-renderer-marked：Markdown 的渲染器（渲染引擎 marked）
  • hexo-renderer-pug：PUG 的渲染器
  • hexo-renderer-stylus：支持 Stylus

文章置顶：hexo-generator-index-pin-top

安装 hexo-generator-index-pin-top 工具，删除 hexo-generator-index 工具。

之后，在需要置顶的文章的 metadata 中，增加 top 标记，值为数字，数字越大，越靠前。

在文章的 front_matter 中增加：

1
2
3
---
top: 1
---

轮播置顶：hexo-butterfly-swiper

本来是打算支持置顶功能的，顺便搜索了一下，发现大家都在用置顶轮播的插件，样式也挺好看，而且折叠起来也节省空间。

使用 hexo-butterfly-swiper 插件来实现这个功能。

安装

1
npm install hexo-butterfly-swiper --save

配置

在博客全局 _config.yml 中或者主题的 _config.yml 中添加以下内容（我是在 _config.butterfly.yml 中加入的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-butterfly-swiper  
# see https://akilar.top/posts/8e1264d1/  
swiper:  
  enable: true # 开关  
  priority: 5 #过滤器优先权  
  enable_page: all # 应用页面  
  timemode: date #date/updated  
  layout: # 挂载容器类型  
    type: id  
    name: recent-posts  
    index: 0  
  default_descr: 再怎么看我也不知道怎么描述它的啦！  
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖  
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖  
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁  
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法

需要注意，插件官网（github）上的配置中，js 和 css 的 CDN 已经失效，请使用上边的链接。

然后，在你想要加入置顶的文章的 front_matter 中，加入一个段：

1
2
3
---
swiper_index: 1
---

这个数字是任意正整数，数字越大，越靠前。

配置之后，hexo clean && hexo g 即可。

Hexo 中的博文 URL 链接默认是采用日期和文章题目组成，格式如：:year/:month/:day/:title/。这种格式，当文章的标题或日期发生变化后，原来的 URL 链接就会失效，这对于需要在其他地方保存博文链接来说非常不友好。

Hexo 的 _config.yml 文件中可以配置 permalink 参数来设置永久链接，或者也可以在每篇博文的 Front-matter 中指定 permalink 参数来为这篇博文指定永久链接。
具体可以参考这篇文章：永久链接（Permalinks） | Hexo

目前，我们可以使用 hexo-abbrlink 来为博文生成一个永久链接。

安装

1
npm install hexo-abbrlink --save

配置

在 hexo 全局 _config.yml 文件中

1
2
3
4
5
6
# 可选 permalink: abbrlink 短链接模式  
permalink: :abbrlink/ #文章的永久链接 或者 permalink: posts/:abbrlink.html 如：http://localhost:4000/post/abaf7e89.html  
# abbrlink config  
abbrlink:  
  alg: crc32  #算法: crc16(default) | crc32  
  rep: hex    #进制: dec(default) | hex

之后，需要重新清理工程文件 hexo clean 再生成一次 hexo g，博文链接就会被全部替换为永久链接，默认格式是：/post/xxxxx.html，这个后缀是通过算法计算出来的唯一值。

测试时，可能要清理一下浏览器缓存，让浏览器重新拉取新的链接。

字数统计：hexo-wordcount

该插件可以统计文章字数，并在文章页的标题下边显示文章字数、阅读时间信息。

安装插件 hexo-wordcount 后，在主题配置文件中添加：

1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

Feed 订阅服务：hexo-generator-feed

Feed 是伴随着个人博客的兴起而出现的。Feed 是一种能够将自己博客中的更新内容以一种约定的格式分享到外部，通过 RSS 的方式由其他客户端订阅和展示的技术。简单说 Feed 就是 RSS 的信源。虽然现在这个年代使用 RSS 已经不是主流了，但依然有一小部分网友热衷于逃脱这个个性化订阅的时代，而是把网络信息来源和内容把握在自己的手里。

尽管个人博客没落了，但 Feed 已经被各种内容平台广泛使用和发展，作为信息推送的重要环节。

Hexo 中，可以使用 hexo-generator-feed 来实现对自己的网站生成 Feed 信源。

安装

1
npm install hexo-generator-feed --save

配置

在 hexo 全局 _config.yml 文件中添加：

1
2
3
4
feed:
  type: atom  # atom | rss2
  path: atom.xml
  limit: false

参数说明：

  • type: RSS的类型(atom/rss2)
  • path: 文件路径，默认是 atom.xml/rss2.xml
  • limit: 展示文章的数量,使用 0 或则 false 代表展示全部
  • hub: URL of the PubSubHubbub hubs (如果使用不到可以为空)
  • content: （可选）设置 true 可以在 RSS 文件中包含文章全部内容，默认：false
  • content_limit: （可选）摘要中使用的帖子内容的默认长度。 仅在内容设置为false且未显示自定义帖子描述时才使用。
  • content_limit_delim: （可选）如果content_limit用于缩短post内容，则仅在此分隔符的最后一次出现时进行剪切，然后才达到字符限制。默认不使用。
  • icon: （可选）自定义订阅图标，默认设置为主配置中指定的图标。
  • order_by: 订阅内容的顺序。 (默认: -date)

之后，重新生成一次静态文件：hexo clean && hexo g，在 publish 路径下会出现 atom.xml 就可以了。在页面需要的地方，通过 /atom.xml 来引用这个文件。

一个纯美化的配置，可以在页面页脚处增加自定义的标签，也可增加 “本网站已运行 xxx 时间“ 的计时器。

使用 hexo-butterfly-footer-beautify 插件可以做到。

安装

1
npm install hexo-butterfly-footer-beautify --save

配置

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
44
45
46
# footer_beautify  
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)  
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)  
footer_beautify:  
  enable:  
    timer: true # 计时器开关  
    bdage: true # 徽标开关  
  priority: 5 #过滤器优先权  
  enable_page: all # 应用页面  
  exclude: #屏蔽页面  
    # - /posts/  
    # - /about/  
  layout: # 挂载容器类型  
    type: id  
    name: footer-wrap  
    index: 0  
  # 计时器部分配置项  
  runtime_js: https://npm.elemecdn.com/[email protected]/lib/runtime.js  
  runtime_css: https://npm.elemecdn.com/[email protected]/lib/runtime.css  
  # 徽标部分配置项  
  swiperpara: 3 #若非0，则开启轮播功能，每行徽标个数  
  bdageitem:  
    - link: https://hexo.io/ #徽标指向网站链接  
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API  
      message: 博客框架为Hexo_v5.4.0 #徽标提示语  
    - link: https://butterfly.js.org/  
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender  
      message: 主题版本Butterfly_v3.8.2  
    - link: https://www.jsdelivr.com/  
      shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr  
      message: 本站使用JsDelivr为静态资源提供CDN加速  
    - link: https://vercel.com/  
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel  
      message: 本站采用双线部署，默认线路托管于Vercel  
    - link: https://vercel.com/  
      shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio  
      message: 本站采用双线部署，联通线路托管于Coding  
    - link: https://github.com/  
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub  
      message: 本站项目由Github托管  
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/  
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris  
      message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可  
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css  
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js  
  swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

之后 hexo clean && hexo g 就可以了。

顶部加载条（非插件）

引入 css 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.pace {
	-webkit-pointer-events: none;
	pointer-events: none;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.pace-inactive {
	display: none;
}

.pace .pace-progress {
	background: #06e1bf;
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 100%;
	width: 100%;
	height: 2px;
}

然后在 _config.butterfly.yml 文件中的 preloader 部分注入 css：

1
2
3
4
5
6
7
8
9
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 2
  # pace theme (see https://codebyzach.github.io/pace/)
  # pace_css_url: https://cdn.jsdelivr.net/npm/pace-js@latest/themes/green/pace-theme-minimal.css
  pace_css_url: /css/pace-theme-minimal.css

重新加载 hexo 后生效。

自动化部署：hexo-deploy-git

我之前的博客发布流程离不开几个命令：

1
2
3
4
hexo clean
hexo g
hexo s
hexo d

其中 hexo d 是由插件 hexo-deploy-git 提供的功能，通过手动执行在本地对博客源码进行编译，然后自动把编译后的产物推送到部署服务器。

自动化部署是希望避免在本地手动编译源码，而是通过自动化的流程，和 git 操作绑定，在每一次 git push 之后，平台自动捕获推送动作，并拉取源码做一次构建和部署。

类似的工具有很多，其中我接触到的是 Vercel 平台和 Github 自带的 github action。

站内搜索：hexo-butterfly-algoliasearch

搜索功能依赖于 algolia 平台，需要在平台上先注册账户，获取各种 AppKey。

本地安装 hexo-butterfly-algoliasearch 插件（替代过去的 hexo-butterfly-algolia），在博客配置文件中添加简单的配置，在主题配置文件中开启 search 功能。

这个插件会将文章内容以某种方式整理上传到 algolia 平台，同时提供搜索匹配的功能。

资源压缩：hexo-all-minifier

是站点优化的一种方式，可以将站点的静态资源做压缩后上传，删除对渲染页面没有用的内容，从而提高网站的载入速度。

本地安装 hexo-all-minifier 插件，在博客配置文件中添加配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
all_minifier: true
html_minifier:
  enable: true
  ignore_error: false
  exclude: source/about/index.html
css_minifier:
  enable: true
  exclude:
    - "*.min.css"
js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - "*.min.js"
image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false

哀悼日网页变灰：hexo-filter-mourning

在一些特别的日期，让整个网页变成灰色。

安装插件 hexo-filter-mourning，之后在博客配置文件中配置，可以自定义需要调整的日期：

1
2
3
4
5
6
mourning:
  # It's recommended to disable it when not in use
  enable: true
  # Specify the date(s) to be greyed out. You can set dates in the format yyyy-MM-dd or MM-dd
  day:
    - 05-12 # 汶川大地震遇难同胞悼念日

站点地图：hexo-generator-sitemap & hexo-generator-baidu-sitemap

站点地图是提供给搜索引擎爬取网站信息的指导文件。这个文件在我们的博客通过这两个插件来生成。

提供给 Google 的站点地图，通过 hexo-generator-sitemap 插件生成。提供给 Baidu 的站点地图，通过 hexo-generator-baidu-sitemap 插件生成。生成的文件放在博客资源文件的根路径下。

本文标题图片来源于 Pin page (pinterest.jp)。