Anzhiyu主题重写右键菜单播放器

本文修改主题为AnZhiYu主题，若使用其他主题，请自行确认修改位置。

本文对主题文件进行了较多的修改，请在修改前先备份原文件。

写在前面

主题右键菜单原有的功能仅在右键音乐时才显示。本文重写了该模块，将其改为常驻在菜单最下方的播放器样式，支持调整音量、播放/暂停、下一首、上一首等功能，使其更加直观。

样式预览

样式预览

修改步骤

新建文件

新建[Blogroot]\themes\anzhiyu\source\css\_custom\rightmenu.css文件，用于存储样式：

#menu-music-data {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu-music-volume {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 10px;
    width: 100%;
}

#menu-music-volume i {
    /* color: #c6c6c6; */
    font-size: 20px;
    transition: color .3s;
    cursor: pointer;
}

#menu-music-volume i:hover {
    color: var(--anzhiyu-main);
}

#menu-music-control {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: auto;
    margin-top: .2rem;
    margin-bottom: .2rem;
}

#menu-music-control > div {
    padding: 2px 6px 2px;
}

#menu-music-control > div:hover {
    background-color: var(--anzhiyu-main);
    color: var(--anzhiyu-white);
    box-shadow: var(--anzhiyu-shadow-theme);
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -o-transition: 0.1s;
    -ms-transition: 0.1s;
    transition: 0.1s;
    border-radius: 8px;
}

#menu-music-control > div > i {
    font-size: 24px;
    cursor: pointer;
    line-height: 1rem;
    display: inline-block;
}

.rightMenuMusic-item:hover {
    background-color: unset;
    color: unset;
}

#rightMenu .rightMenu-group .rightMenu-item {
    margin-top: 6px;
    padding: 2px 6px 0px;
    display: inline-block;
}

#volume-slider {
    width: 100%!important;
    height: auto!important;
    margin: 0!important;
    padding: 0 4px!important;
    position: relative;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#slider-rail {
    height: 8px;
    background-color: #f2b94b23;
    border-radius: 25px;
    position: relative;
    width: 100%;
    -webkit-transition-property: width,height,left,right,top,bottom;
    transition-property: width,height,left,right,top,bottom;
}

#slider-process {
    border-radius: 25px;
    background-color: #f2b94b;
    position: absolute;
    z-index: 1;
    height: 100%;
    top: 0px;
    left: 0%;
}

#slider-dot {
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    top: 50%;
    border: 1px solid #f2b94b23;
    background-color: #f2b94b;
    box-shadow: .5px .5px 2px 1px #00000052;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    z-index: 5;
}

#menu-music-data #name{
    width: 100%;
    padding: 0 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  
}

#menu-music-data #artist {
    width: 100%;
    font-size: 14px;
    color: #c6c6c6;
    padding: 0 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  
}

修改菜单生成

修改[Blogroot]\themes\anzhiyu\layout\includes\anzhiyu\rightmenu.pug文件，整体修改为如下内容：

原文件的缩进使用代是制表符(Tab)缩进，而非空格缩进，两者不可混用，会产生报错，此处我使用的是空格缩进，修改时请注意。

