Hexo 魔改（轻度） 音乐页-多个歌单切换

实现多个歌单的切换，本主题自带的音乐页面只有2个歌单。

  1. 在配置中多加一个参数

    1
    2
    3
    4
    5
     # 音乐配置项
    nav_music:
       enable: true
       list:
         -

  2. 在 config.pug 中增加一个参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    let music = 'undefined'
    if (theme.nav_music.list.length > 0){
        music = JSON.stringify({
            musicId:theme.nav_music.list,
            musicIndex:0,
            musicServer:theme.nav_music.server
        })
    }

    const GLOBAL_CONFIG = {
       music: !{music},
    }

  3. 修改 utils.js 中和音乐相关的方法

    1. 找到 js 中的getCustomPlayList方法，大概在860行左右。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      getCustomPlayList: function () {
          if (!window.location.pathname.startsWith("/music/")) {
            return;
          }
          const urlParams = new URLSearchParams(window.location.search);
          const userId = GLOBAL_CONFIG.music.musicId[GLOBAL_CONFIG.music.musicIndex];
          const userServer = GLOBAL_CONFIG.music.musicServer;
          const anMusicPageMeting = document.getElementById("anMusic-page-meting");
          if (urlParams.get("id") && urlParams.get("server")) {
            const id = urlParams.get("id");
            const server = urlParams.get("server");
            anMusicPageMeting.innerHTML = `<meting-js id="${id}" server=${server} type="playlist" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important"></meting-js>`;
          } else {
            anMusicPageMeting.innerHTML = `<meting-js id="${userId}" server="${userServer}" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important"></meting-js>`;
          }
          anzhiyu.changeMusicBg(false);
          anzhiyu.monitorMusicChange();
      }
    2. 找到 js 中的changeMusicList方法，大概在1000行左右。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      changeMusicList: async function () {
          if (GLOBAL_CONFIG.music.musicIndex == GLOBAL_CONFIG.music.musicId.length){
            GLOBAL_CONFIG.music.musicIndex = 0;
          }else {
            GLOBAL_CONFIG.music.musicIndex++;
          }
          const id = GLOBAL_CONFIG.music.musicId[GLOBAL_CONFIG.music.musicIndex];
          const anMusicPageMeting = document.getElementById("anMusic-page-meting");
          anMusicPageMeting.innerHTML = "";
          anMusicPageMeting.innerHTML = `<meting-js id="${id}" server="${musicServer}" type="playlist" mutex="true" preload="auto" theme="var(&#45;&#45;anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important"></meting-js>`;

          // 切换歌单确保歌单加载完成
          let timer = setInterval(() => {
            const anMusicPage = document.getElementById("anMusic-page");
            const metingAplayer = anMusicPage.querySelector("meting-js").aplayer;
            // 确保player加载完成
            if (metingAplayer) {
              clearInterval(timer);
              defaultPlayMusicList = metingAplayer.list.audios;

              anzhiyu.changeMusicBg(true);
              anzhiyu.monitorMusicChange();
            }
          }, 100);
      }
    3. 监听歌曲的切换
      这是为了实现切换歌曲，背景进行改变。

      注：在初始化歌单时，可以实现背景随歌曲的变化而变化。如果切换歌单后，下面的方法就报错。
      希望大佬指导一下。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      musicObserver:null,
       //监听音乐的切换
       monitorMusicChange:function (){
           // 选择需要观察变动的节点
           let page = document.getElementById("anMusic-page")
           const targetNode =page.getElementsByClassName("aplayer-pic");
           // 观察器的配置（需要观察什么变动）
           const config = { subtree: true,attributeFilter:['style'] };
           // 当观察到变动时执行的回调函数
           const callback = function(mutationsList, observer) {
              anzhiyu.changeMusicBg(true);
           };
         
           // 创建一个观察器实例并传入回调函数
           anzhiyu.musicObserver = new MutationObserver(callback);
           // 以上述配置开始观察目标节点
           anzhiyu.musicObserver.observe(targetNode, config);
       }