文章转载自 Akilarの糖果屋,如有侵权,请联系作者,本站仅当学习使用。

魔改教程

  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.ymlinject 配置项中添加 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-iddata-serverdata-type 分别对应了歌单的id,歌单的服务商、歌单的类型 (感觉自己说了废话),所以需要确认这三项是一一对应的。

如图中所示,找到网易云歌单的 urlhttps://music.163.com/#/playlist?id=4907060762, 此处的palylist 对应的就是data-type 的值,id 就是data-id 的值,而网易云的data-servernetease,这个可以通过 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.ymlinject 配置项:
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>