- const { translate } = theme
#rightMenu
    .rightMenu-group.rightMenu-small
        .rightMenu-item#menu-backward
            i.anzhiyufont.anzhiyu-icon-arrow-left
        .rightMenu-item#menu-forward
            i.anzhiyufont.anzhiyu-icon-arrow-right
        .rightMenu-item#menu-refresh
            i.anzhiyufont.anzhiyu-icon-arrow-rotate-right(style="font-size: 1rem;")
        .rightMenu-item#menu-top
            i.anzhiyufont.anzhiyu-icon-arrow-up
    .rightMenu-group.rightMenu-line.rightMenuPlugin
        .rightMenu-item#menu-copytext
            i.anzhiyufont.anzhiyu-icon-copy
            span 复制选中文本
        .rightMenu-item#menu-pastetext
            i.anzhiyufont.anzhiyu-icon-paste
            span 粘贴文本
        a.rightMenu-item#menu-commenttext
            i.anzhiyufont.anzhiyu-icon-comment-medical
            span 引用到评论
        .rightMenu-item#menu-newwindow
            i.anzhiyufont.anzhiyu-icon-window-restore
            span 新窗口打开
        .rightMenu-item#menu-copylink
            i.anzhiyufont.anzhiyu-icon-link
            span 复制链接地址
        .rightMenu-item#menu-copyimg
            i.anzhiyufont.anzhiyu-icon-images
            span 复制此图片
        .rightMenu-item#menu-downloadimg
            i.anzhiyufont.anzhiyu-icon-download
            span 下载此图片
        .rightMenu-item#menu-newwindowimg
            i.anzhiyufont.anzhiyu-icon-window-restore
            span 新窗口打开图片
        .rightMenu-item#menu-search
            i.anzhiyufont.anzhiyu-icon-magnifying-glass
            span 站内搜索
        .rightMenu-item#menu-searchBaidu
            i.anzhiyufont.anzhiyu-icon-magnifying-glass
            span 百度搜索
        - const nav_music_all_playlist = theme.nav_music.all_playlist
        .rightMenu-item#menu-music-playlist(onclick=`window.open("${nav_music_all_playlist}", "_blank");`, style='display: none;')
            i.anzhiyufont.anzhiyu-icon-radio
            span 查看所有歌曲
        .rightMenu-item#menu-music-copyMusicName
            i.anzhiyufont.anzhiyu-icon-copy
            span 复制歌名
    .rightMenu-group.rightMenu-line.rightMenuOther
        a.rightMenu-item.menu-link#menu-randomPost
            i.anzhiyufont.anzhiyu-icon-shuffle
            span 随便逛逛
        a.rightMenu-item.menu-link(href='/categories/')
            i.anzhiyufont.anzhiyu-icon-cube
            span 博客分类
        a.rightMenu-item.menu-link(href='/tags/')
            i.anzhiyufont.anzhiyu-icon-tags
            span 文章标签
    .rightMenu-group.rightMenu-line.rightMenuOther
        a.rightMenu-item#menu-copy(href='javascript:void(0);')
            i.anzhiyufont.anzhiyu-icon-copy
            span 复制地址
        a.rightMenu-item#menu-commentBarrage(href='javascript:void(0);')
            i.anzhiyufont.anzhiyu-icon-message
            span.menu-commentBarrage-text 关闭热评
        a.rightMenu-item#menu-darkmode(href='javascript:void(0);')
            i.anzhiyufont.anzhiyu-icon-circle-half-stroke
            span.menu-darkmode-text 深色模式
        a.rightMenu-item#menu-translate(href='javascript:void(0);')
            i.anzhiyufont.anzhiyu-icon-language
            span=translate.rightMenuMsgDefault
    .rightMenu-group.rightMenu-music.rightMenuPlayer 
        a.rightMenuMusic-item#menu-music-data
            span#name
            span#artist
        a.rightMenuMusic-item#menu-music-volume
            #menu-music-volume-down
                i.iconfont.icon-volume-down
            #volume-slider
                #slider-rail
                    #slider-process
                    #slider-dot
                        #slider-dot-handle
            #menu-music-volume-up
                i.iconfont.icon-volume-up
        a.rightMenuMusic-item#menu-music-control
            #menu-music-back
                i.iconfont.icon-prev
            #menu-music-toggle
                i.iconfont.icon-play
            #menu-music-forward
                i.iconfont.icon-next
#rightmenu-mask

修改菜单JS

修改[Blogroot]\themes\anzhiyu\source\js\anzhiyu\right_click_menu.js文件，整体替换为以下内容：

修改中关闭了关闭热评的选项，若需要使用，请自行注释有关内容，具体为：
const $rightMenuCommentBarrage = document.querySelector("#menu-commentBarrage");
$rightMenuCommentBarrage.style.display = "none";

// 初始化函数
rm = {};

//禁止图片与超链接拖拽
let aElements = document.getElementsByTagName("a");
for (let i = 0; i < aElements.length; i++) {
  aElements[i].setAttribute("draggable", "false");
  let imgElements = aElements[i].getElementsByTagName("img");
  for (let j = 0; j < imgElements.length; j++) {
    imgElements[j].setAttribute("draggable", "false");
  }
}

// 显示菜单
rm.showRightMenu = function (isTrue, x = 0, y = 0) {
  // console.info(x, y);
  let rightMenu = document.getElementById("rightMenu");
  rightMenu.style.top = x + "px";
  rightMenu.style.left = y + "px";
  if (isTrue) {
    rightMenu.style.display = "block";
    stopMaskScroll();
  } else {
    rightMenu.style.display = "none";
  }
  rm.updateMusicInfo();
  rm.updateVolumeSlider();
};

