hexo-tag-aplayer插件的安装和配置

安装插件

执行命令

1
npm install --save hexo-tag-aplayer

配置插件

在 Hexo 的配置文件_config.yml中添加如下内容

1
2
3
aplayer:
  meting: true
  asset_inject: false

将主题的配置文件_config.butterfly.yml进行如下修改，开启主题的 aplayerInject

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

添加音乐页面

效果

执行命令

1
hexo new page music

运行后会在[blogroot]\source\下生成music文件夹，打开music文件夹下的index.md文件，按照如下格式修改内容

1
2
3
4
5
6
7
---
title: 音乐
date: 2025-11-30 10:52:20
aside: false
aplayer: true
---
{% meting "7419903487" "netease" "playlist" "autoplay" "mutex:true" "listmaxheight:1000px" "preload:auto" "theme:#ad7a86"%}

有关 {% meting %} 的参数解释，见如下列表

选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease(网易云音乐), tencent(QQ音乐), 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 播放器风格色彩设置

不要包含VIP音乐，VIP音乐不能被正常播放

建议使用网易云音乐

查询自己歌单的id号

打开网页版网易云后，打开自己要使用的歌单

通过歌单的链接：https://music.163.com/#/my/m/music/playlist?id=7419903487，就能知道歌单的id号了

将页面添加到导航栏

修改主题的配置文件_config.butterfly.yml中的 menu，在menu中添加音乐: /music/ || fas fa-music

1
2
3
4
5
6
menu:
  # 首页: / || fas fa-home
  # 列表||fas fa-list:
  #   音乐: /music/ || fas fa-music
  #   电影: /movies/ || fas fa-video
  音乐: /music/ || fas fa-music

添加全局吸底Aplayer播放器

效果

如果不排除刚刚添加的音乐页面上添加Aplayer播放器，直接跳转到添加真·全局吸底Aplayer播放器

为了不在刚刚添加的音乐页面上添加Aplayer播放器，在[blogroot]\themes\butterfly\scripts\下新建文件aplayer.js并粘贴如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* themes/butterfly/scripts/aplayer.js */
hexo.extend.filter.register('after_render:html', function (html, data) {
    const urlObj = new URL(data.url);          // 把绝对 URL 转成 URL 对象
    const path = urlObj.pathname;            // 去除域名，提取路径部分
    if (path.startsWith('/music/')) return html;

    const aplayer = `
    <div class="aplayer no-destroy"
         data-id="7419903487"
         data-server="netease"
         data-type="playlist"
         data-fixed="true"
         data-mini="true"
         data-autoplay="true">
    </div>
  `;
    return html.replace('</body>', aplayer + '</body>');
});

根据自己的需求修改相应内容

参数解释，见如下列表

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

data-fixed 和 data-mini 也必须配置，配置为 true

如果使用 Pjax，则在 class 里需添加 no-destroy，这样防止切换页面时 Aplayer 被销毁

PJAX 是一种网页技术，用于实现“局部页面刷新”，可以让网站在用户点击链接时只加载页面改变的部分，而不是整个网页重新加载，从而提高网页访问速度和用户体验

为了在切换页面时，音乐不会中断，把主题配置文件_config.butterfly.yml中的 pjax修改为true

并且排除在刚刚添加的音乐页面不使用pjax

1
2
3
4
5
6
7
8
# https://github.com/MoOx/pjax
pjax:
  # 是否启用 pjax
  enable: true
  # 排除指定页面不使用 pjax，如 '/music/'
  exclude:
    # - /xxxxxx/
    - /music/

这样就添加好了

添加真·全局吸底Aplayer播放器

把aplayer代码插入到主题配置文件_config.butterfly.yml的inject.bottom中

1
2
3
4
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="7419903487" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-autoplay="true"> </div>

根据自己的需求修改相应内容

参数解释，见如下列表

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

data-fixed 和 data-mini 也必须配置，配置为 true

如果使用 Pjax，则在 class 里需添加 no-destroy，这样防止切换页面时 Aplayer 被销毁

PJAX 是一种网页技术，用于实现“局部页面刷新”，可以让网站在用户点击链接时只加载页面改变的部分，而不是整个网页重新加载，从而提高网页访问速度和用户体验

为了在切换页面时，音乐不会中断，把主题配置文件_config.butterfly.yml中的 pjax修改为true

1
2
3
4
5
6
7
# https://github.com/MoOx/pjax
pjax:
  # 是否启用 pjax
  enable: true
  # 排除指定页面不使用 pjax，如 '/music/'
  exclude:
    # - /xxxxxx/

这样就添加好了

More info

hexo-tag-aplayer
MoePlayer