【笔记】NexT8.8添加音乐盒

发表于 更新于 阅读次数：

前言

NexT8.8添加音乐盒

安装插件

1
npm install --save aplayer
  • 由于我的项目在子页面始终无法引入插件，所以将插件下载到了项目根目录进行手动引用

插入音乐盒到页面

  • 例如我这里想插入到侧边栏

修改主题配置

1
2
custom_file_path:
  sidebar: source/_data/sidebar.njk

创建组建

  • 创建组建，并载入音乐盒
source/_data/sidebar.njk
1
2
3
4
<!-- 加载Aplayer播放器 -->
<link rel="stylesheet" href="/aplayer/APlayer.min.css">
<div id="aplayer"></div>
<script src="/aplayer/APlayer.min.js"></script>

添加歌曲

  • 在项目的目录下存放音乐相关文件，并配置
source/_data/sidebar.njk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const ap = new APlayer({
  container: document.getElementById('aplayer'),
  lrcType: 3,
  listFolded: true,
  audio: [
    {
      name: '歌曲名',
      artist: '歌手名',
      url: '音乐文件路径.mp3',
      cover: '专辑图片路径.jpg',
      lrc: '歌词文件路径.lrc'
    },
    {
      ...
    }
  ]
});
</script>

完成

参考文献

Aplayer