// 隐藏菜单
rm.hideRightMenu = function () {
  rm.showRightMenu(false);
  let rightMenuMask = document.querySelector("#rightmenu-mask");
  rightMenuMask.style.display = "none";
  sliderDot.style.transition = 'none';
  sliderProcess.style.transition = 'none';
};

// 尺寸
let rmWidth = document.getElementById("rightMenu").offsetWidth;
let rmHeight = document.getElementById("rightMenu").offsetHeight;

// 重新定义尺寸
rm.reloadrmSize = function () {
  rightMenu.style.visibility = "hidden";
  rightMenu.style.display = "block";
  // 获取宽度和高度
  rmWidth = document.getElementById("rightMenu").offsetWidth;
  rmHeight = document.getElementById("rightMenu").offsetHeight;
  rightMenu.style.visibility = "visible";
};

// 获取点击的href
let domhref = "";
let domImgSrc = "";
let globalEvent = null;

var oncontextmenuFunction = function (event) {
  if (document.body.clientWidth > 768) {
    let pageX = event.clientX + 10; //加10是为了防止显示时鼠标遮在菜单上
    let pageY = event.clientY;

    //其他额外菜单
    const $rightMenuOther = document.querySelector(".rightMenuOther");
    const $rightMenuPlugin = document.querySelector(".rightMenuPlugin");
    const $rightMenuCopyText = document.querySelector("#menu-copytext");
    const $rightMenuPasteText = document.querySelector("#menu-pastetext");
    const $rightMenuCommentText = document.querySelector("#menu-commenttext");
    const $rightMenuCommentBarrage = document.querySelector("#menu-commentBarrage");
    const $rightMenuNewWindow = document.querySelector("#menu-newwindow");
    const $rightMenuNewWindowImg = document.querySelector("#menu-newwindowimg");
    const $rightMenuCopyLink = document.querySelector("#menu-copylink");
    const $rightMenuCopyImg = document.querySelector("#menu-copyimg");
    const $rightMenuDownloadImg = document.querySelector("#menu-downloadimg");
    const $rightMenuSearch = document.querySelector("#menu-search");
    const $rightMenuSearchBaidu = document.querySelector("#menu-searchBaidu");
    const $rightMenuMusicPlayer = document.querySelector("#rightMenu > div.rightMenu-group.rightMenu-music.rightMenuPlayer");
    const $rightMenuMusicPlaylist = document.querySelector("#menu-music-playlist");
    const $rightMenuMusicCopyMusicName = document.querySelector("#menu-music-copyMusicName");

    let href = event.target.href;
    let imgsrc = event.target.currentSrc;

    // 判断模式 扩展模式为有事件
    let pluginMode = false;
    $rightMenuOther.style.display = "block";
    $rightMenuCommentBarrage.style.display = "none";
    globalEvent = event;

    // 检查是否需要复制 是否有选中文本
    if (selectTextNow && window.getSelection()) {
      pluginMode = true;
      $rightMenuCopyText.style.display = "block";
      $rightMenuCommentText.style.display = "block";
      $rightMenuSearch.style.display = "block";
      $rightMenuSearchBaidu.style.display = "block";
    } else {
      $rightMenuCopyText.style.display = "none";
      $rightMenuCommentText.style.display = "none";
      $rightMenuSearchBaidu.style.display = "none";
      $rightMenuSearch.style.display = "none";
    }

    //检查是否右键点击了链接a标签
    if (href) {
      pluginMode = true;
      $rightMenuNewWindow.style.display = "block";
      $rightMenuCopyLink.style.display = "block";
      domhref = href;
    } else {
      $rightMenuNewWindow.style.display = "none";
      $rightMenuCopyLink.style.display = "none";
    }

    //检查是否需要复制图片
    if (imgsrc) {
      pluginMode = true;
      $rightMenuCopyImg.style.display = "block";
      $rightMenuDownloadImg.style.display = "block";
      $rightMenuNewWindowImg.style.display = "block";
      document.getElementById("rightMenu").style.width = "12rem";
      domImgSrc = imgsrc;
    } else {
      $rightMenuCopyImg.style.display = "none";
      $rightMenuDownloadImg.style.display = "none";
      $rightMenuNewWindowImg.style.display = "none";
    }

    // 判断是否为输入框
    if (event.target.tagName.toLowerCase() === "input" || event.target.tagName.toLowerCase() === "textarea") {
      pluginMode = true;
      $rightMenuPasteText.style.display = "block";
    } else {
      $rightMenuPasteText.style.display = "none";
    }
    const navMusicEl = document.querySelector("#nav-music");
    //判断是否是音乐
    if (navMusicEl && navMusicEl.contains(event.target)) {
      pluginMode = true;
      // $rightMenuMusicToggle.style.display = "block";
      // $rightMenuMusicBack.style.display = "block";
      // $rightMenuMusicForward.style.display = "block";
      $rightMenuMusicPlaylist.style.display = "block";
      $rightMenuMusicCopyMusicName.style.display = "block";
    } else {
      // $rightMenuMusicToggle.style.display = "none";
      // $rightMenuMusicBack.style.display = "none";
      // $rightMenuMusicForward.style.display = "none";
      $rightMenuMusicPlaylist.style.display = "none";
      $rightMenuMusicCopyMusicName.style.display = "none";
    }

    // 检查 `body` 是否具有 `data-type="music"` 属性
    let bodyElement = document.querySelector('body');
    if (bodyElement.getAttribute('data-type') === 'music') {
      $rightMenuMusicPlayer.style.display = "none";
    } else {
      $rightMenuMusicPlayer.style.display = "block";
    }

    // 如果不是扩展模式则隐藏扩展模块
    if (pluginMode) {
      $rightMenuOther.style.display = "none";
      $rightMenuPlugin.style.display = "block";
    } else {
      $rightMenuPlugin.style.display = "none";
    }

    rm.reloadrmSize();

    // 鼠标默认显示在鼠标右下方，当鼠标靠右或靠下时，将菜单显示在鼠标左方\上方
    if (pageX + rmWidth > window.innerWidth) {
      pageX -= rmWidth + 10;
    }
    if (pageY + rmHeight > window.innerHeight) {
      pageY -= pageY + rmHeight - window.innerHeight;
    }

    rm.showRightMenu(true, pageY, pageX);
    document.getElementById("rightmenu-mask").style.display = "flex";
    return false;
  }
};

