本教程适用于Butterfly主题
教程参考:如何在Hexo博客Butterfly主题开启Aplayer和“音乐”页面

1.在博客根目录执行以下命令

1
2
3
hexo new page music
npm install aplayer
npm install --save hexo-tag-aplayer

2.在主题目录\layout\includes下找到layout.pug文件并打开

应该可以看到以下字段

1
2
3
4
5
6
head
include ./head.pug
link(rel="stylesheet" href="APlayer.min.css")
div(id="aplayer")
script(src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js" async)
body

如果你的没有,请手动加上,注意缩进

3.在主题目录\layout\includes下找到aplayer.pug文件

如果你没有这个文件,请手动创建并加上以下内容

1
2
3
link(rel="stylesheet" type='text/css', href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css")
script(type='text/javascript', src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js")
script(type='text/javascript', src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js")

4.到博客根目录下打开站点配置文件_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: true # 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
#externalLink: http://xxx/aplayer.min.js # 老版本参数,功能与参数 cdn 相同meting: true

并找到post_asset_folder: false,将false改为true

1
post_asset_folder: true

5.设置音乐页面

在博客根目录\source\music\index.md使用以下格式来设置

1
2
3
4
5
6
7
8
9
10
---
title: 我的歌单
date: 2021-1-21 10:23:07
type: "music"
---

<font color=#0c74d6 size=3 face="黑体">**这是歌单介绍,如果不需要刻意留空**</font>

{% meting "162605041" "netease" "playlist" %}


最后重新成功静态网页.完成.


发现bug,,如果你开启了全局吸底Aplayer,会出现问题,吸底Aplayer布局错乱
解决:
在主题目录\layout\includes下找到aplayer.pug文件注释掉这句即可

1
link(rel="stylesheet" href="APlayer.min.css")