Hexo next主题中添加播放器Aplayer
下载
- 首先,先下载Aplayer源码:APlayer
dist文件夹
- 再将文件中的dist文件夹复制到路径:
blog/themes/next/source
(我的next版本是7.5)
新建music.js
- 在目录
blog/themes/next/source/dist
下添加music.js文件
内容是:
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: true,
audio: [
{
name: '勇气',
artist: '棉子',
url: 'http://music.163.com/song/media/outer/url?id=1411358329.mp3',
cover: '/images/5.jpg',
},
{
name: "星星",
artist: '张杰',
url: 'http://music.163.com/song/media/outer/url?id=1399004693.mp3',
cover: '/images/xingxing.jpg',
},
{
name: '这就是爱吗',
artist: '十豆',
url: 'http://music.163.com/song/media/outer/url?id=1412242872.mp3',
cover: '/images/zjsam.jpg',
},
{
name: 'Alone',
artist: 'Alan Walker / Noonie Bao',
url: 'http://music.163.com/song/media/outer/url?id=444269135.mp3',
cover: '/images/alone.jpg',
},
{
name: 'Umbrella (Matte Remix)',
artist: 'Matte / Ember Island',
url: 'http://music.163.com/song/media/outer/url?id=164209623.mp3',
cover: '/images/1.jpg',
},
{
name: '大眠 (完整版)原唱:王心凌',
artist: '小乐哥',
url: 'http://music.163.com/song/media/outer/url?id=3778678.mp3',
cover: '/images/2.jpg',
},
{
name: '世间美好与你环环相扣',
artist: '柏松',
url: 'http://music.163.com/song/media/outer/url?id=1363948882.mp3',
cover: '/images/3.jpg',
},
{
name: '飞',
artist: '王恩信Est / 二胖u',
url: 'http://music.163.com/song/media/outer/url?id=1386259535.mp3',
cover: '/images/4.jpg',
}
]
});
注:里面的代码可以修改,歌曲信息需要手动添加:
- name:歌曲名称
- artist:作者
- url:连接(具体怎样操作看下面步骤)
- cover:是图片连接,可以是本地图片,也可以是在线图片,本地放在
source/images
然后修改路径即可
url添加歌曲方法
- 网易云网页播放一首歌曲
- 将网址中的id复制例:
https://music.163.com/#/song?id=1411358329
- 将下面代码中的id修改为你想添加歌曲的id:
http://music.163.com/song/media/outer/url?id=.mp3
修改文件_layout.swig
在路径:blog/themes/next/layout
下找到_layout.swig文件,然后将下面的代码添加到:<body itemscope ...>
在body里面就可以
<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 g
再hexo d
在网页的左下角就可以看到了,大功告成!
给出我的blog主页:stride Max Zz.欢迎访问