// 监听右键初始化
window.oncontextmenu = oncontextmenuFunction;

// 下载图片状态
rm.downloadimging = false;

// 复制图片到剪贴板
rm.writeClipImg = function (imgsrc) {
  // console.log("按下复制");
  rm.hideRightMenu();
  anzhiyu.snackbarShow("正在下载中，请稍后", false, 10000);
  if (rm.downloadimging == false) {
    rm.downloadimging = true;
    setTimeout(function () {
      copyImage(imgsrc);
      anzhiyu.snackbarShow("复制成功！图片已添加盲水印，请遵守版权协议");
      rm.downloadimging = false;
    }, "10000");
  }
};

function imageToBlob(imageURL) {
  const img = new Image();
  const c = document.createElement("canvas");
  const ctx = c.getContext("2d");
  img.crossOrigin = "";
  img.src = imageURL;
  return new Promise(resolve => {
    img.onload = function () {
      c.width = this.naturalWidth;
      c.height = this.naturalHeight;
      ctx.drawImage(this, 0, 0);
      c.toBlob(
        blob => {
          // here the image is a blob
          resolve(blob);
        },
        "image/png",
        0.75
      );
    };
  });
}

async function copyImage(imageURL) {
  const blob = await imageToBlob(imageURL);
  const item = new ClipboardItem({ "image/png": blob });
  navigator.clipboard.write([item]);
}

rm.copyUrl = function (id) {
  const input = document.createElement("input"); // Create a new <input> element
  input.id = "copyVal"; // Set the id of the new element to "copyVal"
  document.body.appendChild(input); // Append the new element to the end of the <body> element

  const text = id;
  input.value = text;
  input.select();
  input.setSelectionRange(0, input.value.length);
  document.execCommand("copy");

  input.remove(); // Remove the <input> element from the DOM
};

function stopMaskScroll() {
  if (document.getElementById("rightmenu-mask")) {
    let xscroll = document.getElementById("rightmenu-mask");
    xscroll.addEventListener(
      "mousewheel",
      function (e) {
        //阻止浏览器默认方法
        rm.hideRightMenu();
        // e.preventDefault();
      },
      { passive: true }
    );
  }
  if (document.getElementById("rightMenu")) {
    let xscroll = document.getElementById("rightMenu");
    xscroll.addEventListener(
      "mousewheel",
      function (e) {
        //阻止浏览器默认方法
        rm.hideRightMenu();
        // e.preventDefault();
      },
      { passive: true }
    );
  }
}

rm.rightmenuCopyText = function (txt) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(txt);
  }
  rm.hideRightMenu();
};

