具体步骤
在
[Blogroot]\themes\butterfly\layout\includes\third-party\
目录下新建 galmenu.pug 文件,注意缩进。1
2
3
4
5
6
7
8#rightMenu
each MenuItem,index in theme.GalMenu.MenuGuoup
.rightMenu-group
each item in MenuItem.MenuItem
a.rightMenu-item.faa-parent.animated-hover(href=url_for(item.link),title=item.name,id=item.id)
i.fa.faa-tada(class=item.icon)
if index != 0
span.rightMenu-name=item.name修改
[Blogroot]\themes\butterfly\layout\includes\additional-js.pug
文件,在末尾添加内容(注意缩进), 注意 butterfly_v3.6.0 取消了缓存配置,转为完全默认,需要将 {cache:theme.fragment_cache} 改为 {cache: true}:1
2
3
4
5
6
7if theme.pjax.enable
!=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})
!=partial('includes/third-party/baidu_push', {}, {cache:theme.fragment_cache})
+ if theme.GalMenu.enable
+ !=partial('includes/third-party/galmenu', {}, {cache:theme.fragment_cache})在
[Blogroot]\themes\butterfly\source\css\layout\
目录下新建 galmenu.styl 文件。此处开头是默认图标配置。可以在配置项里更换自己喜欢的图标。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65/* rightMenu */
#rightMenu {
display: none;
position: fixed;
width: 160px;
height: fit-content;
top: 10%;
left: 10%;
background-color: var(--card-bg);
border: 1px solid var(--style-border);
border-radius: 8px;
z-index: 100;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.35);
}
#rightMenu .rightMenu-group {
padding: 7px 6px;
&:nth-child(1) {
display: flex;
align-items: center;
justify-content: space-around;
}
&:not(:nth-last-child(1)) {
border-bottom: 2px dashed var(--cyan-theme-color);
}
&:not(:nth-child(1)) .rightMenu-item {
margin: 0.25rem 0;
}
.rightMenu-item {
height: 30px;
line-height: 30px;
border-radius: 8px;
transition: 0.3s;
color: var(--font-color);
display: flex;
&:hover {
background-color: var(--text-bg-hover);
color: var(--cyan-white);
}
i {
display: inline-block;
text-align: center;
line-height: 30px;
width: 30px;
height: 30px;
padding: 0 5px;
}
span.rightMenu-name {
line-height: 30px;
margin-left: 5px;
letter-spacing: 5px;
}
}
}
.rightMenu-group.hide {
display: none;
}新建
[Blogroot]\themes\butterfly\source\js\custom\index.js
, 监听鼠标右键事件:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39let cyan = {};
cyan.showRightMenu = function (isTrue, x = 0, y = 0) {
let $rightMenu = $('#rightMenu');
$rightMenu.css('top', x + 'px').css('left', y + 'px');
if (isTrue) {
$rightMenu.show();
} else {
$rightMenu.hide();
}
}
// 右键菜单事件
if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.oncontextmenu = function (event) {
$('.rightMenu-group.hide').hide();
if (document.getSelection().toString()) {
$('#menu-tools').show();
}
if (event.ctrlKey) return true;
if (localStorage.getItem("right_menu_switch") === 'off') return true
let pageX = event.clientX + 10;
let pageY = event.clientY;
let rmWidth = $('#rightMenu').width();
let rmHeight = $('#rightMenu').height();
if (pageX + rmWidth > window.innerWidth) {
pageX -= rmWidth + 10;
}
if (pageY + rmHeight > window.innerHeight) {
pageY -= pageY + rmHeight - window.innerHeight;
}
cyan.showRightMenu(true, pageY, pageX);
return false;
};
window.addEventListener('click', function () { cyan.showRightMenu(false); });
}在
[Blogroot]\_config.butterfly.yml
添加如下配置项:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34# 自定义右键菜单
GalMenu:
enable: true # true or false 是否开启右键
MenuGuoup:
- MenuItem: #菜单配置
- name: 前进
icon: fa-solid fa-right-long
link: javascript:window.history.back()
- name: 后退
icon: fa-solid fa-arrow-left-long
link: javascript:window.history.forward()
- name: 刷新
icon: fa-solid fa-arrow-rotate-right
link: javascript:location.reload()
- name: 返回顶部
icon: fas fa-arrow-up
link: javascript:cyan.scrollToTop()
- MenuItem:
- name: 回到主页
icon: iconfont cyan-jia
link: '/'
- name: 文章列表
icon: iconfont cyan-riqi
link: '/archives/'
- name: 随便逛逛
icon: iconfont cyan-lvhang
link: '/random/'
- MenuItem:
- name: 昼夜模式
icon: fas fa-adjust
link: javascript:switchNightMode()
- name: 关闭右键
icon: fas fa-mouse
link: javascript:right_menu_switch()
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Cyan!
评论
您无需删除空行,直接评论以获取最佳展示效果