魔改教程

  1. 在博客根目录 [Blogroot] 下打开终端，运行以下指令安装 hexo-tag-aplayer 插件：
1
npm install hexo-tag-aplayer --save
  1. 在站点配置文件 [Blogroot]\_config.yml 中新增配置项，建议直接加在最底下：
1
2
3
4
5
# APlayer
# https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
aplayer:
  meting: true
  asset_inject: false
  1. 修改主题配置文件 [Blogroot]\_config.butterfly.yml 中关于 Aplayer 的配置内容
1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true
  1. 在主题配置文件 [Blogroot]\_config.butterfly.yml 的 inject 配置项中添加 Aplayer 的容器。
1
2
3
4
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="5183531430" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="false" muted></div>
  1. 在博客根目录 [Blogroot] 下打开终端，运行以下指令
1
2
3
hexo clean
hexo generate
hexo server
  1. 关于更换歌单的问题，大部分同学都因为只更改了 data-id 的值，所以出现歌单加载不出的情况，此处需要注意，data-id、data-server、data-type 分别对应了歌单的id，歌单的服务商、歌单的类型 （感觉自己说了废话），所以需要确认这三项是一一对应的。

如图中所示，找到网易云歌单的 url，https://music.163.com/#/playlist?id=4907060762, 此处的palylist 对应的就是data-type 的值，id 就是data-id 的值，而网易云的data-server 为netease，这个可以通过 Aplayer 的插件文档查阅到。 只有三个参数对应正确才能正常加载歌单。

  1. Aplayer 的网易云歌单接口时不时的会挂掉，所以如果你确定你配置正确，但是歌单还是没有出现。不妨去看看其他人的站点是不是也没有 Aplayer 标签了来判断是 Aplayer 本身接口的问题还是自己配置出错的问题。

  2. 配置成功后会发现 Aplayer 的吸底标签一直占据着左下角的一片空间，对手机端阅读不太友好，可以添加一下 CSS 样式使其自动缩进隐藏。在 [Blogroot]\themes\butterfly\source\css\custom.css 中 (没有这个文件就按照路径自己新建) 添加如下内容：

1
2
3
4
5
6
7
8
9
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  left: -66px !important;
  /* 默认情况下缩进左侧66px，只留一点箭头部分 */
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
  left: 0 !important;
  /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
}
  1. 不要忘了到主题配置文件引入自定义样式，修改 [Blogroot]_config.butterfly.yml 的 inject 配置项：
1
2
3
4
5
  inject:
    head:
+     - <link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'">
    bottom:
      - <div class="aplayer no-destroy" data-id="5183531430" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="false" muted></div>