Fluid x APlayer

此篇分享如何在Fluid主题下添加音乐插件。Fluid x APlayer。

学习链接

APlayer中文文档 https://aplayer.js.org/#/zh-Hans/

hexo-tag-aplayer文档 https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

推荐步骤

1. 在hexo博客的文件夹根目录打开git bash，输入如下命令安装插件:

   npm install --save hexo-tag-aplayer
   
   //安装完，将~node_modules\aplayer\dist文件copy至主题的source目录下

2. 在Fluid主题目录中，source目录下新建js文件：

   const ap = new APlayer({
       container: document.getElementById('aplayer'),
   	volume: 0.5,
       fixed: true,
   	autoplay: true, //自动播放
       audio: [
   	{
           name: 'Talking to the Moon',
           artist: 'Bruno Mars',
           url: '',
           cover: '',
       }, 
   	]
   });
   //具体参数学习请看APlayer官方文档（已在学习链接中）
   //简述一下关键：url填音乐的真实外部链接。cover就是封面图片真实链接。

3. 得到指定音乐的url与cover参数。（只以网易云音乐为例

   打开网易云音乐网页版，随便找到一首歌，播放。他的url形如： https://music.163.com/#/song?id=28952146 。然后将前者的id值套用到后者链接中xxxxxx位置 http://music.163.com/song/media/outer/url?id=xxxxxxx.mp3 。通过后者访问到的，重新生成的url就是其真实链接，也就是我们要填的url。对于获取cover，直接在网页版的cover图片上右击检查，鼠标放在cover上即可获得。

4. 主题配置

   在fluid主题配置文件_config.yml文件中搜索：custom_html.在其单引号中加入如下代码：

   <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="/js/你命名的.js"></script>

5. hexo clean — hexo g — hexo d

问题

fluid主题不支持pjax。自行DIY会出现诸多问题。音乐无法在跳转页面后继续播放。建议选择适合的音乐。