1. 效果预览
在本页面点击右键即可
2. 教程
第一步：在路径BlogRoot\themes\butterfly\layout\includes下新建一个rightmenu.pug文件，填入以下代码
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
| #rightMenu
.rightMenu-group.rightMenu-small
a.rightMenu-item(href="javascript:window.history.back();")
i.fa-solid.fa-arrow-left
a.rightMenu-item(href="javascript:window.location.reload();")
i.fa-solid.fa-arrow-rotate-right
a.rightMenu-item(href="javascript:window.history.forward();")
i.fa-solid.fa-arrow-right
a.rightMenu-item#menu-radompage(href="javascript:window.location.href = window.location.origin;")
i.fa-solid.fa-house
.rightMenu-group.rightMenu-line.hide#menu-text
a.rightMenu-item(href="javascript:rmf.copySelect();")
i.fa-solid.fa-copy
span='复制'
.rightMenu-group.rightMenu-line
a.rightMenu-item(href="javascript:rmf.switchDarkMode();")
i.fa-solid.fa-circle-half-stroke
span='昼夜切换'
a.rightMenu-item(href="javascript:rmf.switchReadMode();")
i.fa-solid.fa-book
span='阅读模式'
.rightMenu-group.rightMenu-line
a.rightMenu-item(href="javascript:rmf.scrollToTop();")
i.fa-solid.fa-arrow-up
span='置顶'
a.rightMenu-item(href="javascript:rmf.copyPageUrl();")
i.fa-solid.fa-link
span='复制链接'
|
pug文件对缩进非常敏感，所有子元素必须与父元素的缩进保持一致，用tab和用空格是不一样的！
第二步：在路径BlogRoot\themes\butterfly\layout\includes下的layout.pug文件，在最下方的位置添加一行代码
1
2
3
4
| include ./rightside.pug
!=partial('includes/third-party/search/index', {}, {cache: true})
!=partial('includes/rightmenu', {}, {cache: true}) // 这行是新增的
include ./additional-js.pug
|
第三步：在路径BlogRoot\source\css下新建rightmenu.css文件，填入以下代码
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
|
#rightMenu{
display: none;
position: fixed;
width: 160px;
height: fit-content;
top: 10%;
left: 10%;
background-color: var(--card-bg);
border: 1px solid var(--font-color);
border-radius: 8px;
z-index: 100;
}
#rightMenu .rightMenu-group{
padding: 7px 6px;
}
#rightMenu .rightMenu-group:not(:nth-last-child(1)){
border-bottom: 1px dashed #4259ef23;
}
#rightMenu .rightMenu-group.rightMenu-small{
display: flex;
justify-content: space-between;
}
#rightMenu .rightMenu-group .rightMenu-item{
height: 30px;
line-height: 30px;
border-radius: 8px;
transition: 0.3s;
color: var(--font-color);
}
#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item{
display: flex;
height: 40px;
line-height: 40px;
padding: 0 4px;
}
#rightMenu .rightMenu-group .rightMenu-item:hover{
background-color: var(--text-bg-hover);
}
#rightMenu .rightMenu-group .rightMenu-item i{
display: inline-block;
text-align: center;
line-height: 30px;
width: 30px;
height: 30px;
padding: 0 5px;
}
#rightMenu .rightMenu-group .rightMenu-item span{
line-height: 30px;
}
#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item *{
height: 40px;
line-height: 40px;
}
.rightMenu-group.hide{
display: none;
}
|
第四步：在路径BlogRoot\source\js下新建rightmenu.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
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
let rmf = {};
rmf.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();
}
}
rmf.switchDarkMode = function(){
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)
} else {
activateLightMode()
saveToLocal.set('theme', 'light', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
}
typeof utterancesTheme === 'function' && utterancesTheme()
typeof FB === 'object' && window.loadFBComment()
window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
};
rmf.switchReadMode = function(){
const $body = document.body
$body.classList.add('read-mode')
const newEle = document.createElement('button')
newEle.type = 'button'
newEle.className = 'fas fa-sign-out-alt exit-readmode'
$body.appendChild(newEle)
function clickFn () {
$body.classList.remove('read-mode')
newEle.remove()
newEle.removeEventListener('click', clickFn)
}
newEle.addEventListener('click', clickFn)
}
rmf.copySelect = function() {
const selection = window.getSelection();
const selectedText = selection.toString();
if (selectedText) {
navigator.clipboard.writeText(selectedText).then(function() {
console.log('文本已复制到剪贴板');
}).catch(function(err) {
console.error('复制失败:', err);
});
} else {
console.log('没有选中的文本');
}
}
rmf.scrollToTop = function(){
btf.scrollToDest(0, 500);
}
rmf.copyPageUrl = function(){
const url = window.location.href;
navigator.clipboard.writeText(url).then(function() {
console.log('页面链接已复制到剪贴板');
}).catch(function(err) {
console.error('复制失败:', err);
});
}
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-text').show();
}
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;
}
rmf.showRightMenu(true, pageY, pageX);
return false;
};
window.addEventListener('click',function(){rmf.showRightMenu(false);});
}
|
3. 参考链接
