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

原版链接

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

效果预览

本站样式(Acrylic风格)

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

我做了什么?

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

增加一个超链接样式

增加繁简切换功能

图标使用font awesome

样式兼容Acrylic

本站样式

安装教程

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#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文件引入布局文件中(本段代码引用原教程)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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:[email protected]/rightmenu/rightmenu.css">

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

1
<link rel="stylesheet" type="text/css" href="https:[email protected]/mainColor/heoMainColor.css">

JS

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

1
2
<script src="https:[email protected]/dist/jquery.min.js"></script>
<script async data-pjax src="https:[email protected]/rightmenu/rightmenu.js"></script>