Hexo Next主题中添加aplayer播放器

本篇主要解决以下两个问题：

在博客中添加aplayer

解决切换页面时不打断播放

添加Aplayer播放器

下载

在Github上下载Aplayer 。解压后将dist文件复制到~\themes\next\source文件夹下。

新建music.js

在~\themes\next\source\dist\目录下新建一个music.js文件，添加下面的内容：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: false,
    audio: [
      {
        name: "PDD洪荒之力",
        artist: '徐梦圆',
        url: 'http://up.mcyt.net/?down/39868.mp3',
        cover: 'http://oeff2vktt.bkt.clouddn.com/image/84.jpg',
      },
      {
        name: '9420',
        artist: '麦小兜',
        url: 'http://up.mcyt.net/?down/45967.mp3',
        cover: 'http://oeff2vktt.bkt.clouddn.com/image/8.jpg',
      }
    ]
});

代码中对应参数的解释，请查看：Aplayer中文文档

audio对应的是音频文件的信息参数，需要自己配置相关的信息（如歌名，歌手，音频链接，封面等）的配置。

url和cover两个参数也可以是本地文件的相对地址，如：url: '/dist/assets/song1.mp3'
快速生成音乐外链的方法可以参考我的另一篇文章。

另外：由于我没有配置歌词的信息，所以播放器在播放音乐的时候点击歌词是没有显示的

添加脚本信息

新建文件

在站点根目录/source/_data里新建文件head.swig

在里面添加

head.swig

+  <link rel="stylesheet" href="/dist/APlayer.min.css">
+  <div id="aplayer"></div>
+  <script type="text/javascript" src="/dist/APlayer.min.js"></script>
+  <script type="text/javascript" src="/dist/music.js"></script>

保存

去掉注释

打开~/theme/next/_config.yml

定位到custom_file_path然后把#header: source/_data/header.swig前面的#号去掉，保存

完成。

---

解决切换页面播放中断问题

这个问题也困扰了我很久，但其实很容易解决。现在的Next主题里已经集成了pjax插件，利用它就可以解决问题，这个插件主要功能是加速页面的切换速度，建议启用！

安装

在~/themes/next/目录下右键git bash here，输入命令：

git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

下载完成后打开主题目录下的_config.yml文件，定位到pjax处，启用就可以了：

pjax: true