1. 使用 hexo-tag-aplayer 插件

hexo-tag-aplayer 就是将 APlayer 内嵌入博客页面的 Hexo 插件。

安装执行:

1
$ npm install --save hexo-tag-aplayer

原先 hexo-tag-aplayer 不支持 MetingJS,使得需要图片url,音乐url等等参数,操作起来都很麻烦,需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地,要了解具体参数和使用可以查看其中文文档了解。

2. MeingJS 支持 (3.0 新功能)

MetingJS 是基于Meting API 的 APlayer 衍生播放器,引入 MetingJS 后,播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

如果想在本插件中使用 MetingJS,请在 Hexo 配置文件 _config.yml 中设置:

1
2
aplayer:
meting: true

接着就可以 在文章中使用 MetingJS 播放器了,单曲:

1
{% meting "1405349492" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %}

预览:

歌单:

1
{% meting "5068325488" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %}

预览:

相关配置:

列1 列2 列3
选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式:all, one,none
order list 列表播放模式: list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放,移动端浏览器暂时不支持此功能
mutex true 该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式,可选项: none, metadata, auto
theme #ad7a86 播放器风格色彩设置

3. 恢复 post 页面插件功能

我是使用的主题maupassant-hexo都是用的是.pug格式,其他小伙伴根据自己的渲染文件进行修改。

主题配置页面写入:

1
2
3
# 播放器
aplayer:
enable: true

新建文件aplayer.pug放在/layout/_partial文件夹下,写入:

1
2
3
link(rel="stylesheet" type='text/css', href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css")
script(type='text/javascript', src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js")
script(type='text/javascript', src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js")

最后在post.pug中引用即可:

1
2
if theme.aplayer.enable
include _partial/aplayer.pug

这样在文章页面可以使用该插件了。

3.2. 在非 post 页面使用插件功能

我在/source/文件夹下自定义的页面life,我需要该页面使用插件,最简单的方式就是直接在index.md中引用:

1
2
3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

3.3. 与 toc 不兼容

toc 中文点击无法跳转,多方查找原因终于找到了根源,居然是因为aplayer播放器与toc不兼容,要是没有看到别人的文章我感觉一辈子都解决不了这个问题了。

于是把播放器配置设置开关在front-matter中,在需要使用音乐播放器的页面才设为music: true,其它用到目录的页面关闭使用。

3.4. toc 兼容问题解决

找到一位大佬的解决方案,具体见大佬的这篇文章:使用 Aplayer 导致博客目录跳转失效

我使用他提供的 APlayer.min.js 替换了我原来的 js 文件,目前中文目录点击无法跳转的 bug 已经修复解决。

4. 使用音乐平台提供插件

以网易云为例,网页端点击生成外链播放器即可生成外链代码,如我的某个歌单生成外链。

可以在自己博客页面中嵌入插件:

1
2
3
4
5
6
<iframe 
frameborder="no" border="0"
marginwidth="0" marginheight="0"
width=90% height=321px
src="//music.163.com/outchain/player?type=0&id=5068325488&auto=0&height=430">
</iframe>

效果: