博客搭建第五天

前言

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

简介

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

步骤一

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

步骤二

安装npm包 npm install aplayer –save

步骤三

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

步骤四

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

复制

   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文件里添加如下代码块

复制

<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/