前言

通常我们添加全局吸底播放器（Aplayer + MetingJS）是直接在 _config.butterfly.yml 的 inject.bottom 中插入一段长长的 HTML 代码。虽然方便，但配置文件会变得杂乱，且修改参数时容易出错。

本教程将介绍如何将播放器代码封装为独立的 Pug 组件，并将其集成到主题布局中。

实现步骤

1. 创建播放器组件

在 themes/butterfly/layout/includes/ 目录下创建一个新文件夹 custom（如果已有则跳过），并在其中新建文件 nav_music.pug。

文件路径：themes/butterfly/layout/includes/custom/nav_music.pug

内容如下（使用 Pug 语法，比 HTML 更简洁）：

1
2
3
4
5
6
7
8
9
10
11
12

#nav-music
  meting-js(
    id="2301697552"
    server="netease"
    type="playlist"
    mutex="true"
    preload="none"
    theme="#49b1f5"
    data-lrrc-type="0"
    order="random"
    list-folded="true"
  )

参数说明：

• id: 网易云歌单 ID
• server: 音乐平台 (netease, tencent, kugou 等)
• type: 类型 (playlist, song, album 等)
• mutex: 是否互斥（播放时暂停其他播放器）
• theme: 主题色

2. 引入组件到布局

修改主题的核心布局文件，将我们刚才写的组件引入进来。

文件路径：themes/butterfly/layout/includes/layout.pug

找到文件底部的 include ./additional-js.pug 这一行，在它下面添加：

1
2
3
4
5

include ./additional-js.pug
//- 引入自定义音乐播放器
include ./custom/nav_music.pug

script.

3. 清理配置文件

如果你之前是在 _config.butterfly.yml 中使用 inject 方式引入的，现在可以删除了。

打开 _config.butterfly.yml，找到 inject: bottom: 部分，删除类似下面这行的代码：

1
2
3

bottom:
   # 删除这一行
   - <div id="nav-music"><meting-js id="..." ...></meting-js></div>

4. (可选) 样式调整

如果你有自定义的 CSS 样式（例如控制播放器的显隐或位置），建议放在 source/css/custom-music.css 中，并在 _config.butterfly.yml 的 inject: head: 中引入：

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/css/custom-music.css">

source/css/custom-music.css 示例内容：

1
2
3
4

/* 示例：调整播放器层级或位置 */
#nav-music {
    z-index: 9999;
}

效果

重新生成博客 (hexo g) 并运行，你会发现播放器依然正常工作，但你的配置文件变得更加清爽，且后续修改歌单 ID 只需编辑 nav_music.pug 文件即可。