hexo-butterfly-自定义内置标签
自定义内置标签
参考学习文档
内置标签概念
此处的内置标签不同于文章中设定的tags标签概念，其指的是针对文章编写中可引用的标签（用于渲染成不同的代码规则），除却基本的md语法支持，butterfly提供了标签外挂概念，可以通过{% tagname %}content{% endtagname %}的形式构建文档内容、丰富文档形式，butterfly标签外挂相关参考文档：標籤外掛(Tag Plugins)、Hexo Built-in Tag Plugins (Hexo內置標籤外掛)
可自行查看源码设计，理清设计和构建思路，将不同主题的一些好用的、好玩的内置标签进行迁移、适配，从而满足个人的语法构建习惯和需求。
内置标签源码分析
构建步骤说明
通过查看自定义标签的标志，主题相关的自带标签脚本都会存放在themes/xxx/script/tag/xxx.js中，以butterfly的label标签为例，其说明参考如下
- label标签规则
- label标签实现
标签语法
{% 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 %}
由此可得到渲染后的文本信息 上述这种方式是基于辅助函数的方式构建插件，如果有其他的插件需求根据则可根据自身喜好进行构建，还可通过npm的方式进行发布、版本管理等