更新记录

更新记录

2021-06-20

自定义内置标签

自定义内置标签

参考学习文档

内置标签概念

​ 此处的内置标签不同于文章中设定的tags标签概念,其指的是针对文章编写中可引用的标签(用于渲染成不同的代码规则),除却基本的md语法支持,butterfly提供了标签外挂概念,可以通过{% tagname %}content{% endtagname %}的形式构建文档内容、丰富文档形式,butterfly标签外挂相关参考文档:標籤外掛(Tag Plugins)Hexo Built-in Tag Plugins (Hexo內置標籤外掛)

​ 可自行查看源码设计,理清设计和构建思路,将不同主题的一些好用的、好玩的内置标签进行迁移、适配,从而满足个人的语法构建习惯和需求。

内置标签源码分析

构建步骤说明

​ 通过查看自定义标签的标志,主题相关的自带标签脚本都会存放在themes/xxx/script/tag/xxx.js中,以butterfly的label标签为例,其说明参考如下

标签语法

1
2
3
{% label text color %}
text:文本内容
color:颜色指定

展示内容

黄色测试

红色测试

源码跟踪

​ 参考官方说明自定义标签插件,在themes/butterfly/script/tag/label.js中可以看到下述内容,其构建思路可简述为如下:

​ 先定义了一个addLabel函数,函数接收一个参数列表和内容定义,随后在函数中解析参数并将其相应转化为html语法规则

​ 随后通过hexo提供的方法“注册”标签:register(‘标签名称’,’标签函数’,’规则定义’),其中标签名称即在文档中引用标签时用到的,标签函数即通过该标签所触发的函数将标签内容渲染成相应的html、css、js等内容,规则定义指的是针对该标签应用上的一些规则定义(例如此处的{ ends: false }指的是在使用该标签的时候不需要额外指定类似endlabel这种形式结束标签)

1
2
3
4
5
6
7
8
9
10
'use strict'

function addLabel (args, content) {
const text = args[0]
const className = args[1] || 'default'

return `<mark class="hl-label ${className}">${text}</mark> `
}

hexo.extend.tag.register('label', addLabel, { ends: false })

内置标签自定义实现

​ 基于上述说明,则可通过上述步骤构建内置标签,实现自己所需的效果和内容,举一个简单的例子:创建一个标签为showText,通过这个标签定义完成文本信息的输出,其构建内容参考如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 1.在themes/butterfly/script/tag/showText.js

# 2.填充showText内容
'use strict'
// 定义函数
function addText (args, content) {
const text = args[0] || 'non'

console.log("showText Plugin");
return `<h1>${text}</h1>`;

}
// 注册插件
hexo.extend.tag.register('showText', addText, { ends: false })

# 3.引用参考:
{% showText 插件测试 %}
{% showText %}
由此可得到渲染后的文本信息

​ 上述这种方式是基于辅助函数的方式构建插件,如果有其他的插件需求根据则可根据自身喜好进行构建,还可通过npm的方式进行发布、版本管理等