魔改教程
- 在博客根目录
[Blogroot]
下打开终端,运行以下指令安装 hexo-tag-aplayer 插件:
1
| npm install hexo-tag-aplayer --save
|
- 在站点配置文件
[Blogroot]\_config.yml
中新增配置项,建议直接加在最底下:
1 2 3 4 5
|
aplayer: meting: true asset_inject: false
|
- 修改主题配置文件
[Blogroot]\_config.butterfly.yml
中关于 Aplayer 的配置内容
1 2 3 4
| aplayerInject: enable: true per_page: true
|
- 在主题配置文件
[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>
|
- 在博客根目录
[Blogroot]
下打开终端,运行以下指令
1 2 3
| hexo clean hexo generate hexo server
|
- 关于更换歌单的问题,大部分同学都因为只更改了 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 的插件文档查阅到。 只有三个参数对应正确才能正常加载歌单。
Aplayer 的网易云歌单接口时不时的会挂掉,所以如果你确定你配置正确,但是歌单还是没有出现。不妨去看看其他人的站点是不是也没有 Aplayer 标签了来判断是 Aplayer 本身接口的问题还是自己配置出错的问题。
配置成功后会发现 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; }
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover { left: 0 !important; }
|
- 不要忘了到主题配置文件引入自定义样式,修改
[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>
|