Hexo + Butterfly 自定义右键菜单

前言

本站基于Hexo搭建，用的 🦋 主题 ，已经升级到 。请注意最新的🦋 版本已经更新到 。

如果你是 的版本，请移步 站点进行浏览。

推荐阅读

效果

步骤

将以下代码复制到文件中。

#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-home
            i.fa-solid.fa-house
    .rightMenu-group.rightMenu-line.rightMenuOther
        a.rightMenu-item.menu-link(href='/archives/')
            i.fa-solid.fa-archive
            span='文章归档'
        a.rightMenu-item.menu-link(href='/categories/')
            i.fa-solid.fa-folder-open
            span='文章分类'
        a.rightMenu-item.menu-link(href='/tags/')
            i.fa-solid.fa-tags
            span='文章标签'
    .rightMenu-group.rightMenu-line.rightMenuNormal
        a.rightMenu-item.menu-link#menu-radompage(href='/random/index.html')
            i.fa-solid.fa-shoe-prints
            span='随便逛逛'
        .rightMenu-item#menu-translate
            i.fa-solid.fa-earth-asia
            span='繁简切换'
        .rightMenu-item#menu-darkmode
            i.fa-solid.fa-moon
            span='切换模式'
#rightmenu-mask

2. 在BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/layout.pug中引入上一步中创建的index.pug文件。
   具体位置如下图：
   
3. 在BlogRoot/node_modules/hexo-theme-butterfly/source/js文件夹下新建一个rightMenu.js，将以下代码复制到文件中。

let rm = {};
rm.showRightMenu = function (isTrue, x = 0, y = 0) {
    let $rightMenu = $('#rightMenu');
    $rightMenu.css('top', x + 'px').css('left', y + 'px');

    if (isTrue) {
        stopMaskScroll()
        $rightMenu.show();
    }