rm.copyPageUrl = function (url) {
  if (!url) {
    url = window.location.href;
  }
  rm.copyUrl(url);
  anzhiyu.snackbarShow("复制链接地址成功", false, 2000);
  rm.hideRightMenu();
};

// 复制当前选中文本
var selectTextNow = "";
document.onmouseup = document.ondblclick = selceText;

function selceText() {
  var txt;
  if (document.selection) {
    txt = document.selection.createRange().text;
  } else {
    txt = window.getSelection().toString();
  }
  selectTextNow = txt !== "" ? txt : "";
}

// 读取剪切板
rm.readClipboard = function () {
  if (navigator.clipboard) {
    navigator.clipboard.readText().then(clipText => rm.insertAtCaret(globalEvent.target, clipText));
  }
};

// 粘贴文本到焦点
rm.insertAtCaret = function (elemt, value) {
  const startPos = elemt.selectionStart,
    endPos = elemt.selectionEnd;
  if (document.selection) {
    elemt.focus();
    var sel = document.selection.createRange();
    sel.text = value;
    elemt.focus();
  } else {
    if (startPos || startPos == "0") {
      var scrollTop = elemt.scrollTop;
      elemt.value = elemt.value.substring(0, startPos) + value + elemt.value.substring(endPos, elemt.value.length);
      elemt.focus();
      elemt.selectionStart = startPos + value.length;
      elemt.selectionEnd = startPos + value.length;
      elemt.scrollTop = scrollTop;
    } else {
      elemt.value += value;
      elemt.focus();
    }
  }
};

//粘贴文本
rm.pasteText = function () {
  const result = rm.readClipboard() || "";
  rm.hideRightMenu();
};

//引用到评论
rm.rightMenuCommentText = function (txt) {
  rm.hideRightMenu();
  const postCommentDom = document.getElementById("post-comment");
  var domTop = postCommentDom.offsetTop;
  window.scrollTo(0, domTop - 80);
  if (txt == "undefined" || txt == "null") txt = "好棒！";
  function setText() {
    setTimeout(() => {
      var input = document.getElementsByClassName("el-textarea__inner")[0];
      if (!input) setText();
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("input", true, true);
      let inputValue = replaceAll(txt, "\n", "\n> ");
      input.value = "> " + inputValue + "\n\n";
      input.dispatchEvent(evt);
      input.focus();
      input.setSelectionRange(-1, -1);
      if (document.getElementById("comment-tips")) {
        document.getElementById("comment-tips").classList.add("show");
      }
    }, 100);
  }
  setText();
};

//替换所有内容
function replaceAll(string, search, replace) {
  return string.split(search).join(replace);
}

// 百度搜索
rm.searchBaidu = function () {
  anzhiyu.snackbarShow("即将跳转到百度搜索", false, 2000);
  setTimeout(function () {
    window.open("https://www.baidu.com/s?wd=" + selectTextNow);
  }, "2000");
  rm.hideRightMenu();
};

//分享链接
rm.copyLink = function () {
  rm.rightmenuCopyText(domhref);
  anzhiyu.snackbarShow("已复制链接地址");
};

rm.updateMusicInfo = function () {
  // 获取名称和作者的 span 元素
  const nameSpan = document.querySelector("#name");
  const artistSpan = document.querySelector("#artist");

  if (!nameSpan || !artistSpan) {
    console.error("未找到歌曲名称和作者");
    return;
  }

  // 获取当前播放的歌曲信息
  const name = anzhiyu.musicGetName();
  const artist = anzhiyu.musicGetauthor();

  // 将歌曲名称和作者写入到 span 元素
  nameSpan.textContent = name || 'Unknown'; // 显示歌曲名称，默认"Unknown"
  artistSpan.textContent = artist || 'Unknown'; // 显示作者名称，默认"Unknown"
}

const volumeSlider = document.getElementById("volume-slider");
const sliderRail = volumeSlider.querySelector('#slider-rail');
const sliderProcess = volumeSlider.querySelector('#slider-process');
const sliderDot = volumeSlider.querySelector('#slider-dot');

