Fluid主题使用Aplayer

直接使用 hexo-tag-aplayer 会导致 Fluid 主题的自定义脚本在生成静态站点时出现错误

然而我并不知道怎么通过修改代码来解决这个问题，所以找到了官方文档进行解决

示例：

说明

按照 Fluid 主题官方文档说明，使用 Hexo 注入器来加载 Aplayer 播放器，详细用法为：

1. 在 Fluid 主题的 script 文件夹中，新建一个 js 脚本或者在原有的脚本中使用 Hexo 注入器，这里使用 default-injects.js 文件来举例：

console.log("注入aplayer");
hexo.extend.injector.register("body_end",`
  <div id="aplayer"></div>
  <link defer rel="stylesheet" href="https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.css" />
  <script src="https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.js"></script>
  <script defer src="/js/aplayer.js"></script>
  `
);

2. 然后在博客的source/js/文件夹中新建一个 js 脚本，在 Web 前端加载 Aplayer，例如新建 source/js/aplayer.js，详细参数参考官网

!(function () {
  console.log("aplayer加载中");
  var oldLoadAp = window.onload;
  window.onload = function () {
    oldLoadAp && oldLoadAp();

    var ele = document.getElementById("aplayer");
    if (ele != undefined || ele != null) {
      new APlayer({
        container: document.getElementById("aplayer"),
        fixed: true,
        autoplay: false,
        loop: "all",
        order: "random",
        theme: "#b7daff",
        preload: "none",
        audio: [
          {
            name: "song1",
            artist: "artist1",
            url: "music.mp3",
            cover: "cover.jpg",
          },
        ],
      });
    }
  };
})();

配置完成后，Aplayer 脚本会在当前网页中寻找 id 为aplayer的布局进行初始化，然后在网页的左下角将出现一个小小的音乐播放器。

这是 Aplayer 最原始的用法，并不支持音乐 API，使用 API 需要注入 Meting，在上面的代码基础上稍作修改：

console.log("注入aplayer");
hexo.extend.injector.register("body_end",`
  <div id="aplayer"></div>
  <link defer rel="stylesheet" href="https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.css" />
  <script src="https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
  <script defer src="/js/aplayer.js"></script>
  `
);

只需要在 APlayer 加载之后加载 Meting 即可，然后在想要插入音乐的文档中加入如下内容即可，详细参数参考官网：

<meting-js
  autoplay="true"
  server="netease"
  type="song"
  id="2059757870">
</meting-js>

由于 Markdown 语法是支持 Markdown+Html 混合解析的，理论上这段代码插入在哪里都可以使用，这篇文章最开始的音乐就是这样插入的。

如上示例的参数，播放器将会和文章内容嵌入在一起，加上fixed="true" 播放器将会自动播放音乐，但可能会被浏览器栏截。