hexo pjax“暂时”解决aplayer插件间断播放问题

写在前面

单独拿出来写是因为这点东西让我花了一些时间，毕竟新版的教程真的太少了，官方源码又看不懂，上tg问开发者也是听得一脸懵逼，他们会怼你简洁不好吗？非要自己修改主题。其实也是，想要DIY也是要付出一些代价的，比如花时间去学习。

开始

hexo添加aplayer音乐播放插件

1、首先新版主题的aplayer已经不在主题配置文件里出现了，需要到github下载源码解压到themes/next/source文件夹下，或者git clone它，github地址：https://github.com/MoePlayer/APlayer

2、然后新建js文件：hemes\next\source\dist\music.js,这个文件可以自定义播放的音乐，播放器样式等，添加代码如下：

const ap = new APlayer({
  container: document.getElementById('aplayer'),
  fixed: true,
  // mini: true,
  autoplay: true,
  listFolded: true,
  preload: 'auto',
  mutex: true,
  // theme: '#FADFA3', //列表标签颜色,audio有设置theme这个就会失效
  loop: 'all',
  lrcType: 1,
  // volume: 0.7, //默认音量
  audio: [{
      theme: 'pink',
      name: '圈住你',
      artist: '一口甜',
      url: 'https://music.163.com/song/media/outer/url?id=1372552573',
      cover: 'http://p1.music.126.net/Y05iUqwPp1IBwCj291_Ulg==/109951164156398679.jpg?param=130y130',
      lrc: ""
    }, {
      theme: '#46718b',
      name: '追',
      artist: '陈壹千',
      url: 'https://music.163.com/song/media/outer/url?id=1358848433',
      cover: 'http://p2.music.126.net/Ax-zrmAPBrASWxT92t3fdw==/109951164000242827.jpg?param=130y130',
    },
    {
      name: "冬眠",
      artist: '司南',
      url: 'https://music.163.com/song/media/outer/url?id=1398663411',
      cover: 'http://p2.music.126.net/4KDBaQXnQywQovmqvjx-8Q==/109951164444131697.jpg?param=130y130',
      // theme: '#fff' //进度条颜色
    }
  ]
});

具体可以看官方中文文档，写得很详细：https://aplayer.js.org/#/zh-Hans/

3、打开layout文件：themes\next\layout_layout.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>

4、重新生成服务就可以看到播放器了

5、上面歌词文件我选择网上找到歌词文件然后直接写到music.js文件里，因为其他两种方法我不会┭┮﹏┭┮

6、不只是网站添加播放器插件，aplayer支持在文章页面里添加播放外链，使用metingJS语句引入，具体详情参考文档：https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

比如我的文章里插入这样一句：

{% meting "2835166571" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

表示外链来自网易云，从左到右依次是音乐id，音乐平台，查找类型，主题，播放模式，是否冲突播放，播放列表最大长度，预加载，还有其他参数参考具体文档。

使用时需要在站点配置文件开启支持MetingJS：

aplayer:
  meting: true

添加pjax插件不间断播放音乐

1、前面直接添加aplayer导致的问题就是每点击其他链接或其他页面就重新播放了，由于我对源码还有这些种种语法不熟悉（就是小白一个）我还是决定用其他插件来解决，pjax有点像ajax不用刷新页面直接加载数据出来，这样理解应该可以吧

2、在主题配置文件里打开pjax开关，好像也不用安装pjax模块啥的，然后就生效了,只有在最开始进入网站的时候加载，之后都不会重新刷新页面，这样播放器就不会断了

写在最后

其实添加了pjax后还有其他问题，比如MetingJS写在文章里只有最初加载进入网站的时候有显示，之后只要点击到链接MetingJS写的播放器就会消失了，本来打算在菜单多加一个歌单的页面，结果这样一弄歌单页面也做不成，只能先不要了，就是播放器目前没法直接用MetingJS写入文章里，只能放到网站外边了，不知道还有没有其他bug。没办法，看不懂源码太难受了┭┮﹏┭┮