rm.updateVolumeSlider = function () {
  // 获取相关元素
  const volume = navMusicEl.querySelector("meting-js").aplayer.volume();

  // 确保音量在 0 到 1 之间
  const validVolume = Math.min(Math.max(volume, 0), 1);

  // 计算滑块的位置
  const railRect = sliderRail.getBoundingClientRect();
  const dotWidth = sliderDot.clientWidth;
  const sliderWidth = railRect.width;

  // 更新滑块的位置和进度条的宽度
  sliderProcess.style.width = `${validVolume * 100}%`;
  // sliderDot.style.left = `${validVolume * 100}%`;

  // 计算滑块的位置，使其不会超出滑条边界
  const dotPosition = validVolume * sliderWidth;
  const limitedPosition = Math.min(Math.max(dotPosition - dotWidth / 2, 3), 82);
  sliderDot.style.left = `${limitedPosition}px`;
}

function initializeSliderEvents() {
  let isDragging = false;

  function handleSliderMove(event) {
    const railRect = sliderRail.getBoundingClientRect();
    const position = event.clientX;
    const volume = Math.min(Math.max((position - railRect.left) / railRect.width, 0), 1);
    
    navMusicEl.querySelector("meting-js").aplayer.volume(volume);
    rm.updateVolumeSlider();
  }

  sliderRail.addEventListener('click', function (event) {
    if (!isDragging) {
      sliderDot.style.transition = 'left 0.3s';
      sliderProcess.style.transition = 'width 0.3s';
      handleSliderMove(event);
    }
  });

  sliderDot.addEventListener('mousedown', function (event) {
    isDragging = true;
    sliderDot.style.transition = 'none';
    sliderProcess.style.transition = 'none';
    event.preventDefault();

    function onMouseMove(event) {
      handleSliderMove(event);
    }

    function onMouseUp() {
      isDragging = false;
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    }

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  });
}

function addRightMenuClickEvent() {
  // 添加点击事件
  document.getElementById("menu-backward").addEventListener("click", function () {
    window.history.back();
    rm.hideRightMenu();
  });

  document.getElementById("menu-forward").addEventListener("click", function () {
    window.history.forward();
    rm.hideRightMenu();
  });

  document.getElementById("menu-refresh").addEventListener("click", function () {
    window.location.reload();
  });

  document.getElementById("menu-top").addEventListener("click", function () {
    anzhiyu.scrollToDest(0, 500);
    rm.hideRightMenu();
  });

  document.getElementById("menu-translate").addEventListener("click", function () {
    window.translateFn.translatePage();
    rm.hideRightMenu();
  });

  const menuLinks = document.querySelectorAll(".menu-link");
  menuLinks.forEach(function (link) {
    link.addEventListener("click", rm.hideRightMenu);
  });

  document.getElementById("menu-home") &&
    document.getElementById("menu-home").addEventListener("click", function () {
      window.location.href = window.location.origin;
    });

  document.getElementById("menu-randomPost").addEventListener("click", function () {
    toRandomPost();
  });

  document.getElementById("menu-commentBarrage").addEventListener("click", anzhiyu.switchCommentBarrage);

  document.getElementById("rightmenu-mask").addEventListener("click", rm.hideRightMenu);

  document.getElementById("rightmenu-mask").addEventListener("contextmenu", function (event) {
    rm.hideRightMenu();
    event.preventDefault(); // Prevent the default context menu from appearing
  });

  document.getElementById("menu-copy").addEventListener("click", () => {
    rm.copyPageUrl();
  });

  document.getElementById("menu-pastetext").addEventListener("click", rm.pasteText);

  document.getElementById("menu-copytext").addEventListener("click", function () {
    rm.rightmenuCopyText(selectTextNow);
    const copyright = GLOBAL_CONFIG.copyright;
    if (copyright.copy) {
      anzhiyu.snackbarShow(copyright.languages.copySuccess);
    }
  });

  document.getElementById("menu-commenttext").addEventListener("click", function () {
    rm.rightMenuCommentText(selectTextNow);
  });

  document.getElementById("menu-newwindow").addEventListener("click", function () {
    window.open(domhref, "_blank");
    rm.hideRightMenu();
  });

  document.getElementById("menu-copylink").addEventListener("click", rm.copyLink);

  document.getElementById("menu-downloadimg").addEventListener("click", function () {
    anzhiyu.downloadImage(domImgSrc, "anzhiyu");
  });

  document.getElementById("menu-newwindowimg").addEventListener("click", function () {
    window.open(domImgSrc, "_blank");
    rm.hideRightMenu();
  });

  document.getElementById("menu-copyimg").addEventListener("click", function () {
    rm.writeClipImg(domImgSrc);
  });

  document.getElementById("menu-searchBaidu").addEventListener("click", rm.searchBaidu);

  //音乐
  document.getElementById("menu-music-volume-up").addEventListener("click", anzhiyu.musicVolumeUp);

  document.getElementById("menu-music-volume-down").addEventListener("click", anzhiyu.musicVolumeDown);

  document.getElementById("menu-music-toggle").addEventListener("click", anzhiyu.musicToggle);

  document.getElementById("menu-music-back").addEventListener("click", anzhiyu.musicSkipBack);

  document.getElementById("menu-music-forward").addEventListener("click", anzhiyu.musicSkipForward);

  document.getElementById("menu-music-copyMusicName").addEventListener("click", function () {
    rm.rightmenuCopyText(anzhiyu.musicGetName());
    anzhiyu.snackbarShow("复制歌曲名称成功", false, 3000);
  });
}

