前面已经大概了解了hexo的插件怎么加载和运行，接下来就来看一下hexo中的标签插件。

不过我后来的文档中是不再用标签插件的，因为不同的静态网站框架不一定支持，使用最原始的md文档，可能为未来平台更换减少适配麻烦。

一、标签插件

1. 概要

标签插件帮助开发者在文章中快速插入内容。hexo支持哪些标签插件？我们可以去看官方文档：标签插件（Tag Plugins） | Hexo，文档为我们提供了默认支持的标签插件的实例和效果。hexo中这些标签插件的实现可以参考：

• hexojs/hexo-tag-embed
• hexo/lib/plugins/tag at master · hexojs/hexo

2. 标签插件的添加与移除

2.1 添加标签插件

2.1.1 register() 函数

参考资料肯定是去官网查看对应的文档啦：标签插件（Tag） | Hexo，主要是要了解下面这个标签函数：

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

标签函数会传入两个参数：args 和 content。 args 包含传入标签插件的参数，content 是标签插件所覆盖的内容。

从 Hexo 3 开始，因为新增了异步渲染功能，而改用 Nunjucks 作为渲染引擎。 其行为可能会与过去使用的 Swig 有些许差异。

2.2.2 一个示例

我们在site根目录创建scripts目录，然后创建tag_test.js，添加以下内容：

hexo.extend.tag.register('tag_test', () => `
<div class="image-comparison-container">
    <p>这是我的测试标签</p>
</div>`);

然后找一个md文档添加以下内容：

{% tag_test %}

然后执行hexo g生成静态资源，最后hexo s启动预览就会发现这个{% tag_test %}被替换成了这是我的测试标签这个字符串。

2.2 移除标签插件

2.2.1 unregister() 函数

使用 unregister() 来用自定义函数替换现有的 标签插件。

hexo.extend.tag.unregister(name);

2.2.2 一个示例

const tagFn = (args, content) => {
  content = "something";
  return content;
};

// https://hexo.io/docs/tag-plugins#YouTube
hexo.extend.tag.unregister("youtube");

hexo.extend.tag.register("youtube", tagFn);

二、register函数的Options

1. ends

使用结束标签。 此选项默认为 false。

• 没有结束标签，就类似于 标签插件（Tag Plugins） | Hexo —— iframe

我们插入 Youtube 影片。

hexo.extend.tag.register("youtube", function (args) {
  var id = args[0];
  return (
    '<div class="video-container"><iframe width="560" height="315" src="http://www.youtube.com/embed/' +
    id +
    '" frameborder="0" allowfullscreen></iframe></div>'
  );
});

这个时候我们在md文档中可以这样写：

{% youtube %}

• 有结束标签，就类似于 标签插件（Tag Plugins） | Hexo —— Pull Quote

插入 pull quote：

hexo.extend.tag.register(
  "pullquote",
  function (args, content) {
    var className = args.join(" ");
    return (
      '<blockquote class="pullquote' +
      className +
      '">' +
      content +
      "</blockquote>"
    );
  },
  { ends: true },
);

这个时候我们在md文档中可以这样写：

{% pullquote [class] %}
content
{% endpullquote %}

2. async

启用异步模式。 此选项默认为 false。异步渲染的一个示例如下，这里我们插入文件。

var fs = require("hexo-fs");
var pathFn = require("path");

hexo.extend.tag.register(
  "include_code",
  function (args) {
    var filename = args[0];
    var path = pathFn.join(hexo.source_dir, filename);

    return fs.readFile(path).then(function (content) {
      return "<pre><code>" + content + "</code></pre>";
    });
  },
  { async: true },
);

三、使用Front-matter 和用户配置

编写标签时可以使用hexo的站点配置，也可以使用主题配置，以及Front-matter等，例如：

hexo.extend.tag.register('foo', function (args) {
  const [firstArg] = args;

  // User config
  const { config } = hexo;
  const editor = config.author + firstArg;

  // Theme config
  const { config: themeCfg } = hexo.theme;
  if (themeCfg.fancybox) // do something...

  // Front-matter
  const { title } = this; // article's (post/page) title

  // Article's content
  const { _content } = this; // original content
  const { content } = this; // HTML-rendered content

  return 'foo';
});

我们也可以将那些封装成函数，我们创建 scripts/lib/foo.js 并添加以下内容：

module.exports = hexo => {
  return function fooFn(args) {
    const [firstArg] = args;

    const { config } = hexo;
    const editor = config.author + firstArg;

    const { config: themeCfg } = hexo.theme;
    if (themeCfg.fancybox) // do something...

    const { title, _content, content } = this;

    return 'foo';
  };
};

再创建scripts/index.js，并添加以下内容：

index.jshexo.extend.tag.register("foo", require("./lib/foo")(hexo));