如何在Butterfly主题中自定义右键：一次解决所有麻烦

如果你已经看过我以前写的右键菜单功能了，那么这篇教程在食用的时候将会变得十分简单。

具体效果自行右键查看。

由于本教程需要修改的地方较多，集成度较高，可以自行选择其中部分功能，本教程代码资源来自Heo。

步骤

新建themes/butterfly/source/custom/rightmenu.js

// 初始化函数
var rm = {};
var navFn = {
    switchDarkMode: () => { // Switch Between Light And Dark Mode
        const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
        if (nowMode === 'light') {
            activateDarkMode()
            saveToLocal.set('theme', 'dark', 2)
            GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night, false, 2000)
        } else {
            activateLightMode()
            saveToLocal.set('theme', 'light', 2)
            GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day, false, 2000)
        }
        // handle some cases
        typeof utterancesTheme === 'function' && utterancesTheme();
        typeof FB === 'object' && window.loadFBComment();
        window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
    }
}
// 私有函数
var Jay = {
    // 检测显示模式
    darkModeStatus: function () {
        let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
        if (theme == 'light') {
            $(".menu-darkmode-text").text("深色模式");
        }else {
            $(".menu-darkmode-text").text("浅色模式");
        }
    },
    // 下载图片
    downloadImage: function(imgsrc, name) { //下载图片地址和图片名
        rm.hideRightMenu();
        if (rm.downloadimging == false) {
            rm.downloadimging = true;
            btf.snackbarShow('正在下载中，请稍后',false,10000)
            setTimeout(function(){
                let image = new Image();
                // 解决跨域 Canvas 污染问题
                image.setAttribute("crossOrigin", "anonymous");
                image.onload = function() {
                    let canvas = document.createElement("canvas");
                    canvas.width = image.width;
                    canvas.height = image.height;
                    let context = canvas.getContext("2d");
                    context.drawImage(image, 0, 0, image.width, image.height);
                    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                    let a = document.createElement("a"); // 生成一个a元素
                    let event = new MouseEvent("click"); // 创建一个单击事件
                    a.download = name || "photo"; // 设置图片名称
                    a.href = url; // 将生成的URL设置为a.href属性
                    a.dispatchEvent(event); // 触发a的单击事件
                };
                image.src = imgsrc;
                btf.snackbarShow('图片已添加盲水印，请遵守版权协议');
                rm.downloadimging = false;
            }, "10000");
        }else{
            btf.snackbarShow('有正在进行中的下载，请稍后再试');
        }
    },
}

//禁止图片拖拽
rm.stopdragimg=$("img");
rm.stopdragimg.on("dragstart",function(){return false;});

// 显示菜单
rm.showRightMenu = function(isTrue, x=0, y=0){
    let $rightMenu = $('#rightMenu');
    $rightMenu.css('top',x+'px').css('left',y+'px');
    if(isTrue){
        $rightMenu.show();
        stopMaskScroll()
    }else{
        $rightMenu.hide();
    }
}

// 隐藏菜单
rm.hideRightMenu = function(){
    rm.showRightMenu(false);
    $('#rightmenu-mask').attr('style','display: none');
}

// 尺寸
var rmWidth = $('#rightMenu').width();
var rmHeight = $('#rightMenu').height();

// 重新定义尺寸
rm.reloadrmSize = function(){
    rmWidth = $('#rightMenu').width();
    rmHeight = $('#rightMenu').height();
}

// 获取点击的href
var domhref = '';
var domImgSrc = '';
var globalEvent = null;

