hexo-butterfly-自定义内置标签

更新记录

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这种形式结束标签）

'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.在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 %}
由此可得到渲染后的文本信息