作为一个可定制性极强的插件框架,hexo 支持方便地加载各种插件定制博客生成环节的每一步。也正因为此,围绕 hexo 诞生了一个活跃的插件开发社区.

我用 hexo 建博客这么久了,也出于需要寻找过插件, 还安装了不少。有些插件虽然功能优秀但是很久没更新了。因为实在是特别想要, 自己被迫肩负起维护的重任。还有想要的功能找不到合适的插件, 只能自己从头写起。于是就花了不少时间研究了一下 hexo 的插件系统. 为了让以后的自己不用费时费力从头学起,也希望能帮助到更多的朋友, 所以就把一些研究的重点写下来。顺便再附带上几款知名插件的配置和用法.

Markdown 插件系统简介

Hexo 的插件系统说简单也很简单。一种是简单的脚本, 另一种对应更复杂的正规插件.

脚本

把所有 JS 脚本放到项目根目录的 scripts 下, hexo 就会在 初始化 的时候加载它们.

插件

为了更好的利用 npm 的分发系统,Hexo 搜寻根目录的 package.json, 将所有以 "hexo-" 开头的依赖视为插件。然后从根目录的 node_modules 下加载.

就和其它 npm 包一样, 每个插件目录里须要有一个 package.json 描述包的元信息.

例如下面这个插件:

├── index.js
└── package.json

它的 package.json 应该为:

{
"name": "hexo-my-plugin",
"version": "0.0.1",
"main": "index"
}

各个属性的含义可以顾名思义.

几个重要插件的使用与配置

Hexo-tag-player

Hexo-tag-player 是一个 hexo 插件, 扩展了 hexo 的标记语法以便支持嵌入音乐.

基本用法

{% aplayer 标题 作者 音乐文件定位器 [专辑图片定位器 narrow autoplay width:播放器宽度百分比 lrc:歌词文件定位器] %}

注意一个属性的值内部要是有空格就要使用 "" 括起值来.

示例:

{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" narrow autoplay "lrc:caffeine.txt" %}

内嵌歌词

{% aplayerlrc "标题" "作者" "音乐文件定位器" "autoplay" %}
[00:00.00] 歌词内容
{% endaplayerlrc %}

播放列表

{% aplayerlist %}
{
"narrow": false, // Optional, narrow style
"autoplay": true, // Optional, autoplay song(s), not supported by mobile browsers
"mode": "random", // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
"showlrc": 3, // Optional, show lrc, can be 1, 2, 3
"mutex": true, // Optional, pause other players when this player playing
"theme": "#e6d0b2", // Optional, theme color, default: #b7daff
"preload": "metadata", // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
"listmaxheight": "513px", // Optional, max height of play list
"music": [
{
"title": "CoCo",
"author": "Jeff Williams",
"url": "caffeine.mp3",
"pic": "caffeine.jpeg",
"lrc": "caffeine.txt"
},
{
"title": "アイロニ",
"author": "鹿乃",
"url": "irony.mp3",
"pic": "irony.jpg"
}
]
}
{% endaplayerlist %}

MeingJS

MetingJS 是基于 Meting API 的 APlayer 衍生播放器,引入 MetingJS 后,播放器将支持对于 QQ 音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

示例:
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}
{% meting "5228962805" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

选项
选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式:all, one,none
order list 列表播放模式: list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放,移动端浏览器暂时不支持此功能
mutex true 该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式,可选项: none, metadata, auto
theme #ad7a86 播放器风格色彩设置

PJAX 兼容

若在 Hexo 中使用了 PJAX,可能需要自己手动清理 APlayer 全局实例:

$(document).on('pjax:start', function () {
if (window.aplayers) {
for (let i = 0; i < window.aplayers.length; i++) {
window.aplayers[i].destroy();
}
window.aplayers = [];
}
});

hexo-geneator-index

设置

Hexo _config.yml 设置了首页排序以及每页文章数量等选项

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

path:文章起始页面路径 per_page:每页显示文章数量 order_by:排序(默认按日期降序) 在文章的 Front Matter 中添加参数 sticky 即可实现首页置顶,数字越大排序越高(升序排序)

hexo-abbrlink 是一个根据文章标题, 文章内容生成唯一 ID 永久链接的插件.

这个插件给 hexo 的 permalink 选项添加了新的关键字:abbrlink. 通过替换这个关键字来达到参与生成永久链接的目的.

它的配置有:

# abbrlink config
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: hex #support dec(default) and hex
drafts: false #(true)Process draft,(false)Do not process draft. false(default)
# Generate categories from directory-tree
# depth: the max_depth of directory-tree you want to generate, should > 0
auto_category:
enable: true #true(default)
depth: #3(default)
over_write: false
auto_title: false #enable auto title, it can auto fill the title by path
auto_date: false #enable auto date, it can auto fill the date by time today
force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink. This only updates abbrlink rather than other front variables.

Hexo-Next-Coauthor

hexo-next-coauthor 能够文章添加上共同作者.

安装后,在 front-matter 中加入 coauthor 字段,如

coauthor: Mr.J

共同作者可以添加多个:

coauthor:
- Mr.J
- Jone

或者提供更多有关共同作者的信息:

# Add some descriptions to your co-authors
coauthors:
[Mr.J]:
# It will display nick
nick: Jackson
# When your co-authors is click, will jump to there
link: https://www.dnocm.com
# It defines the order of precedence in post meta
#post_meta_order: 0

可以在 source/_data/languages.yml 中加入国际化内容

default:
coauthor: 共同作者
en:
coauthor: Coauthor
zh-CN:
coauthor: 共同作者
zh-TW:
coauthor: 共同作者
jp:
coauthor: 共闘作者

引用

hexo 官方文档