前言/废话

接了个给 hexo-butterfly 增加播放本地音乐的小单, 记录一下实现过程, 网上大多为添加第三方源或只是在单页面添加播放器

开始

1. hexo 目录下安装 hexo-tag-aplayer

npm install --save hexo-tag-aplayer

2. 准备本地音乐, 封面, 歌词, 放入 source 路径, 例如

path-to-your-blog/
└─ source/
   └─ music/
      ├─ song1.mp3
      ├─ song2.mp3
      ├─ song3.mp3
   └─ cover/
      ├─ song1.jpg
      ├─ song2.jpg
      ├─ song3.jpg
   └─ lrs/
      ├─ song1.lrs
      ├─ song2.lrs
      ├─ song3.lrs

3. 添加全局播放器

配置主题的 additional-js.pug 文件 (不选择配置 _config.yml 里的 inject 是因为各种神秘版本神秘兼容已经把我搞晕)

nano themes/butterfly/layout/includes/additional-js.pug

最后一行添加

div(id="global-aplayer")
link(rel="stylesheet", href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css")
script(src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js")
script.
  window.onload = function() {
    if (typeof APlayer !== 'undefined') {
      const ap = new APlayer({ 
        container: document.getElementById('global-aplayer'), 
        fixed: true, 
        autoplay: false, 
        theme: '#F57C00', 
        loop: 'all', 
        volume: 0.7, 
        mutex: true, 
        listFolded: true, 
        listMaxHeight: 300, 
        lrcType: 1,  // 这里填 1 没用的可以试一下填 3
        preload: auto, 
        audio: [
          {
            name: "song1", 
            artist: "artist1", 
            url: "/music/song1.mp3", 
            cover: "/cover/song1.jpg", 
            lrc: "/lrs/song1.lrc"
          }, 
          {
            name: "song2", 
            artist: "artist2", 
            url: "/music/song2.mp3", 
            cover: "/cover/song2.jpg", 
            lrc: "/lrs/song2.lrc"
          }
          {
            name: "song3", 
            artist: "artist3", 
            url: "/music/song3.mp3", 
            cover: "/cover/song3.jpg", 
            lrc: "/lrs/song3.lrc"
          }
        ]
      });
      const apFixed = document.querySelector('.aplayer-fixed');
      if (apFixed) {
        apFixed.style.zIndex = '99999';
        apFixed.style.bottom = '20px';
        apFixed.style.right = '20px';
        apFixed.style.width = '360px';
      }
    }
  };

4. 清理 inject 配置 (如果你先前参照了其他的一些教程, 则执行这一步)

nano ./_config.yml
# or
nano ./_config_butterfly.yml

找到 inject 部分, 清空先前的配置避免冲突

inject:
  head: 
  bottom: 

5. 重新启动博客

hexo clean && npm run server

大功告成~~~~