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的方式进行发布、版本管理等