点击查看参考内容
前置教程
先睹为快
修改正文
下面放出魔改教程,使用我修改过的 pug 和 js 进行魔改,参照自 dorakika 的原版
PUG 部分
新建 [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 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
| #rightMenu .rightMenu-group.rightMenu-small a.rightMenu-item(href="javascript:window.history.back();") i.fa.fa-arrow-left a.rightMenu-item(href="javascript:window.history.forward();") i.fa.fa-arrow-right a.rightMenu-item(href="javascript:window.location.reload();") i.fa.fa-refresh a.rightMenu-item(href="javascript:rmf.scrollToTop();") i.fa.fa-arrow-up .rightMenu-group.rightMenu-line.hide#menu-text a.rightMenu-item(href="javascript:rmf.copySelect();") i.fa.fa-copy span='复制' a.rightMenu-item(href="javascript:window.open(\"https://www.baidu.com/s?wd=\"+window.getSelection().toString());window.location.reload();") i.iconfont.icon-baidu span='百度搜索' .rightMenu-group.rightMenu-line.hide#menu-too a.rightMenu-item(href="javascript:window.open(window.getSelection().toString());window.location.reload();") i.fa.fa-link span='转到链接' .rightMenu-group.rightMenu-line.hide#menu-paste a.rightMenu-item(href='javascript:rmf.paste()') i.fa.fa-copy span='粘贴' .rightMenu-group.rightMenu-line.hide#menu-post a.rightMenu-item(href="#post-comment") i.fas.fa-comment span='空降评论' a.rightMenu-item(href="javascript:rmf.copyWordsLink()") i.fa.fa-link span='复制本文地址' .rightMenu-group.rightMenu-line.hide#menu-to a.rightMenu-item(href="javascript:rmf.openWithNewTab()") i.fa.fa-window-restore span='新窗口打开' a.rightMenu-item#menu-too(href="javascript:rmf.open()") i.fa.fa-link span='转到链接' a.rightMenu-item(href="javascript:rmf.copyLink()") i.fa.fa-copy span='复制链接' .rightMenu-group.rightMenu-line.hide#menu-img a.rightMenu-item(href="./#post-comment") i.fa.fa-download span='保存图片' a.rightMenu-item(href="javascript:rmf.openWithNewTab()") i.fa.fa-window-restore span='在新窗口打开' a.rightMenu-item(href="javascript:rmf.click()") i.fa.fa-arrows-alt span='全屏显示' a.rightMenu-item(href="javascript:rmf.copyLink()") i.fa.fa-copy span='复制图片链接' .rightMenu-group.rightMenu-line a.rightMenu-item(href="javascript:toRandomPost()") i.fa.fa-paper-plane span='随便逛逛' a.rightMenu-item(href="javascript:rmf.switchDarkMode();") i.fa.fa-moon span='昼夜切换' a.rightMenu-item(href="javascript:rmf.translate();") i.iconfont.icon-fanti span='繁简转换' if is_home()==false a.rightMenu-item(href="javascript:rmf.switchReadMode();") i.fa.fa-book span='阅读模式' a.rightMenu-item(href="javascript:window.location.href=\"/about/\";") i.fa.fa-info-circle span='版权声明'
|
如果你加了评论弹幕的话,改为:(删掉 + 号,仅用作标记)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| #rightMenu .rightMenu-group.rightMenu-small ... .rightMenu-group.rightMenu-line.hide#menu-paste a.rightMenu-item(href='javascript:rmf.paste()') i.fa.fa-copy span='粘贴' .rightMenu-group.rightMenu-line.hide#menu-post ... + a.rightMenu-item(href="javascript:switchCommentBarrage()") + i.fa.fa-bell-slash + span='开/关评论弹幕' a.rightMenu-item(href="javascript:rmf.copyWordsLink()") i.fa.fa-link span='复制本文地址' .rightMenu-group.rightMenu-line.hide#menu-to ...
|
CSS 部分
新建 [blogRoot]/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
| /* 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; } #rightMenu .rightMenu-group{ padding: 7px 6px; } #rightMenu .rightMenu-group:not(:nth-last-child(1)){ border-bottom: 1px solid var(--font-color); } #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; }
|
这是 dorakika 的原版 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 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
| /* rightMenu */ [data-theme='light'] #rightMenu{ display: none; position: fixed; width: 160px; height: fit-content; top: 10%; left: 10%; background-color: var(--card-bg); border: 1px solid rgb(210,210,210);; border-radius: 8px; z-index: 100; box-shadow: 3px 3px 5px #88888894; background-color: var(--lyx-white-acrylic1); backdrop-filter: blur(30px); } [data-theme='dark'] #rightMenu{ display: none; position: fixed; width: 160px; height: fit-content; top: 10%; left: 10%; background-color: var(--card-bg); border: 1px solid rgb(210,210,210);; border-radius: 8px; z-index: 100; box-shadow: 3px 3px 5px #88888894; background-color: var(--lyx-black-acrylic1); backdrop-filter: blur(30px); } #rightMenu .rightMenu-group{ padding: 7px 6px; } #rightMenu .rightMenu-group:not(:nth-last-child(1)){ border-bottom: 1px solid rgb(180,180,180); } #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); box-shadow: 0px 0px 5px var(--lyx-border); } #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:hover{ border: 1px solid var(--lyx-blue); /* box-shadow:0 0 3px var(--lyx-blue)!important; */ } #rightMenu .rightMenu-group.rightMenu-line .rightMenu-item *{ height: 40px; line-height: 40px; } .rightMenu-group.hide{ display: none; } .rightMenu-item:hover{ color:white!important; background-color:var(--lyx-blue)!important; } :root{ --lyx-border:#c9c9c9; --lyx-blue:#6cf; --lyx-gray:#e2e2e2; --lyx-theme:#6cf; --lyx-green:#39c5bb; --lyx-black-acrylic1: #0008; --lyx-black-acrylic2: #000a; --lyx-black-acrylic3:#00000099; --lyx-black:black; --lyx-white:white; --lyx-white-acrylic1:#fffd; --lyx-white-acrylic2:#fffa; --lyx-blackgray:#797979; --lyx-0:#0000; --lyx-scrollbar: #acacacDD; }
|
然后在主题配置文件中引入:
1 2 3 4 5 6
| inject: head: - <link rel="stylesheet" href="/css/rightmenu.css"> - ... bottom: - ...
|
因为少部分图标使用 iconfont,你需要自己添加,下载我的 iconfont 图标包,然后解压把里面的东西扔到 [blogRoot]/themes/butterfly/source/css
里面即可
然后在主题配置文件中引入:
1 2 3 4 5 6
| inject: head: - <link rel="stylesheet" href="/css/iconfont.css"> - ... bottom: - ...
|
JS 部分
创建 [blogRoot]/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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240
| console.log( "Codes uses GPL Licence" )
function insertAtCursor(myField, myValue) {
//IE 浏览器 if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; sel.select(); }
//FireFox、Chrome等 else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd;
// 保存滚动条 var restoreTop = myField.scrollTop; myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
if (restoreTop > 0) { myField.scrollTop = restoreTop; }
myField.focus(); myField.selectionStart = startPos + myValue.length; myField.selectionEnd = startPos + myValue.length; } else { myField.value += myValue; myField.focus(); } } 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.copyWordsLink = function () { let url = window.location.href let txa = document.createElement("textarea"); txa.value = url; document.body.appendChild(txa) txa.select(); document.execCommand("Copy"); document.body.removeChild(txa); Swal.fire("复制成功!"); } 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); } rmf.translate = function () { document.getElementById("translateLink").click(); }
// 右键菜单事件 document.onkeydown = function (event) { event = (event || window.event); if (event.keyCode == 17) { console.log("你知道的太多了"); return; } }
function popupMenu() { //window.oncontextmenu=function(){return false;} window.oncontextmenu = function (event) { if(event.ctrlKey)return true; console.log(event.keyCode) $('.rightMenu-group.hide').hide(); //如果有文字选中,则显示 文字选中相关的菜单项 if (document.getSelection().toString()) { $('#menu-text').show(); } if (document.getElementById('post')) { $('#menu-post').show(); } else { if (document.getElementById('page')) { $('#menu-post').show(); } } var el = window.document.body; el = event.target; var a=/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/ if (a.test(window.getSelection().toString())){ $('#menu-too').show() } if (el.tagName == 'A') { $('#menu-to').show() rmf.open = function () { location.href = el.href } rmf.openWithNewTab = function () { window.open(el.href); } rmf.copyLink = function () { let url = el.href let txa = document.createElement("textarea"); txa.value = url; document.body.appendChild(txa) txa.select(); document.execCommand("Copy"); document.body.removeChild(txa); } } if (el.tagName == 'IMG') { $('#menu-img').show() rmf.openWithNewTab = function () { window.open(el.src); } rmf.click = function () { el.click() } rmf.copyLink = function () { let url = el.src let txa = document.createElement("textarea"); txa.value = url; document.body.appendChild(txa) txa.select(); document.execCommand("Copy"); document.body.removeChild(txa); } } else if (el.tagName == "TEXTAREA" || el.tagName == "INPUT") { $('#menu-paste').show(); rmf.paste = function () { navigator.permissions .query({ name: 'clipboard-read' }) .then(result => { if (result.state == 'granted' || result.state == 'prompt') { //读取剪贴板 navigator.clipboard.readText().then(text => { console.log(text) insertAtCursor(el, text) }) } else { alert('请允许读取剪贴板!') } }) } } 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); }); } 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))) { popupMenu() } const box = document.documentElement
function addLongtabListener(target, callback) { let timer = 0 // 初始化timer
target.ontouchstart = () => { timer = 0 // 重置timer timer = setTimeout(() => { callback(); timer = 0 }, 380) // 超时器能成功执行,说明是长按 }
target.ontouchmove = () => { clearTimeout(timer) // 如果来到这里,说明是滑动 timer = 0 }
target.ontouchend = () => { // 到这里如果timer有值,说明此触摸时间不足380ms,是点击 if (timer) { clearTimeout(timer) } } }
addLongtabListener(box, popupMenu)
|
因为这个 js 依赖于 jquery,所以还需要引入 jquery,在主题配置文件中引入:
1 2 3 4 5 6 7 8
| inject: head: - ... bottom: - ... - <script type="text/javascript" src="https://cdn1.tianli0.top/npm/jquery@latest/dist/jquery.min.js"></script> - <script type="text/javascript" src="/js/rightmenu.js"></script> - ...
|
然后你就拥有了一个好看且功能丰富的右键菜单了!