DIY外挂标签的简单写法与应用

点击查看更新记录

更新记录

2020-12-28:起草教程

添加参考教程内容
添加TODO
添加文档简析和基础示例

2020-12-29:第一版编写完成

添加初级应用
添加具体案例

点击查看参考教程

参考方向	教程原贴
参考了标签基础写法	Hexo开发文档-Tag
参考了内置辅助函数的用法	Hexo开发文档-辅助函数
参考stylus的基本写法	stylus官方文档
Atom的css转stylus插件

简单介绍

Hexo有提供外挂标签的API介绍文档。首先我们要了解什么是外挂标签。它的实质其实就是简化Html的写法，把大片重复的内容交给Hexo编译，我们只需要在外挂标签内提供必要的参数即可。这也是我一度钟爱外挂标签的原因。~~毕竟很方便,可以拿来偷懒嘛。~~本帖提供的是一些较为简单的外挂标签写法。更加精深的内容可以参考官方开发文档和现有的外挂标签脚本。本站现有的外挂标签写法基本都已经集成在这篇教程中：

基于Butterfly的外挂标签引入

/posts/615e2dec/

教程正文

此处声明一下开发原则。外挂标签的编译函数属于Hexo内部函数，所以应该放在scripts文件夹下。千万不要放在source/js/目录下，然后用inject引入的外部函数引用方法。本帖的开发原则是将标签函数脚本放在[Blogroot]themesbutterflyscriptstag目录下。以下如无另外声明，一律都是放在这个目录了。

文档剖析

点击查看文档剖析

首先来看一个最简单的标签函数结构。

代码语言：javascript复制

hexo.extend.tag.register('name', function(args, content){
}, options);

name：表示外挂标签的名字，为字符串，为了避免和之后会提到的参数处理函数名混淆，建议用''包裹。
args：外挂标签传入的参数，可以是一个包含多个参数的字符串，之后再用分割函数处理成数组。
content：外挂标签涵盖的内容。
options：标签函数的参数，有ends和async
- ends:决定是否使用结束标签，此选项默认为false。如果为true，则需要添加形似endname的结束标签。注意，只有ends设为true时，content参数才有效。适用于需要在外挂标签内嵌套外挂标签或者markdown语法的情况。
- async:决定是否开启非同步渲染模式，此选项默认为false。它用于决定是否开启在hexo s预览时对外挂标签进行同步渲染。如设为false则开启同步渲染。所以建议尽量不要去改它。

如果是示例中这样的写法的话，他的外挂标签函数以及对应的外挂标签应该是:

ends为false的情况，此时不存在content参数,所以没必要写了。

ends为true的情况，此时content参数有效。

简单示例

点击查看简单示例

ends为false的情况:

则标签函数写法为

会被编译成

ends为true的情况：

这个函数也可以写成如下形式，这样更符合开发体验：

则标签函数写法为

会被编译成此处的可以是一个字符串，例如。${hexo.render.renderSync({ text: content, engine: 'markdown' })}markdowncontent contentmarkdown Hexo开发文档-辅助函数

初级应用

点击查看初级应用

从上文的介绍来看，想必各位已经了解了基本用法，此处建议开发者采用如下方案进行标签函数的编写。将整个标签函数分为参数处理函数和标签注册函数。

代码语言：javascript复制

//参数处理函数
function poem (args, content) {
  args = args.join(' ').split(',')
  let p0 = args[0]
  let p1 = args[1]?args[1]:''
  return `<div class='poem'><div class='poem-title'>${p0}</div><div class='poem-author'>${p1}</div>${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div>`
}
//标签注册函数
hexo.extend.tag.register('poem',poem,{ ends: true });

args = args.join(' ').split(',')args,

代码语言：javascript复制

//原本
args='a,ab,abc,abcd'
//运行args = args.join(' ').split(',')后
args=[a,ab,abc,abcd]
//此时
args[0]='a'  args[1]='ab' ......
//以此类推，要注意数组是从0开始计数的

这里的是的三元运算符。

具体案例

点击查看具体案例

例如我要将iconfont的symbol引用法做成外挂标签。具体教程内容详见：

Hexo引入阿里矢量图标库

/posts/d2ebecef/

首先我们需要提取三个要素，

其次需要确定我们需要的外挂标签样式。因为只是图标，所以应该不需要content内容了，因此采用ends: false的编写方式。并且要用到两个参数，一个是图标名称，一个是图标大小。

然后就可以根据这些信息编写参数处理函数，此处提供一个小技巧，可以用内联样式来引入一些特定参数，比如此处的图标大小。

然后按照上述写法，可以得到最后的编译结果，假定我设置图标为icon-rat,图标大小为5

hexo vue.js 打包编程算法

0 人点赞