# Butterfly：添加全局吸底 Aplayer 播放器

以下步骤在 Butterfly 主题上可以正常生效。如果你使用的是其他主题，可以根据情况自行适配。

# 配置播放器

# 解决与 `hexo-tag-aplayer` 的兼容问题

如果你没有安装过 hexo-tag-aplayer 插件，请直接跳过该步骤。

如果你安装过 hexo-tag-aplayer ，请在 Hexo 的配置文件中修改以下设置：

	aplayer:
	meting: true
	asset_inject: false

# 开启主题的 aplayerInject 选项

在主题配置文件中，enable 和 per_page 均设为 true：

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

# 插入 Aplayer 代码

插入到主题配置文件的 inject.bottom 。

示例代码：

	inject:
	...
	bottom:
	- <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

参数解释：

option	default	description
data-id	require	song id / playlist id / album id / search keyword
data-server	require	music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
data-type	require	`song`, `playlist`, `album`, `search`, `artist`
data-autoplay	`false`	audio autoplay
data-theme	`#2980b9`	main color
data-loop	`all`	player loop play, values: ‘all’, ‘one’, ‘none’
data-order	`list`	player play order, values: ‘list’, ‘random’
data-preload	`auto`	values: ‘none’, ‘metadata’, ‘auto’
data-volume	`0.7`	default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
data-mutex	`true`	prevent to play multiple player at the same time, pause other players when this player start play
data-lrctype	`0`	歌词来源方式，一般不更改
data-listfolded	`false`	indicate whether list(指播放列表，不是播放器) should folded at first
data-listmaxheight	`340px`	list max height
data-storagename	`metingjs`	localStorage key that store player setting

注意：

data-id 、 data-server 和 data-type 必须配置
data-fixed 和 data-mini 参数不要更改

运行 Hexo 就可以看到网页左下角出现了 Aplayer。

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

# UI 调整

# 调整右下角回到顶部等按钮

按照上面的步骤设置完成后，浏览器左下角会出现 Aplayer。在手机端浏览博客时，如果展开播放器，会将右下角按钮遮住。

在 Butterfly 配置文件中，调整 rightside-bottom 选项：

	# the position of bottom right button; default unit: px (右下角按鈕距離底部的距離，默認單位為 px)
	rightside-bottom: 80px

# 调整 TOC 目录按钮

打开文章页面时，你会发现打开 Toc 目录的按钮被遮挡了。我们需要修改 CSS 来改变按钮的位置。

请在主题配置文件中，将这段代码添加到 inject 去：

	inject:
	head:
	- '<style type="text/css">#toggle-sidebar {bottom: 80px}</style>'

# 调整 Aplayer 收回方式

如果你觉得 Aplayer 占地太大，影响正常阅读，可以设置 Aplayer 收回时将音乐 Cover 也隐藏掉，只留下右侧的箭头栏。

请在主题配置文件中，将这段代码添加到 inject 去：

	inject:
	head:
	- '<style type="text/css">.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{left:-66px!important}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover{left:0!important}</style>'

# 调整 APlayer 歌词显示

Aplayer 的歌词默认在底部正中显示，也会遮挡一些内容。当然我们可以通过调整相应内容高度的方式来解决，但是如果可以设置歌词默认不显示，效果可能会更好。

解决方案：修改 Butterfly 配置文件中的 CDN.meting_js 配置，将 CDN 链接替换即可。

	CDN:
	...
	# aplayer
	aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
	aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
	- meting_js: https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js
	+ meting_js: https://cdn.jsdelivr.net/gh/SerokSSR/cdn/meting.min.js