为hexo博客添加全局aplayer播放器

前一阵子在博客搞了个，歌单状态下不显示歌名，最重要的是当切换页面的时候音乐会重新播放~~忍不了了~~，今天终于搞明白了aplayer这个好东西，不仅可以配合meting使用网络歌单，还可以配合pjax实现全站的跨页面不刷新播放。

此篇博客参考了这位大佬的好多思路，附链接

Aplayer和Meting的配置

Aplayer是一个开源的，网页端的播放器，这是它的使用文档，这个播放器可以支持播放本地自定义的音频、歌词、专辑封面等等，但是由于我是想直接使用网络端的歌单，所以直接跳过了这一步，本地使用方法可以直接参考使用文档，写的很详细。
接下来的重头戏是直接使用meting实现网络歌单，我是想在所有页面的固定位置显示这个播放模块，正好aplayer自带的吸底模式(翻译为fixed，有点难理解)符合我的要求，它会始终出现在网页的左下角，配合pjax实现不刷新内容，简直不要太爽。
我使用的是hexo+next的博客，我想在所有页面都实现这个效果，所以我需要找到主题的页面布局文件，\themes\next\layout\ _layoout.swig
首先在body中添加依赖：

1
2
3

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css"><!--APlayer的样式-->
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script><!--APlayer的依赖-->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script><!--Meting的依赖-->

这里我们指定了版本，因为meting的新版本和aplayer有奇怪的兼容性问题…
然后就是使用metingjs了，首先附一个官方的使用文档，使用方法也非常的简单，直接看代码吧：

<meting-js
	server="netease"//歌单的服务商，比如netease代表网易云，tencent代表qq音乐等等
	type="playlist"//类型，单曲或歌单
  autoplay=true //打开网页自动播放
  fixed=true //使用吸底模式
	id="5286851482"> //歌单的id，在网页端可以直接查看
</meting-js>

保存，重启服务之后发现已经出现了吸底的浮窗

pjax的配置

配置完aplayer，接下来就是配置跨页面不刷新了。由于我使用的是next主题，其实next主题已经想到了可能是用的pjax，所以我们只需要安装依赖，并且在config中启用即可。
首先安装依赖

1 2	cd themes/next git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

然后我们只需要在next的_config.yml中找到pjax选项，将false改为true即可
enjoy it~