本篇适用于在单个页面硬塞一个aplayer播放器。

关于hexo butterfly主题的官方文档在此~

官方的aplayer教程在此~

之前一直被hexo butterfly主题装aplayer的问题所困扰,网上有不少教程说用npm装aplayer标签外挂插件,终不得解,官方的教程(在上面)又看不懂。

鉴于这个问题实在麻烦,只能自创一个懒人方案,如有雷同,纯属巧合。

配置依赖文件

找到layout.pug,位置如下图:

image

如图,在此位置加入以下语句:

image

1
2
3
link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css")
script(src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js")
script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js")

注:注意保持缩进一致。 与python类似,缩进在pug中同样属于语法。

这里的操作可以让渲染输出的html文件开头加载类似以下内容:

image

配置meting.js

在需要加入播放器的页面的源文件(***.md)适当位置加入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
const ap = new APlayer({
container: document.getElementById('aplayer'),
mini: false,
autoplay: false,
theme: '#FF8EB3',
loop: 'all',
order: 'random',
preload: 'auto',
volume: 0.3,
mutex: true,
listFolded: true,
listMaxHeight: '250px',
lrcType: 3
});
</script>

以及如下内容:

1
2
3
<meting-js
xxxxxx>
</meting-js>

其中内容参考meting.js文档

image

或者你还可以…

如果你觉得meting.js搞起来太麻烦,那么你可以在需要加入播放器的页面的源文件(***.md)适当位置加入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
const ap = new APlayer({
container: document.getElementById('aplayer'),
mini: false,
autoplay: false,
theme: '#FF8EB3',
loop: 'all',
order: 'random',
preload: 'auto',
volume: 0.3,
mutex: true,
listFolded: true,
listMaxHeight: '250px',
lrcType: 3,
audio: [
{
name: 'xxx',
artist: 'xxx',
url: 'xxx',
cover: 'xxx',
lrc: 'xxx',
theme: 'xxx'
}
//more...
]
});
</script>

各个参数根据自身需要调整,具体参阅aplayer文档