安装插件

基于hexo-tag-aplayer这个插件，所以先安装。

1
npm install hexo-tag-aplayer

主题文件配置

在_config.butterfly.yml 添加以下配置项：
在主题配置文件中，将aplayerInject 的两个参数都设置为true 

1
2
3
aplayerInject:
  enable: true
  per_page: true

为了播放不被打断，将pjax开启

1
2
pjax:
  enable: true

在inject 处插入代码

1
2
3
4
5
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="547187496" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" data-volume="0.5" muted></div>

渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CDN:
  # main
  main_css: /css/index.css
  jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
  main: /js/main.js
  utils: /js/utils.js

  # pjax
  pjax: https://cdn.jsdelivr.net/npm/pjax/pjax.min.js
...
  # 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

全局配置文件配置

在_config.yml 中添加以下配置项

1
2
3
4
5
6
7
8
9
10
11
12
#aplayer
aplayer: 
  script_dir: js                      # Public 目录下脚本目录路径，默认: 'assets/js'
  style_dir: css                         # Public 目录下样式目录路径，默认: 'assets/css'
  #cdn: http://xxx/aplayer.min.js                # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
  #style_cdn: http://xxx/aplayer.min.css         # 引用 APlayer.css 外部 CDN 地址 (默认不开启)
  meting: true                                  # MetingJS 支持
  #meting_api: http://xxx/api.php                # 自定义 Meting API 地址
  #meting_cdn: http://xxx/Meing.min.js           # 引用 Meting.js 外部 CDN 地址 (默认不开启)
  asset_inject: false                            # 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启(xiaoka:已在layout.pug文件引入)
  #externalLink: http://xxx/aplayer.min.js       # 老版本参数，功能与参数 cdn 相同meting: true
  post_asset_folder: true

启动查看效果

1
2
3
hexo g
hexo s
查看localhost:4000看效果