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

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

# 配置播放器

暂时留坑,可以参考主题文档

# 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 的歌词默认在底部正中显示,也会遮挡一些内容,比如 index 页面下方的小三角。当然我们可以通过调整三角高度的方式解决,但是如果可以设置歌词默认不显示,效果可能会更好。

修改 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
更新于