以下文章只是教程

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

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

前言

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

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

其会被插件渲染为
1
<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

  1. 开启主题的 aplayerInject
    在主题的配置文件中，enable 设为 true 和 per_page 设为 true
    1
    2
    3
    4
    # Inject the css and script (aplayer/meting)
    aplayerInject:
      enable: true
      per_page: true
  2. 插入 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链接替换即可。
    1
    2
    3
    4
    5
    6
    7
    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