首先我得强调，Hexo 1:0 Jekyll，Github里都有成熟的插件支持方便导入（MoePlayer / hexo-tag-aplayer），而Jekyll还需要再调配wdnmd

其实这件事情说简单也简单，照着一个搭建好的blog直接复制粘贴就可以了，但是说难也难，

因为实在是看不懂代码，以及插入到不同地方会造成什么后果也不清楚emmm

不过幸好成功了。

插入底部音乐播放器

在 .\_includes\footer.html里添加以下代码：

<!--APlayer-->
<script src="https://cdn.jsdelivr.net/npm/vconsole/dist/vconsole.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js server="netease" type="playlist" id="621150623" fixed="true"></meting-js>

位置如图所示：

image-20200403213334517

上述代码中，<meting-js server="netease" type="playlist" id="621150623" fixed="true"></meting-js> 部分的参数server、type、id 可做替换，具体格式见MetingJS文档，或者见下方替换格式：

server: netease    # 音乐平台netease/tencent/kugou/xiami/baidu
type: playlist    # 音乐类型song/playlist/album/search/artist
id: 551354847    # 音乐song/playlist/album id

即可成功显示。

插入博客顶部音乐播放器

在 .\_includes 文件夹内新建一个 aplayer.html 文档，代码如下：

<!-- require APlayer -->
<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>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

<!-- APlayer 加载参数 -->
<meting-js
	server="\{\{ page.apserver \}\}"
	type="\{\{ page.aptype \}\}"
	id="\{\{ page.apsongid \}\}"
	autoplay="true"
	theme="#CC0000"
	list-max-height="340px"
	preload="none">
</meting-js>

其中 autoplay="true / false" 表示打开文章时是否自动播放，theme="#CC0000" 表示播放器的颜色（但其实我感觉没太大区别emmmm），其余参数不懂。

随后在.\_layouts\post.html 里修改添加如下代码：

<!-- APlayer 音乐模块 -->

\{\% if page.apsongid \%\}
   \{\% include aplayer.html \%\}
\{\% endif \%\}

位置如下图所示：

image-20200403214451103

再在每个文章的YAML内添加如下参数即可：

apserver: tencent    # 音乐平台netease/tencent/kugou/xiami/baidu
aptype: song    # 音乐类型song/playlist/album/search/artist
apsongid: 000gT2Ci3CMD3b    # 音乐song/playlist/album id

大功告成！完美！

Reference：

  1. 利用Meting实现网页内插入音乐播放器 评论区内的两位dalao讨论得热火朝天，也刚好让我更清楚如何搭建 @YelonhimX @Duter2016
  2. Fujishiro Otone GitHub Pages 博客 插入音乐播放器 APlayer 经过一番实验，成功在博客底部插入底栏音乐了啊哈哈哈哈哈
  3. Aplayer 感谢@DIYgod dalao
  4. MetingJS 感谢@METO dalao
  5. 为Jekyll博客添加音乐播放器 之前采用这个播放音乐，不过现在还是觉得，有成熟的接口或许更漂亮。