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 |
:::warning
注意:
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