最近看见一个博客鼠标右键菜单很别致，今天偷师学艺一下。

关于这个右键菜单：

  1. 适配于 Hexo 博客的 Butterfly 主题
  2. 可支持 font awesome 图标

一、DOM 结构

  • 首先，想要一个右键菜单，就得向页面中插入一个Dom结构
  • 因为是右键唤醒菜单，与页面其他元素无关联，所以可以将此结构直接插入在body下

在 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
#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='阅读模式'

打开 themes/butterfly/layout/includes/layout.pug 文件，滑动到最下面，修改前应该是：

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

在这里引入刚刚创建的 rightmenu.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

二、CSS 样式

在 /themes/butterfly/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
59
/* rightMenu 右键菜单 */
#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;
	transition: 0.3s;
}
#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;
}

你可以通过config.yml中的inject将其引入，也可以自行通过@import引入到.styl文件中

三、JS 脚本

  • 首先要实现的就是控制右键菜单的显示与隐藏：这里使用ontextmenu事件唤醒右键菜单，然后当点击事件发生后，关闭右键菜单
  • 从上面的pug文件可以看出，是用a标签加上函数调用实现的各功能项
  • 于是，就需要在一个全局对象身上定义一些函数来供这些a标签使用了：这里定义一个rmf右键菜单函数对象（rightmenu function），来存放一些函数

在 /themes/butterfly/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
// RightMenu 鼠标右键菜单
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)
    }
    // handle some cases
    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(){
    document.execCommand('Copy',false,null);
    //这里可以写点东西提示一下 已复制
}

//回到顶部
rmf.scrollToTop = function(){
    btf.scrollToDest(0, 500);
}

// 右键菜单事件
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();
        }

        // console.log(event.target);
        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);});
    // window.addEventListener('load',function(){rmf.switchTheme(true);});
}

四、引入文件查看效果

由于上述 JS 脚本中为了方便使用了 jQuery，所以在生效前需要自行下载JQ文件并引入（按如上方式引在bottom中），或者自行修改JS代码为原生JS

打开主题文件夹的配置文件 /themes/butterfly/_config.yml，找到末尾这个地方按如下方式在页面 bottom 中引入 CSS 和 JS 文件：

1
2
3
4
5
6
7
8
9
10
11
# Inject
# 插入代码到头部（</head> 之前）和（底部 </body>）之前
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="/css/rightmenu.css">

  bottom:
    # - <script src="xxxx"></script>
    - <script src="/js/jquery-3.6.0.min.js"></script> # 右键菜单脚本需要使用的jq文件
    - <script src="/js/rightmenu.js"></script> # 右键菜单rightMenu

最后三步走，查看本地运行效果：

1
2
3
hexo clean
hexo g
hexo s

然后就大功告成了！(◍˃̶ᗜ˂̶◍)✩

参考内容：