# 给Butterfly添加Aplayer全局吸底教程

本文作者：Skytyun (opens new window)

本站地址：https://gyb.skytyun.top (opens new window)

以下文章只是教程

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

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

# 前言

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

{% 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开启

<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

1
2
3
4

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

<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 选项：

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

1
2

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

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

1
2
3

调整 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>'

1
2
3

调整 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

1
2
3
4
5
6
7