Hexo-Butterfly音乐播放器的添加

说明：该配置基于Butterfly主题版本为 4.2.0，基本参考官方教程，不修改pug文件，主题已经集成了相关的设置，该博文对其部分内容进行补充。参考链接在文章末尾给出。
我的个人博客主页：GuoDong の Blog ，镜像 Gitee 。CSDN在渲染可能与个人博客渲染不同，欢迎点击我的主页。博客会在两个平台同步更新。欢迎点击我的主页。

文章目录 插件的安装与配置普通界面播放器全局吸底Aplayer模式演示1，普通列表模式2，单曲播放3，迷你模式 附录参考链接Aplayer完整配置可选参数表

插件的安装与配置

安装 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格式。

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

全局吸底Aplayer模式

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

inject:
  head:
  bottom:
    -  

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

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

pjax:
 enable: ture
 exclude:

演示 1，普通列表模式

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

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

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

2，单曲播放

插入单曲使用如下方式

3，迷你模式

附录 参考链接

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