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

hexo pjax“暂时”解决aplayer插件间断播放问题_第1张图片

写在前面

单独拿出来写是因为这点东西让我花了一些时间,毕竟新版的教程真的太少了,官方源码又看不懂,上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。没办法,看不懂源码太难受了┭┮﹏┭┮

你可能感兴趣的:(hexo pjax“暂时”解决aplayer插件间断播放问题)