Hexo添加全局吸底Aplayer音乐播放器教程

因为原来直接插入的网易云音乐代码在网页刷新或者进入子网页是会刷新导致播放中断。

而hexo标签外挂可以解决这个问题

这款插件通过 Hexo 独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的 html。如果你只是使用一些简单的功能，其实无需使用到这个插件，只需以 html 格式书写就行，不用插件去转换。

使用插件

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

开始

安装 hexo-tag-aplayer 这款插件。执行如下指令：

1	npm install --save hexo-tag-aplayer

对Hexo 的配置文件进行修改，就是Hexo根目录的_config.yml文件。

1
2
3

aplayer:
  meting: true
  asset_inject: false

在主题的配置文件中

butterfly配置文件中有ctrl+f查找aplayerInject

修改为如下启用aplayerInject


# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

使用

普通界面播放器
以本博客为例，在博客的音乐页面（\source\music\index.md文件）添加如下：

1	{% meting "8492133976" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:400px" "preload:none" "theme:#ad7a86"%}

常用的选项如下所示:

1
2
3

server可选：
netease tencent kugou xiami baidu
netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。

1	type可选：song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）。添加单曲选的歌曲，歌单选择playlist。

id获取: 打开网易云音乐，选择喜欢的歌单，在网页版打开，获取歌单list，填入即可。使用的时候将上边的ID号换为自己喜欢的歌单即可。

例如

1	https://music.163.com/#/playlist?id=8492133976

则歌单的id即为8492133976

注意歌单中不能包括VIP音乐，会无法解析。建议单独建立一个不包含vip歌曲的歌单，后添加的音乐，也会自动同步添加。

lrcType设置为 -1默认显示歌词，放在fixed模式下比较合适。

参数配置举例

1	{% meting %}

我使用网易云音乐

netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。

添加 netease

1	{% meting "8492133976" "netease"%}

使用歌单列表

song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）

playlist

1	{% meting "8492133976" "netease" "playlist"%}

三个必填参数其他参数可选

按照表格添加即可

建立music页面

新建名为music的pages

插入以下内容

1	{% meting "8492133976" "netease" "playlist"%}

效果如下

全局吸底Aplayer模式

也可以直接添加HTMI格式。

1	<div class="aplayer" data-id="8492133976" data-server="netease" data-type="playlist" data-fixed="true" data-theme="#3F51B5"></div>

把 aplayer代码插入到主题配置文件即可。

inject:
  head:
  bottom:
    - <div class="aplayer" data-id="8492133976" data-server="netease" data-type="playlist"  data-fixed="true" data-theme="#3F51B5"></div>

其他参数可以自行根据需要修改。

注意一定要设置 data-fixed="true"开启固定模式

否则将会加载到网页底部

正确的应该是这样的

切换页面音乐不停播

如果你想切换页面时，不让音乐中断。就把主题配置文件的 pjax 设为 true即可。

1
2
3

pjax:
 enable: ture
 exclude:

无需插件方式

即为全局吸底Aplayer模式中使用的html代码

插件的作用只是一个转化的

在butterfly文档中写到：

使用meting2的版本,引入方式改变

使用安知鱼的音乐馆，许引入meting2会有冲突

音乐馆

因为使用了meting2的版本，需要使用下面的方式引用

1 2	- <meting-js id="${id}" server=${server} type="playlist" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list"></meting-js>

安知鱼这里给的是变量${id} 和 ${server}

直接id="8492133976" server="netease"就行

使用变量在config中定义也行

参数使用和之前一样的，只不过去除前缀data-，应该是fixed模式。
之前的引入参数

1	- <div class="aplayer no-destroy" data-id="8492133976" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"></div>

对应的参数

1 2	- <meting-js id="8492133976" server="netease" type="playlist" fixed="true" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list"></meting-js>

更多详细内容欢迎加入群聊讨论

QQ交流群：766354968