Hexo博客使用aplayer音乐播放插件

首先：本文基于CentOS 8.5 64位，其他操作系统请注意修改对应命令关键字，并且本文只介绍Hexo部署的方法和过程，

前情提要

老样子，专为Hexo做的适配版不一定好用，加上年久失修我也没能力自己解决bug，部署的时候有这样那样的问题（问题可太多了），所以还是用原版的来，文档也比较全，适合我这样的菜鸡

aplayer项目地址

aplayer文档地址

效果查看：闪闪の小窝

〇、懒人版

也就是使用cdn，省去独立部署的部分

首先，你要参照二、插件配置完成配置，再进行下面这一步

在主题配置文件（以我的fluid主题举例）自定义添加html的地方添加以下内容（或者你去你hexo的layout里加上），这样可以在所有页面都显示这个底部插件

注意：aplayer是可以单独插入在博客内容里的，比如小黑盒一些新闻页面有的人就会专门放一个当前文章内容里用的bgm等，部署十分灵活，可以自定义

custom_html: '

              <!--aplayer-->
              <link rel="stylesheet" href="https://unpkg.com/browse/aplayer@1.10.1/dist/APlayer.min.css">
              <div id="aplayer"></div>
              <script src="https://unpkg.com/browse/aplayer@1.10.1/dist/APlayer.min.js"></script>
              <script src="https://你的域名/js/useaplayer.js"></script>

'

然后传统艺能

pm2 delete 0
hexo g
pm2 start hexo_run.js

结束

一、独立部署

cd /usr/local/blog/source/js
git clone https://github.com/DIYgod/APlayer.git

写法1

在主题配置文件（以我的fluid主题举例）自定义添加html的地方添加以下内容（或者你去你hexo的layout里加上），这样可以在所有页面都显示这个底部插件

# 自定义底部 HTML 内容（位于 footer 上方），注意不要和 `post: custom` 配置冲突
# Customize the HTML content at the bottom (located above the footer), be careful not to conflict with `post: custom`
custom_html: '

              <!--aplayer-->
              <link rel="stylesheet" href="https://你的域名/js/APlayer/dist/APlayer.min.css">
              <div id="aplayer"></div>
              <script src="https://你的域名/js/APlayer/dist/APlayer.min.js"></script>
              <script src="https://你的域名/js/useaplayer.js"></script>

'

写法有很多，看你的主题是怎么支持的，比如fluid还支持custom_js，比较追求整洁、追求完美分类的可以这样……（就是矫情）

写法2

# 指定自定义 .js 文件路径，支持列表；路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js: 
	- /js/useaplayer.js
	- /js/APlayer/dist/APlayer.min.js

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
	- /js/APlayer/dist/APlayer.min.css

别忘了依然要在custom_html处加上这个标签用于useaplayer.js插入aplayer音乐播放器

custom_html: '
              <!--aplayer-->
              <div id="aplayer"></div>
'

二、插件配置

在你blog文件夹的source文件夹的js文件夹里新建一个useaplayer.js，内容根据官方文档自行配置

以下是我的个人配置，供参考：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    lrcType: 3,
    audio: [
        {
            name: '花の塔',
            artist: 'さユり',
            url: 'http://music.163.com/song/media/outer/url?id=1956534872.mp3',
            cover: 'https://p2.music.126.net/fS_5RbP_4qg-RYreqp2tGg==/109951167558017839.jpg?param=130y130',
            lrc: 'https://moechun.fun/music/lrc/さユり - 花の塔.lrc'
        },
        {
            name: '花の塔',
            artist: 'さユり',
            url: 'http://music.163.com/song/media/outer/url?id=1956534872.mp3',
            cover: 'https://p2.music.126.net/fS_5RbP_4qg-RYreqp2tGg==/109951167558017839.jpg?param=130y130',
            lrc: 'https://moechun.fun/music/lrc/さユり - 花の塔.lrc'
        },
    ]
});

lrc歌词文件我是自己写的，记得用UTF-8的编码格式保存，否则会乱码

获取音乐地址以及封面等自行百度

或者参考我的另外一篇博文

闪闪の小窝 - 使用七牛云存储来给你服务器需要的文件加速

上传自己想要的音乐和歌词文件

然后获取外链写进配置里，加载速度也不会慢

三、PJAX

待补充，fluid主题不支持PJAX（见issue）

需要研究一下如何自己加上