addRightMenuClickEvent();
initializeSliderEvents();

修改主题JS

修改[Blogroot]\themes\anzhiyu\source\js\utils.js文件：

  //切换音乐播放状态
  musicToggle: function (changePaly = true) {
    if (!anzhiyu_musicFirst) {
      anzhiyu.musicBindEvent();
      anzhiyu_musicFirst = true;
    }
    let msgPlay = '<i class="anzhiyufont anzhiyu-icon-play"></i><span>播放音乐</span>';
    let msgPause = '<i class="anzhiyufont anzhiyu-icon-pause"></i><span>暂停音乐</span>';
    if (anzhiyu_musicPlaying) {
      navMusicEl.classList.remove("playing");
-     document.getElementById("menu-music-toggle").innerHTML = msgPlay;
      document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停";
      document.querySelector("#consoleMusic").classList.remove("on");
      anzhiyu_musicPlaying = false;
      navMusicEl.classList.remove("stretch");
    } else {
      navMusicEl.classList.add("playing");
-     document.getElementById("menu-music-toggle").innerHTML = msgPause;
      document.querySelector("#consoleMusic").classList.add("on");
      anzhiyu_musicPlaying = true;
      navMusicEl.classList.add("stretch");
    }
    if (changePaly) document.querySelector("#nav-music meting-js").aplayer.toggle();
-   rm && rm.hideRightMenu();
  },
  // 音乐伸缩
  musicTelescopic: function () {
    if (navMusicEl.classList.contains("stretch")) {
      navMusicEl.classList.remove("stretch");
    } else {
      navMusicEl.classList.add("stretch");
    }
  },

  //音乐上一曲
  musicSkipBack: function () {
    navMusicEl.querySelector("meting-js").aplayer.skipBack();
-   rm && rm.hideRightMenu();
+   rm.updateMusicInfo();
  },

  //音乐下一曲
  musicSkipForward: function () {
    navMusicEl.querySelector("meting-js").aplayer.skipForward();
-   rm && rm.hideRightMenu();
+   rm.updateMusicInfo();
  },

+ // 增加音量
+ musicVolumeUp: function () {
+   navMusicEl.querySelector("meting-js").aplayer.volume(
+     Math.min(navMusicEl.querySelector("meting-js").aplayer.volume() + 0.1, 1)
+   );
+   rm.updateVolumeSlider();
+ },
+
+ // 减少音量
+ musicVolumeDown: function () {
+   navMusicEl.querySelector("meting-js").aplayer.volume(
+     Math.max(navMusicEl.querySelector("meting-js").aplayer.volume() - 0.1, 0)
+   );
+   rm.updateVolumeSlider();
+ },

  //获取音乐中的名称
  musicGetName: function () {
-   var x = document.querySelector(".aplayer-title");
-   var arr = [];
-   for (var i = x.length - 1; i >= 0; i--) {
-     arr[i] = x[i].innerText;
-   }
-   return arr[0];
+   return x.innerText;
  },
+
+ //获取音乐中的作者
+ musicGetauthor: function () {
+   var x = document.querySelector(".aplayer-author");
+   var composer = x.innerText.trim().replace(/^-\s*|\s*-\s*/g, '');
+   return composer;
+ },

