Hexo脚本

事情的起因是这样的，我博客里用的音乐插件hexo-tag-aplayer太久没更新了，已经不能支持新版的MetingJS，我便决定自己尝试解决一下。

对于js那一套东西，我实在是不懂，所以开发一个插件就算了，打算写一个简单一点的脚本就好。所有hexo插件实现的功能，都可以用脚本实现，功能太复杂了，而且想要把这个东西共享给别人，就会打包成插件去发布。

关于Hexo脚本和插件的介绍，可以看官方文档。

脚本开发我也是个半吊子，只会写一些简单的脚本。

我写的Aplayer脚本的开源地址：hexo-tag-aplayer-scripts。

目的

简单介绍一下怎么写脚本，就拿上面这个脚本为例。我的目的是，在文章中插入标签：

1
{% meting "60198" "netease" "playlist" %}

在网页中要自动生成代码：

1
2
3
4
5
6
7
8
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js
    server="netease"
    type="playlist"
    id="60198">
</meting-js>

基础版

看过文档以后，大致知道怎么写了，首先是需要一个标签：

1
2
3
hexo.extend.tag.register('meting', function (args) {
    return "返回需要插入网页的内容";
});

这样，在文章中写标签就不会报错了。接下来就是需要处理里面的内容了，因为对js和hexo不是很熟，就先从最简单的开始，跑通了以后再优化。注意一点，参数args是一个数组，传入的每一个参数都说数组里面的一个元素，比如

1
{% meting "60198" "netease" "playlist" %}

取参数的时候分别是args[0]、args[1]、args[2]。

1
2
3
4
5
6
7
8
9
10
11
hexo.extend.tag.register('meting', function (args) {
    return `
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
        <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
        <meting-js
	        server="${args[1]}"
	        type="${args[2]}"
	        id="${args[0]}">
        </meting-js>`;
});

这样，一个最简单脚本就写出来了，可以接收三个参数，自动插入meting标签。

稍进阶

上面的脚本是能跑了，但是十分简陋，支持程度也不高，要进一步加强。首先是要对脚本能配置，查api以后可以知道，获取配置需要用到hexo.config，所以：

1
const config = hexo.config.aplayer;

这样就可以获取到_config.yml中aplayer项的配置了。除了这三个标签，其他标签怎么搞？还需要一个通用的解析方法：

1
2
3
4
5
6
7
8
9
10
11
12
function GetOptions(args) {
  var options = new Array;
  args.forEach((option) => {
    var d = option.indexOf(":");
    if (d != -1) {
      var key = option.substring(0, d);
      var value = option.substring(d + 1, option.length);
      options[key] = value;
    }
  });
  return options;
}

这个方法可以将key:value解析成一个字典（我不知道js里怎么称呼，我就用C#里的称呼，称他为字典吧）。后面这一步跨步有点大，而且我写的代码又不规范，将就着看一下吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
hexo.extend.tag.register('meting', function (args) {
  try {
    var tag = CreatMetingTag(args);
    return tag;
  } catch (e) {
    console.error(e)
    return `
		<script>
			console.error("${e}");
		</script>`
  }
});

function CreatMetingTag(args) {
  var jsCdn = config.cdn != null && config.cdn.length > 0 ? config.cdn : "https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js";
  var cssCdn = config.style_cdn != null && config.style_cdn.length > 0 ? config.style_cdn : "https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css";
  var metingCdn = config.meting_cdn != null && config.meting_cdn.length > 0 ? config.meting_cdn : "https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js";
  var text = `<link rel="stylesheet" href="${cssCdn}"><script src="${jsCdn}"></script><script src="${metingCdn}"></script>`;
  text = (config.meting_api != null && config.meting_api.length > 0 ? `<script>var meting_api='${config.meting_api}?server=:server&type=:type&id=:id&auth=:auth&r=:r';</script>` : "") + text;
  var op = GetOptions(args);
  if (!("auto" in op) && !("id" in op)) {
    op["id"] = args[0];
    op["server"] = args[1];
    op["type"] = args[2];
  }
  var metingOptions = "";
  for (var key in op) {
    metingOptions += `${key}="${op[key]}"`;
  }
  text += `<meting-js ${metingOptions}></meting-js>`;
  return text;
}

function GetOptions(args) {
  var options = new Array;
  args.forEach((option) => {
    var d = option.indexOf(":");
    if (d != -1) {
      var key = option.substring(0, d);
      var value = option.substring(d + 1, option.length);
      options[key] = value;
    }
  });
  return options;
}

后续更新

先起一个头，更新的话后面慢慢再来了，现在我自己用是足够了。

最近半个月估计没啥时间了，后面有个开箱视频要做，还有一个NAS的教程和视频需要做。

赏

请作者吃辣条

支付宝
微信

tag:

叉叉白 一个小白搞机的记事本