hexo教程之编写一个真正的插件

Posted by JunMing on 2019-07-08

上篇文章讲到如何为hexo添加一个插件,主要集中在过程,插件代码毫无用处。今天作为补充,我来示范一下如何编写一个真正的插件。

准备

  • npm
  • hexo
  • hexo init;
  • 本地网站可访问

需求

hexo提供了很多helpers,helpers可以理解为辅助函数。今天我们的插件就是要为hexo新增一个辅助函数。先来看list_archives这个官方函数:


list_archives

插入归档列表。

1
<%- list_archives([options]) %>
参数 描述 默认值
type 类型。此设定可为 yearlymonthly monthly
order 排列顺序。1, asc 升序;-1, desc 降序。 1
show_count 显示每个归档的文章总数 true
format 日期格式 MMMM YYYY
style 归档列表的显示方式。使用 list 以无序列表(unordered list)方式显示。 list
separator 归档间的分隔符号。只有在 style 不是 list 时有用。 ,
class 归档列表的 class 名称。 archive
transform 改变归档名称显示方法的函数

此函数用来按照一定格式列出所有archives。但是你不能控制css classname。虽然函数提供了class选项,但是这只是前缀。transform也只能改变name.

插件

为了实现对archives的自定义,我们需要新增一个函数,命名为:ah_list_archives
这个函数额外提供一个callback参数,让用户自定义archive。对用户来说,最关心的三个信息是:name, url,文章数。callback函数可以定义为

1
function callback(name, url, count){};

将新的函数名注册到hexo helpers

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
hexo.extend.helper.register('ah_list_archives', function(options){

//similar logic as list_archives;
//在输出环节,略微改动
...
if(callback)
{
let name = transform ? transform(item.name) : item.name;
//call callback function to handle name,url,count
result += callback(name,link(item),item.count);
}
else
{
if (i) result += separator;

result += `<a class="${className}-link" href="${link(item)}">`;
result += transform ? transform(item.name) : item.name;

if (showCount) {
result += `<span class="${className}-count">${item.count}</span>`;
}
result += '</a>';
}
...
}

发布到npm

我将此插件命名为,hexo-additional-helper, 后续陆续可能还加入更多功能。发布过程略。
欢迎PR :)

源代码

代码已经开源,github地址

更多文章请关注我的博客





AD