1、hexo目录下安装
npm install –save hexo-tag-aplayer

2、修改hexo目录下Hexo配置文件_config.yml

1
2
3
4
#全局音乐 需要将asset_inject设置成false
aplayer:
  enable: true
  asset_inject: false

3、修改hexo目录下主题配置文件_config.butterfly.yml
找到： aplayerInject

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true # 开启音乐播放器
  per_page: true #每个页面都有Aplayer

找到：pjax

1
2
3
4
#实现不会因跳转其他页面而重新播放音乐
#类似异步请求的ajax
pjax:
  enable: true

找到：inject 在bottom里添加

1
2
3
4
5
6
7
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
  bottom:
    - '<div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="song" data-fixed="true" data-autoplay="true"> </div>'

以上修改后，既可实现全局播放器，不会因为页面切换中断

以下是添加音乐的方法：修改以上bottom内的代码

引用自butterfly主题文档说明，加了翻译

1
<div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="`false`"> </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-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’ 【列表循环模式：all, one,none】
data-order list player play order, values: ‘list’, ‘random’ 【列表播放模式： list, random】
data-preload auto values: ‘none’, ‘metadata’, ‘auto’ 【音乐文件预载入模式，可选项： 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【存储播放器设置的本地存储键】