修改[Blogroot]\themes\anzhiyu\source\js\main.js文件：

  // 监听nav是否被其他音频暂停⏸️
  const listenNavMusicPause = function () {
    const timer = setInterval(() => {
      if (navMusicEl && navMusicEl.querySelector("#nav-music meting-js").aplayer) {
        clearInterval(timer);
        let msgPlay = '<i class="anzhiyufont anzhiyu-icon-play"></i><span>播放音乐</span>';
        let msgPause = '<i class="anzhiyufont anzhiyu-icon-pause"></i><span>暂停音乐</span>';
        navMusicEl.querySelector("#nav-music meting-js").aplayer.on("pause", function () {
          navMusicEl.classList.remove("playing");
-         document.getElementById("menu-music-toggle").innerHTML = msgPlay;
+         let menuMusicToggle  = document.getElementById("menu-music-toggle");
+         let iconElement = menuMusicToggle.querySelector('i');
+         iconElement.className = 'iconfont icon-play';
          document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停";
          document.querySelector("#consoleMusic").classList.remove("on");
          anzhiyu_musicPlaying = false;
          navMusicEl.classList.remove("stretch");
        });
        navMusicEl.querySelector("#nav-music meting-js").aplayer.on("play", function () {
          navMusicEl.classList.add("playing");
-         document.getElementById("menu-music-toggle").innerHTML = msgPause;
+         let menuMusicToggle  = document.getElementById("menu-music-toggle");
+         let iconElement = menuMusicToggle.querySelector('i');
+         iconElement.className = 'iconfont icon-pause';
          document.querySelector("#consoleMusic").classList.add("on");
          anzhiyu_musicPlaying = true;
          // navMusicEl.classList.add("stretch");
        });
      }
    }, 16);
  };

拓展修改

如果你还按照文章添加白天夜间模式转换动画进行了修改，那么需要修改[Blogroot]\themes\anzhiyu\source\js\sun_moon.js文件，不然右键菜单中的昼夜模式切换选项会始终显示深色模式：

function switchNightMode() {
  document.querySelector("body").insertAdjacentHTML("beforeend", '<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"><div id="sun"></div><div id="moon"></div></div></div>');
+ $rightMenu = document.getElementById("rightMenu");
+ const menuDarkmodeText = $rightMenu.querySelector(".menu-darkmode-text");

  setTimeout(() => {
    if (document.querySelector("body").classList.contains("DarkMode")) {
      document.querySelector("body").classList.remove("DarkMode");
      localStorage.setItem("isDark", "0");
      document.getElementById("modeicon").setAttribute("xlink:href", "#icon-moon");
    } else {
      document.querySelector("body").classList.add("DarkMode");
      localStorage.setItem("isDark", "1");
      document.getElementById("modeicon").setAttribute("xlink:href", "#icon-sun");
    }

    setTimeout(() => {
      document.getElementsByClassName("Cuteen_DarkSky")[0].style.transition = "opacity 3s";
      document.getElementsByClassName("Cuteen_DarkSky")[0].style.opacity = "0";
      setTimeout(() => {
        document.getElementsByClassName("Cuteen_DarkSky")[0].remove();
      }, 1000);
    }, 2000);
  });

  if ("light" === ("dark" === document.documentElement.getAttribute("data-theme") ? "dark" : "light")) {
    document.getElementById("sun").style.opacity = "1";
    document.getElementById("moon").style.opacity = "0";
    setTimeout(() => {
      document.getElementById("sun").style.opacity = "0";
      document.getElementById("moon").style.opacity = "1";
    }, 1000);

    activateDarkMode();
    saveToLocal.set("theme", "dark", 2);
    document.getElementById("modeicon").setAttribute("xlink:href", "#icon-sun");
+   menuDarkmodeText.textContent = "浅色模式";

    setTimeout(() => {
      if (GLOBAL_CONFIG.Snackbar !== undefined) {
        anzhiyu.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night);
      }
    }, 2000);
  } else {
    document.getElementById("sun").style.opacity = "0";
    document.getElementById("moon").style.opacity = "1";
    setTimeout(() => {
      document.getElementById("sun").style.opacity = "1";
      document.getElementById("moon").style.opacity = "0";
    }, 1000);

    activateLightMode();
    saveToLocal.set("theme", "light", 2);
    document.querySelector("body").classList.add("DarkMode");
    document.getElementById("modeicon").setAttribute("xlink:href", "#icon-moon");
+   menuDarkmodeText.textContent = "深色模式";

    setTimeout(() => {
      if (GLOBAL_CONFIG.Snackbar !== undefined) {
        anzhiyu.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day);
      }
    }, 2000);
  }

  if (typeof utterancesTheme === "function") utterancesTheme();
  if (typeof FB === "object") window.loadFBComment();
  if (window.DISQUS && document.getElementById("disqus_thread").children.length) setTimeout(() => window.disqusReset(), 200);
}