Butterfly魔改：自定义右键菜单

看到很多魔改的小伙伴都自定义了右键菜单，例如糖果屋的saoUI右键菜单、volantis的右键菜单等等。最近发现DoraKika写了个右键菜单，风格简洁，看起来难度不大，所以修改了个样式就移植过来了。

原版链接

本文魔改根据这个教程进行的二次修改。想要魔改的小伙伴可以参考这篇文章的教程来。

效果预览

本站样式（Acrylic风格）

因为还没来得及移植比较多的功能，所以就先上这三个功能了。以后可能将一些文章链接放在里面。

我做了什么？

增加一个右键菜单的遮罩，防止在有菜单的情况下还能点击页面。

增加一个超链接样式

增加繁简切换功能

图标使用font awesome

样式兼容Acrylic

本站样式

安装教程

可以参考这个教程进行安装。本文只包含文件内容。

...butterfly/layout/includes/dorakika/rightmenu.pug

#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
        a.rightMenu-item#menu-radompage(href='/random.html')
            i.fa-solid.fa-shoe-prints
            span='随便逛逛'
        .rightMenu-item#menu-darkmode
            i.fa-solid.fa-moon
            span='切换模式'
        .rightMenu-item#menu-translate
            i.fa-solid.fa-earth-asia
            span='繁简切换'
#rightmenu-mask(onclick='RemoveRightMenu()')

将pug文件引入布局文件中(本段代码引用原教程)

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  head
    include ./head.pug
  body
    ...

    else
      include ./404.pug

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

CSS

可以在主题配置文件中加入此代码。

1	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/rightmenu/rightmenu.css">

如果没有引用过heoMainColor.css需要引用

1	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/mainColor/heoMainColor.css">

JS

可以在主题配置文件中加入此代码。

1 2	<script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script> <script async data-pjax src="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/rightmenu/rightmenu.js"></script>