// 监听右键初始化
window.oncontextmenu = function(event){
    if(document.body.clientWidth > 768){
        let pageX = event.clientX + 10;	//加10是为了防止显示时鼠标遮在菜单上
        let pageY = event.clientY;
        // console.log(event);

        //其他额外菜单
        let $rightMenuOther = $('.rightMenuOther');
        let $rightMenuPlugin = $('.rightMenuPlugin');
        let $rightMenuCopyText = $('#menu-copytext');
        let $rightMenuPasteText = $('#menu-pastetext');
        let $rightMenuCommentText = $('#menu-commenttext');
        let $rightMenuNewWindow = $('#menu-newwindow');
        let $rightMenuCopyLink = $('#menu-copylink');
        let $rightMenuCopyImg = $('#menu-copyimg');
        let $rightMenuDownloadImg = $('#menu-downloadimg');
        let $rightMenuSearch = $('#menu-search');
        let $rightMenuSearchBaidu = $('#menu-searchBaidu');
        let $rightMenuMusicToggle = $('#menu-music-toggle');
        let $rightMenuMusicBack = $('#menu-music-back');
        let $rightMenuMusicForward = $('#menu-music-forward');
        let $rightMenuMusicPlaylist = $('#menu-music-playlist');
        let $rightMenuMusicCopyMusicName = $('#menu-music-copyMusicName');
        let href = event.target.href;
        let imgsrc = event.target.currentSrc;

        // 判断模式 扩展模式为有事件
        let pluginMode = false;
        $rightMenuOther.show();
        globalEvent = event;

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

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

        //检查是否需要复制图片
        if(imgsrc){
            pluginMode = true;
            $rightMenuCopyImg.show();
            $rightMenuDownloadImg.show();
            domImgSrc = imgsrc;
        }else{
            $rightMenuCopyImg.hide();
            $rightMenuDownloadImg.hide();
        }

        // 判断是否为输入框
        if (event.target.tagName.toLowerCase() === 'input' || event.target.tagName.toLowerCase() === 'textarea') {
            console.log('这是一个输入框')
            pluginMode = true;
            $rightMenuPasteText.show();
        }else{
            $rightMenuPasteText.hide();
        }

        //判断是否是音乐
        if (event.target.nodeName == "METING-JS") {
            console.log('这是一个音乐');
            pluginMode = true;
            $rightMenuMusicToggle.show();
            $rightMenuMusicBack.show();
            $rightMenuMusicForward.show();
            $rightMenuMusicPlaylist.show();
            $rightMenuMusicCopyMusicName.show();
        }else {
            $rightMenuMusicToggle.hide();
            $rightMenuMusicBack.hide();
            $rightMenuMusicForward.hide();
            $rightMenuMusicPlaylist.hide();
            $rightMenuMusicCopyMusicName.hide()
        }

        // 如果不是扩展模式则隐藏扩展模块
        if (pluginMode){
            $rightMenuOther.hide();
            $rightMenuPlugin.show();
        }else{
            $rightMenuPlugin.hide()
        }

        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);
        $('#rightmenu-mask').attr('style','display: flex');
        return false;
    }
};

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

