Anzhiyu主题主控台添加右键菜单开关

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

写在前面

AnZhiYu主题开启右键菜单后，关闭右键菜单的功能隐藏在快捷键中，不容易发现，于是我在中控台的按钮中添加了一个开关，方便用户开启或关闭右键菜单。

样式预览

修改步骤

添加按钮

此处的iconfont.icon-list为我自己添加的字体，请根据你网页的字体情况修改。

修改[Blogroot]\themes\anzhiyu\layout\includes\anzhiyu\console.pug：

    if theme.comment_barrage_config.enable
      .console-btn-item.on#consoleCommentBarrage(onclick='anzhiyu.switchCommentBarrage()', title='热评开关')
        a.commentBarrage
          i.anzhiyufont.anzhiyu-icon-message
+   if theme.rightClickMenu.enable
+     .console-btn-item#consoleRightMenu(onclick='anzhiyu.rightMenuToggle()', title='右键菜单开关')
+       a.rightMenu-switch
+         i.iconfont.icon-list
    if theme.nav_music.enable
      .console-btn-item#consoleMusic(onclick='anzhiyu.musicToggle()', title='音乐开关')
        a.music-switch
          i.anzhiyufont.anzhiyu-icon-music

修改JS

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

  keyboardToggle: function () {
    const isKeyboardOn = anzhiyu_keyboard;

    if (isKeyboardOn) {
      const consoleKeyboard = document.querySelector("#consoleKeyboard");
      consoleKeyboard.classList.remove("on");
      anzhiyu_keyboard = false;
    } else {
      const consoleKeyboard = document.querySelector("#consoleKeyboard");
      consoleKeyboard.classList.add("on");
      anzhiyu_keyboard = true;
    }

    localStorage.setItem("keyboardToggle", isKeyboardOn ? "false" : "true");
  },
  rightMenuToggle: function () {
+   const isRightMenuOn = anzhiyu_rightMenu;
+
+   if (!consolRightMenu) {
+     anzhiyu_rightMenu = true;
+   }
+
+   if (isRightMenuOn) {
+     const consolRightMenu = document.querySelector("#consoleRightMenu");
+     consolRightMenu.classList.remove("on");
+     anzhiyu_rightMenu = false;
+     window.oncontextmenu = null;
+   } else { 
+     const consolRightMenu = document.querySelector("#consoleRightMenu");
+     consolRightMenu.classList.add("on");  
+     anzhiyu_rightMenu = true;
+     window.oncontextmenu = oncontextmenuFunction;
+   }
-   if (window.oncontextmenu) {
-     window.oncontextmenu = null;
-   } else if (!window.oncontextmenu && oncontextmenuFunction) {
-     window.oncontextmenu = oncontextmenuFunction;
-   }
+   localStorage.setItem("rightMenuToggle", isRightMenuOn ? "false" : "true");
  },
  switchConsole: () => {
    // switch console
    const consoleEl = document.getElementById("console");
    //初始化隐藏边栏
    const $htmlDom = document.documentElement.classList;
    $htmlDom.contains("hide-aside")
      ? document.querySelector("#consoleHideAside").classList.add("on")
      : document.querySelector("#consoleHideAside").classList.remove("on");
    if (consoleEl.classList.contains("show")) {
      consoleEl.classList.remove("show");
    } else {
      consoleEl.classList.add("show");
    }

+   const consolRightMenu = document.querySelector("#consoleRightMenu");
+
+   if (consolRightMenu) {
+     if (localStorage.getItem("rightMenuToggle") === "true") {
+       consolRightMenu.classList.add("on");
+       anzhiyu_rightMenu = true;
+     } else {
+       consolRightMenu.classList.remove("on");
+       anzhiyu_rightMenu = false;
+     }
+   }

    const consoleKeyboard = document.querySelector("#consoleKeyboard");

    if (consoleKeyboard) {
      if (localStorage.getItem("keyboardToggle") === "true") {
        consoleKeyboard.classList.add("on");
        anzhiyu_keyboard = true;
      } else {
        consoleKeyboard.classList.remove("on");
        anzhiyu_keyboard = false;
      }
    }
  },

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

    GLOBAL_CONFIG.islazyload && lazyloadImg();
    GLOBAL_CONFIG.copyright !== undefined && addCopyright();
    GLOBAL_CONFIG.navMusic && listenNavMusicPause();
+   if (document.getElementById("consoleRightMenu")) {
+     localStorage.setItem("rightMenuToggle", "true");
+     document.getElementById("consoleRightMenu").classList.add("on");
+     anzhiyu_rightMenu = true;
+   }
    if (GLOBAL_CONFIG.shortcutKey && document.getElementById("consoleKeyboard")) {
      localStorage.setItem("keyboardToggle", "true");
      document.getElementById("consoleKeyboard").classList.add("on");
      anzhiyu_keyboard = true;
      executeShortcutKeyFunction();
    }

拓展修改

试试在右键菜单中直接加入关闭选项，这样用户不用打开主控台也能关闭右键菜单了。

样式预览

打开预览

修改步骤

修改[Blogroot]\themes\anzhiyu\source\js\utils.js，防止anzhiyu_rightMenu未定义，并且加入rm.hideRightMenu()用以关闭已经打开的菜单：

  rightMenuToggle: function () {
+   if (typeof anzhiyu_rightMenu === 'undefined') {
+     anzhiyu_rightMenu = window.oncontextmenu !== null;
+   }
    const isRightMenuOn = anzhiyu_rightMenu;

    if (isRightMenuOn) {
+     rm && rm.hideRightMenu();
      const consolRightMenu = document.querySelector("#consoleRightMenu");
      consolRightMenu.classList.remove("on");
      anzhiyu_rightMenu = false;
      window.oncontextmenu = null;
    } else { 
      const consolRightMenu = document.querySelector("#consoleRightMenu");
      consolRightMenu.classList.add("on");  
      anzhiyu_rightMenu = true;
      window.oncontextmenu = oncontextmenuFunction;
    }

修改[Blogroot]\themes\anzhiyu\layout\includes\anzhiyu\rightmenu.pug：

    a.rightMenu-item#menu-translate(href='javascript:void(0);')
      i.anzhiyufont.anzhiyu-icon-language
      span=translate.rightMenuMsgDefault
+   a.rightMenu-item#menu-rightMenuToggle(onclick='anzhiyu.rightMenuToggle();')
+     i.iconfont.icon-list
+     span 关闭右键菜单
#rightmenu-mask