Fork me on GitHub

博客搭建第五天

前言

想给博客添加一个播放器,于是百度了一下就有了思路

简介

APlayer是一款嵌入页面的音乐播放器。

步骤一

访问Aplayer的github源码,下载源码并解压

步骤二

安装npm包 npm install aplayer –save

步骤三

将第一步骤解压后的dist文件夹拷贝到你博客themes/next/source下

步骤四

在dist文件夹新增music.js,并添加如下代码

1
2
3
4
5
6
7
8
9
   const ap = new APlayer({
container: document.getElementById('aplayer'),
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg'
}]
});

name:歌曲名称
artist:唱歌的人
url:音乐的地址
cover:音乐的封面

步骤5

在themes/next/layout/_layout.swig中的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>

结束

开始你的音乐之旅吧!

本文参考 https://asdfv1929.github.io/2018/05/26/next-add-music/

-------------The End-------------

本文标题:博客搭建第五天

文章作者:Fancy君

发布时间:2018年08月06日 - 16:17:45

最后更新:2018年08月07日 - 15:18:46

原始链接:http://www.fancyiscrying.top/2018/08/06/博客搭建第五天/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。