Butterfly添加全局吸底Aplayer教程

以下文章只是教程

如果部署之后，并没有出现 aplayer , 请确认是否跟足步骤操作或者更换音乐源，多试试。

如果遇到使用问题，请仔细查看插件文档，或者到插件那里反馈。

前言

如果你想使用 aplayer，很多人都会推荐安装 hexo-tag-aplayer 这款插件。这款插件通过 Hexo 独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的 html。如果你只是使用一些简单的功能，其实无需使用到这个插件，只需以 html 格式书写就行，不用插件去转换。
例如：
如果使用插件，在 markdown 中要这样写

1	{% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %}

其会被插件渲染为

<div id="aplayer-uxAIfEUs" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#3F51B5"></div>

如果我们不想使用插件，就需要在markdown中用html的格式书写，同时把主题配置文件中的aplayerInject开启

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

这样我们就可以不用使用多一个插件，当然这种东西见仁见智，选自己喜欢的就行。
回到正题，这篇文章将教大家如何在Butterfly上使用全局吸底 Aplayer

开启主题的 aplayerInject
在主题的配置文件中，enable 设为 true 和 per_page 设为 true

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

插入 Aplayer html
为了适配 hexo-tag-aplayer，主题内置的 Meting js 仍为 1.2 版本，并非最新的 2.x 版本。
Aplayer html 例子：

1	<div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>

参数解释

option	default	description
data-id	require	歌曲 ID / 播放列表 ID / 专辑 ID / 搜索关键字
data-server	require	music platform: netease, tencent, kugou, xiami, baidu
data-type	require	song, playlist, album, search, artist
data-fixed	false	enable fixed mode
data-mini	false	enable mini mode
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	lyric type
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 选项：

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

调整 TOC 目录按钮
打开文章页面时，你会发现打开 Toc 目录的按钮被遮挡了。我们需要修改 CSS 来改变按钮的位置。
请在主题配置文件中，将这段代码添加到 inject 去：

1
2
3

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

调整 Aplayer 收回方式
如果你觉得Aplayer占地太大，影响正常阅读，可以设置Aplayer收回时将音乐Cover也隐藏掉，只留下右侧的箭头栏。
请在主题配置文件中，将这段代码添加到 inject 去：

1
2
3

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.akioi.eu.org/meting.min.js