Butterfly音乐播放器的添加

说明：该配置基于 Butterfly 主题版本为 4.2.0，基本参考官方教程，不修改 pug 文件，主题已经集成了相关的设置，该博文对其部分内容进行补充。参考链接在文章末尾给出。

安装和配置

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

npm install --save hexo-tag-aplayer

插件配置方式为修改 Hexo 的配置文件中进行如下修改。就是你的 Hexo 根目录下的_config.yml文件。

aplayer:
  meting: true
  asset_inject: false

开启主题配置文件中的aplayerInject如下所示

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

主题配置文件的就是自己建立的_config.butterfly.yml文件。建议使用 vscode，可以进行全局搜索。更加方便进行修改。
至此就已经可以使用了。下面介绍两种最常用的使用。

常用方式

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

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

常用的选项如下所示:
server可选：netease（网易云音乐），tencent（QQ 音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。建议网易云
type可选：song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）。添加单曲选的歌曲，歌单选择 playlist，可以自行尝试。
id获取示例: 打开网易云音乐，选择喜欢的歌单，在网页版打开，获取歌单 list，填入即可。使用的时候将上边的 ID 号换为自己喜欢的歌单即可。== 注意歌单中不能包括 VIP 音乐，否则无法解析 ==。建议单独建立一个歌单，以后有喜欢的音乐添加进去，网页也会自动同步添加。
lrcType设置为 -1默认显示歌词，放在 fixed 模式下比较合适。

基本上修改的参数以上就已经足够了。ID 获取的方式如下。完整的参数表见附录，也可以去参考链接中查看。

也可以直接添加 HTMI 格式。

<div data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-preload="auto" data-theme="#3F51B5"></div>

需要修改的参数已经给出，可以自行修改。

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

inject:
  head:
  bottom:
    - <div data-id="7422861869" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-lrcType="-1"> </div>

需要修改的参数就只有data-id、data-server、data-type、data-autoplay="true"、data-lrcType="-1"一些常用的参数，可以自行根据需要修改。

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

pjax:
 enable: ture
 exclude:

css 文件的建立参考个人博客搭建与美化中的鼠标样式部分。

/* 隐藏 Aplayer 的全局吸底音乐标签，在css中添加 */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px !important
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
    left: 0 !important
}

普通列表模式

---

对应代码注意这里将 “listmaxheight:100px” 列表高度调整为 100，为了方便展示

{% meting "7422861869" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:100px" "preload:none" "autoplay = false" "theme:#ad7a86"%}

If I Didn’t Have You (Bernadette’s Song - From the Big Bang Theory) [MusiCares® Version]

1. 1 If I Didn’t Have You (Bernadette’s Song - From the Big Bang Theory) [MusiCares® Version] Jim Parsons / Simon Helberg
2. 2 我在人间凑数的日子 王然
3. 3 这城市风总是很大 枯木逢春
4. 4 多想在平庸的生活拥抱你 隔壁老樊
5. 5 有人 赵钶
6. 6 生而为人 尚士达
7. 7 理想 赵雷
8. 8 寻找 小闯
9. 9 写给黄淮 邵帅
10. 10 生活 小皮
11. 11 冯大叔 - 安和桥（小小张 remix） 雨停了
12. 12 孤 孙振宇
13. 13 家在远方 许鹤缤
14. 14 爱与愁 伍思凯
15. 15 晚风 7copy / BT07

单曲播放

---

插入单曲使用如下方式

<div data-id="1441758494" data-server="netease" data-type="song"  data-autoplay="true" data-lrcType="-1"> </div>

迷你模式

---

<div data-id="1441758494" data-server="netease" data-type="song" data-mini="true" data-autoplay="true" data-lrcType="-1"> </div>

参考链接

---

hexo-tag-aplayer 的 GitHub 地址
aplayer 官方说明文档
butterfly 官方教程

Aplayer 完整配置可选参数表

---

下面是官方所示的完整可选配置参数。

Name	Default	Description
container	document.querySelector(‘.aplayer’)	player container
fixed	false	enable fixed mode, see more details
mini	false	enable mini mode, see more details
autoplay	false	audio autoplay
theme	‘#b7daff’	main color
loop	‘all’	player loop play, values: ‘all’, ‘one’, ‘none’
order	‘list’	player play order, values: ‘list’, ‘random’
preload	‘auto’	values: ‘none’, ‘metadata’, ‘auto’
volume	0.7	default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
audio	-	audio info, should be an object or object array
audio.name	-	audio name
audio.artist	-	audio artist
audio.url	-	audio url
audio.cover	-	audio cover
audio.lrc	-	see more details
audio.theme	-	main color when switching to this audio, it has priority over the above theme
audio.type	‘auto’	values: ‘auto’, ‘hls’, ‘normal’ or other custom type, see more details
customAudioType	-	see more details
mutex	true	prevent to play multiple player at the same time, pause other players when this player start play
lrcType	0	see more details
listFolded	false	indicate whether list should folded at first
listMaxHeight	-	list max height
storageName	‘aplayer-setting’	localStorage key that store player setting