// 复制图片到剪贴板
rm.writeClipImg = function (imgsrc) {
    console.log('按下复制');
    rm.hideRightMenu();
    btf.snackbarShow('正在下载中，请稍后',false,10000)
    if(rm.downloadimging == false){
        rm.downloadimging = true;
        setTimeout(function(){
            copyImage(imgsrc);
            btf.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.switchDarkMode = function() {
    navFn.switchDarkMode();
    rm.hideRightMenu();
    Jay.darkModeStatus();
}

rm.copyUrl = function(id) {
    $("body").after("<input id='copyVal'></input>");
    var text = id;
    var input = document.getElementById("copyVal");
    input.value = text;
    input.select();
    input.setSelectionRange(0, input.value.length);
    document.execCommand("copy");
    $("#copyVal").remove();
}

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

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

rm.copyPageUrl = function(){
    var url = window.location.href;
    rm.copyUrl(url);
    btf.snackbarShow('复制本页链接地址成功',false,2000);
    rm.hideRightMenu();
}

rm.sharePage = function(){
    var content = window.location.href;
    rm.copyUrl(url);
    btf.snackbarShow('复制本页链接地址成功',false,2000);
    rm.hideRightMenu();
}

// 复制当前选中文本
var selectTextNow = '';
document.onmouseup = document.ondbclick= selceText;
function selceText(){
    var txt;
    if(document.selection){
        txt = document.selection.createRange().text;
    }else{
        txt = window.getSelection()+'';
    }
    if(txt){
        selectTextNow = txt;
        // console.log(selectTextNow);
    }else{
        selectTextNow = '';
    }
}

// 读取剪切板
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();
    var input = document.getElementsByClassName('el-textarea__inner')[0];
    let evt = document.createEvent('HTMLEvents');
    evt.initEvent('input', true, true);
    let inputValue = replaceAll(txt,'\n','\n> ')
    input.value = '> ' + inputValue + '\n\n';
    input.dispatchEvent(evt);
    var domTop = document.querySelector("#post-comment").offsetTop;
    window.scrollTo(0,domTop - 80);
    input.focus();
    input.setSelectionRange(-1,-1);
    if (document.getElementById("comment-tips")) {
        document.getElementById("comment-tips").classList.add("show");
    }
}

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

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

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

function addRightMenuClickEvent(){
    // 添加点击事件
    $('#menu-backward').on('click',function(){window.history.back();rm.hideRightMenu();});
    $('#menu-forward').on('click',function(){window.history.forward();rm.hideRightMenu();});
    $('#menu-refresh').on('click',function(){window.location.reload();});
    $('#menu-top').on('click',function(){btf.scrollToDest(0, 500);rm.hideRightMenu();});
    $('.menu-link').on('click',rm.hideRightMenu);
    $('#menu-darkmode').on('click',rm.switchDarkMode);
    $('#menu-home').on('click',function(){window.location.href = window.location.origin;});
    $('#menu-randomPost').on('click',function(){toRandomPost()});
    $('#menu-commentBarrage').on('click',Jay.switchCommentBarrage);
    $('#rightmenu-mask').on('click',rm.hideRightMenu);
    $('#rightmenu-mask').contextmenu(function(){
        rm.hideRightMenu();
        return false;
    });
    $('#menu-translate').on('click',function(){
        rm.hideRightMenu();
        translateInitialization();
    });
    $('#menu-copy').on('click', rm.copyPageUrl);
    $('#menu-pastetext').on('click',rm.pasteText);
    $('#menu-copytext').on('click',function(){rm.rightmenuCopyText(selectTextNow);btf.snackbarShow('复制成功，复制和转载请标注本文地址');});
    $('#menu-commenttext').on('click',function(){rm.rightMenuCommentText(selectTextNow);});
    $('#menu-newwindow').on('click',function(){window.open(domhref);rm.hideRightMenu();});
    $('#menu-copylink').on('click',rm.copyLink);
    $('#menu-downloadimg').on('click',function(){Jay.downloadImage(domImgSrc,'Jay');});
    $('#menu-copyimg').on('click',function(){rm.writeClipImg(domImgSrc);});
    $('#menu-searchBaidu').on('click',rm.searchBaidu);
    //音乐
    $('#menu-music-toggle').on('click',Jay.musicToggle);
    $('#menu-music-back').on('click',Jay.musicSkipBack);
    $('#menu-music-forward').on('click',Jay.musicSkipForward);
    $('#menu-music-copyMusicName').on('click',function(){rm.rightmenuCopyText(Jay.musicGetName());btf.snackbarShow('复制歌曲名称成功',false,3000);});
}

新建themes/butterfly/layout/includes/rightmenu.pug文件

.js-pjax
    #rightMenu
        .rightMenu-group.rightMenu-small
            .rightMenu-item#menu-backward
                i.fa-solid.fa-arrow-left
            .rightMenu-item#menu-forward
                i.fa-solid.fa-arrow-right
            .rightMenu-item#menu-refresh
                i.fa-solid.fa-arrow-rotate-right
            .rightMenu-item#menu-top
                i.fa-solid.fa-arrow-up
        .rightMenu-group.rightMenu-line.rightMenuPlugin
            .rightMenu-item#menu-copytext
                i.fas.fa-copy
                span 复制选中文本
            .rightMenu-item#menu-pastetext
                i.fas.fa-paste
                span 粘贴文本
            a.rightMenu-item#menu-commenttext
                i.fas.fa-comment-medical
                span 引用到评论
            .rightMenu-item#menu-newwindow
                i.fas.fa-window-restore
                span 新窗口打开
            .rightMenu-item#menu-copylink
                i.fas.fa-link
                span 复制链接地址
            .rightMenu-item#menu-copyimg
                i.fas.fa-images
                span 复制此图片
            .rightMenu-item#menu-downloadimg
                i.fas.fa-download
                span 下载此图片
            .rightMenu-item#menu-search
                i.fa-solid.fa-magnifying-glass
                span 站内搜索
            .rightMenu-item#menu-searchBaidu
                i.fa-solid.fa-magnifying-glass
                span 百度搜索
        .rightMenu-group.rightMenu-line.rightMenuOther
            a.rightMenu-item.menu-link#menu-randomPost
                i.fas.fa-shuffle
                span 随便逛逛
            a.rightMenu-item.menu-link(href='/categories/')
                i.fas.fa-cube
                span 博客分类
            a.rightMenu-item.menu-link(href='/tags/')
                i.fas.fa-tags
                span 文章标签
        .rightMenu-group.rightMenu-line
            a.rightMenu-item.menu-link(href='/privacy/')
                i.fa-solid.fa-hand
                span 隐私协议
            a.rightMenu-item.menu-link(href='/cc/')
                i.fa-solid.fa-closed-captioning
                span 版权协议
        .rightMenu-group.rightMenu-line.rightMenuOther
            .rightMenu-item#menu-copy
                i.fas.fa-copy
                span 复制地址
            .rightMenu-item#menu-darkmode
                i.fa-solid.fa-moon
                span.menu-darkmode-text 显示模式
            .rightMenu-item#menu-translate
                i.fas.fa-language
                span 轉為繁體
    #rightmenu-mask

在themes/butterfly/layout/includes/layout.pug文件中引入上述文件

    else
      include ./404.pug

    include ./rightside.pug
    !=partial('includes/third-party/search/index', {}, {cache: true})
    //- 引入右键
+    include ./rightmenu.pug
    include ./additional-js.pug

在自己创建的自定义css文件中引入右键菜单样式，没有的可以新建themes/butterfly/source/custom/custom.css，里面的样式变量可以参考博客魔改前置教程

#rightMenu {
    display: none;
    position: fixed;
    padding: 0 0.25rem;
    width: 9rem;
    height: fit-content;
    top: 10%;
    left: 10%;
    background-color: var(--Jay-maskbgdeep);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--Jay-fontcolor);
    border-radius: 12px;
    z-index: 99994;
    border: var(--style-border);
    user-select: none;
    box-shadow: var(--Jay-shadow-black);
}

#rightMenu:hover {
    border: var(--style-border-hover);
    box-shadow: var(--Jay-shadow-theme);
}

