Hexo 添加APlayer音乐播放器

前言

为博客添加音乐播放器功能

download

点击访问Aplayer源码:GitHub APlayer。下载到本地,解压后将dist文件夹复制到themes\next\source文件夹下。

music.js

新建\dist\music.js文件,添加内容:

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
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: true,
audio: [
{
name: "暗涌",
artist: '王菲',
url: 'http://www.ytmp3.cn/down/52980.mp3',
cover: 'http://p1.music.126.net/w8RFsMH8VJfPsBmVudYGsA==/109951163020569833.jpg?param=130y130',
},
{
name: 'Wonderful U',
artist: 'AGA',
url: 'http://www.ytmp3.cn/down/51181.mp3',
cover: 'http://p1.music.126.net/Blb_Gi0AJTWIEBLr189F4A==/18791753232142320.jpg?param=130y130',
},
{
name: '浮夸',
artist: '陈奕迅',
url: 'http://www.ytmp3.cn/down/49639.mp3',
cover: 'http://p1.music.126.net/Bl1hEdJbMSj5YJsTqUjr-w==/109951163520311175.jpg?param=130y130',
}
]
});

源码参数解释APlayer 中文文档

mp3音乐外链

_layout.swig

打开themes\next\layout_layout.swig文件,在<body></body> 里面添加以下代码:

1
2
3
4
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

大功告成,重新生成部署页面即可

参考:hexo上的aplayer应用
lewulu!
-------------The End-------------
0%