519 words
3 minutes
Fluid主题使用Aplayer
直接使用 hexo-tag-aplayer 会导致 Fluid 主题的自定义脚本在生成静态站点时出现错误
然而我并不知道怎么通过修改代码来解决这个问题，所以找到了官方文档进行解决
示例：
说明
按照 Fluid 主题官方文档说明，使用 Hexo 注入器来加载 Aplayer 播放器，详细用法为：
- 在 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> `);- 然后在博客的
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" 播放器将会自动播放音乐，但可能会被浏览器栏截。
Fluid主题使用Aplayer
https://blog.doracoin.cc/posts/2023/2023-09-13-fluid主题使用aplayer/