#rightMenu .rightMenu-group {
    padding: 0.35rem 0.3rem;
    transition: 0.3s;
}

#rightMenu .rightMenu-line {
    border-top: 1px dashed var(--Jay-theme-op);
}

#rightMenu .rightMenu-group.rightMenu-small {
    display: flex;
    justify-content: space-between;
}

#rightMenu .rightMenu-group .rightMenu-item {
    border-radius: 8px;
    transition: 0.3s;
    cursor: pointer;
}

#rightMenu .rightMenu-line .rightMenu-item {
    margin: 0.25rem 0;
    padding: 0.25rem 0;
}

#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
    display: flex;
}

#rightMenu .rightMenu-group .rightMenu-item:hover {
    background-color: var(--Jay-main);
    color: var(--Jay-white);
    box-shadow: var(--Jay-shadow-main);
}

#rightMenu .rightMenu-group .rightMenu-item:active {
    transform: scale(0.97);
}

#rightMenu .rightMenu-group .rightMenu-item i {
    display: inline-block;
    text-align: center;
    line-height: 1.5rem;
    width: 1.5rem;
    padding: 0 0.25rem;
}

#rightMenu .rightMenu-line .rightMenu-item i {
    margin: 0 0.25rem;
}

#rightMenu .rightMenu-group .rightMenu-item span {
    line-height: 1.5rem;
}

.rightMenu-small .rightMenu-item {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

#rightmenu-mask {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: none;
    top: 0;
    left: 0;
    display: none;
    z-index: 101;
    margin: 0 !important;
    z-index: 99993;
}

引入右键菜单js，如果是以前没有新建过css的，需要引入自定义css

inject:
  head:
    # - <link rel="stylesheet" href="">
    # 没有引入的需要引入，如果引入过就不需要了
    - <link rel="stylesheet" href="/custom/custom.css">

  bottom:
    - <script data-pjax='' src="/custom/rightmenu.js"></script>

至此，大部分都完成了，但是你可能会发现无法实现翻译功能，无法实现右键站内搜索，如果不需要这些功能的就不需要往下看了。

进阶

由于此部分需要修改源码，可以自行选择。

站内搜索只针对开启了Algolia的用户，本地的写法一样参考自行修改

右键翻译

修改themes/butterfly/source/js/tw_cn.js文件

  function translatePage () {
    if (targetEncoding === 1) {
      currentEncoding = 1
      targetEncoding = 2
      translateButtonObject.innerHTML = msgToTraditionalChinese
      saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
      translateBody()
      if (isSnackbar) btf.snackbarShow(snackbarData.cht_to_chs)
    } else if (targetEncoding === 2) {
      currentEncoding = 2
      targetEncoding = 1
      translateButtonObject.innerHTML = msgToSimplifiedChinese
      saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
      translateBody()
      if (isSnackbar) btf.snackbarShow(snackbarData.chs_to_cht)
    }
+    rm.hideRightMenu();
  }

修改引入资源路径

CDN:
  # The CDN provider of internal scripts (主题内部 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # Dev version can only choose. ( dev版的主题只能设置为 local )
  internal_provider: custom #local
  ...
  option:
    # main_css:
    # main: 
    # utils: 
    translate: /js/tw_cn.js

至此，实现右键菜单翻译功能。

右键搜索

修改source/js/search/algolia.js文件，大致在27行的位置（如果是4.3.0版本，其他暂不清楚）

const searchClickFn = () => {
    document.querySelector('#search-button > .search').addEventListener('click', openSearch)
+     $('#menu-search').on('click',function(){
+            rm.hideRightMenu();
+            openSearch();
+            let t=document.getElementsByClassName('ais-search-box--input')[0];
+            let evt = document.createEvent('HTMLEvents');
+            evt.initEvent('input', true, true);
+            t.value=selectTextNow;
+            t.dispatchEvent(evt);
+      });
 }

修改引入资源路径

CDN:
  # The CDN provider of internal scripts (主题内部 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # Dev version can only choose. ( dev版的主题只能设置为 local )
  internal_provider: custom #local
  ...
  option:
    # main_css:
    # main: 
    # utils: 
    translate: /js/tw_cn.js
    # local_search:
    algolia_js: /js/search/algolia.js