552 lines
132 KiB
HTML
552 lines
132 KiB
HTML
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>自定义右键菜单 | Bi's Blog</title><meta name="author" content="biss"><meta name="copyright" content="biss"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="演示本站右键即可查看,和原有菜单相比比较美观 新建pug文件在 \themes\butterfly\layout\includes新建 rightmenu.pug 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636">
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:title" content="自定义右键菜单">
|
||
<meta property="og:url" content="https://blog.biss.click/posts/8bdb35fb/index.html">
|
||
<meta property="og:site_name" content="Bi's Blog">
|
||
<meta property="og:description" content="演示本站右键即可查看,和原有菜单相比比较美观 新建pug文件在 \themes\butterfly\layout\includes新建 rightmenu.pug 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636">
|
||
<meta property="og:locale" content="zh_CN">
|
||
<meta property="og:image" content="https://pic.biss.click/image/9c4021c3-3111-4e19-acca-52ec899aa0b4.webp">
|
||
<meta property="article:published_time" content="2025-08-11T08:02:12.000Z">
|
||
<meta property="article:modified_time" content="2026-02-18T07:20:55.206Z">
|
||
<meta property="article:author" content="biss">
|
||
<meta property="article:tag" content="网站">
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:image" content="https://pic.biss.click/image/9c4021c3-3111-4e19-acca-52ec899aa0b4.webp"><script type="application/ld+json">{
|
||
"@context": "https://schema.org",
|
||
"@type": "BlogPosting",
|
||
"headline": "自定义右键菜单",
|
||
"url": "https://blog.biss.click/posts/8bdb35fb/",
|
||
"image": "https://pic.biss.click/image/9c4021c3-3111-4e19-acca-52ec899aa0b4.webp",
|
||
"datePublished": "2025-08-11T08:02:12.000Z",
|
||
"dateModified": "2026-02-18T07:20:55.206Z",
|
||
"author": [
|
||
{
|
||
"@type": "Person",
|
||
"name": "biss",
|
||
"url": "https://blog.biss.click"
|
||
}
|
||
]
|
||
}</script><link rel="shortcut icon" href="/images/Bi.ico"><link rel="canonical" href="https://blog.biss.click/posts/8bdb35fb/index.html"><link rel="preconnect" href="//unpkg.com"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://unpkg.com/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://unpkg.com/@fancyapps/ui/dist/fancybox/fancybox.css" media="print" onload="this.media='all'"><script>
|
||
(() => {
|
||
|
||
const saveToLocal = {
|
||
set: (key, value, ttl) => {
|
||
if (!ttl) return
|
||
const expiry = Date.now() + ttl * 86400000
|
||
localStorage.setItem(key, JSON.stringify({ value, expiry }))
|
||
},
|
||
get: key => {
|
||
const itemStr = localStorage.getItem(key)
|
||
if (!itemStr) return undefined
|
||
const { value, expiry } = JSON.parse(itemStr)
|
||
if (Date.now() > expiry) {
|
||
localStorage.removeItem(key)
|
||
return undefined
|
||
}
|
||
return value
|
||
}
|
||
}
|
||
|
||
window.btf = {
|
||
saveToLocal,
|
||
getScript: (url, attr = {}) => new Promise((resolve, reject) => {
|
||
const script = document.createElement('script')
|
||
script.src = url
|
||
script.async = true
|
||
Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
|
||
script.onload = script.onreadystatechange = () => {
|
||
if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
|
||
}
|
||
script.onerror = reject
|
||
document.head.appendChild(script)
|
||
}),
|
||
getCSS: (url, id) => new Promise((resolve, reject) => {
|
||
const link = document.createElement('link')
|
||
link.rel = 'stylesheet'
|
||
link.href = url
|
||
if (id) link.id = id
|
||
link.onload = link.onreadystatechange = () => {
|
||
if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
|
||
}
|
||
link.onerror = reject
|
||
document.head.appendChild(link)
|
||
}),
|
||
addGlobalFn: (key, fn, name = false, parent = window) => {
|
||
if (!true && key.startsWith('pjax')) return
|
||
const globalFn = parent.globalFn || {}
|
||
globalFn[key] = globalFn[key] || {}
|
||
globalFn[key][name || Object.keys(globalFn[key]).length] = fn
|
||
parent.globalFn = globalFn
|
||
}
|
||
}
|
||
|
||
|
||
const activateDarkMode = () => {
|
||
document.documentElement.setAttribute('data-theme', 'dark')
|
||
if (document.querySelector('meta[name="theme-color"]') !== null) {
|
||
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
|
||
}
|
||
}
|
||
const activateLightMode = () => {
|
||
document.documentElement.setAttribute('data-theme', 'light')
|
||
if (document.querySelector('meta[name="theme-color"]') !== null) {
|
||
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
|
||
}
|
||
}
|
||
|
||
btf.activateDarkMode = activateDarkMode
|
||
btf.activateLightMode = activateLightMode
|
||
|
||
const theme = saveToLocal.get('theme')
|
||
|
||
theme === 'dark' ? activateDarkMode() : theme === 'light' ? activateLightMode() : null
|
||
|
||
|
||
const asideStatus = saveToLocal.get('aside-status')
|
||
if (asideStatus !== undefined) {
|
||
document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
|
||
}
|
||
|
||
|
||
const detectApple = () => {
|
||
if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
|
||
document.documentElement.classList.add('apple')
|
||
}
|
||
}
|
||
detectApple()
|
||
|
||
})()
|
||
</script><script>const GLOBAL_CONFIG = {
|
||
root: '/',
|
||
algolia: undefined,
|
||
localSearch: undefined,
|
||
translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
|
||
highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":200,"highlightFullpage":true,"highlightMacStyle":false},
|
||
copy: {
|
||
success: '复制成功',
|
||
error: '复制失败',
|
||
noSupport: '浏览器不支持'
|
||
},
|
||
relativeDate: {
|
||
homepage: false,
|
||
post: false
|
||
},
|
||
runtime: '',
|
||
dateSuffix: {
|
||
just: '刚刚',
|
||
min: '分钟前',
|
||
hour: '小时前',
|
||
day: '天前',
|
||
month: '个月前'
|
||
},
|
||
copyright: undefined,
|
||
lightbox: 'fancybox',
|
||
Snackbar: {"chs_to_cht":"已切换为繁体中文","cht_to_chs":"已切换为简体中文","day_to_night":"已切换为深色模式","night_to_day":"已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"bottom-left"},
|
||
infinitegrid: {
|
||
js: 'https://unpkg.com/@egjs/infinitegrid/dist/infinitegrid.min.js',
|
||
buttonText: '加载更多'
|
||
},
|
||
isPhotoFigcaption: false,
|
||
islazyloadPlugin: false,
|
||
isAnchor: false,
|
||
percent: {
|
||
toc: true,
|
||
rightside: false,
|
||
},
|
||
autoDarkmode: false
|
||
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
|
||
title: '自定义右键菜单',
|
||
isHighlightShrink: false,
|
||
isToc: true,
|
||
pageType: 'post'
|
||
}</script><link rel="stylesheet" href="/css/shuoshuo.css"><link rel="stylesheet" href="/css/shuoshuoshouye.css"><link rel="stylesheet" href="/css/nav.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/poem.css"><link rel="stylesheet" href="/css/swiper.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/gh/bishshi/welcomemessage/welcome.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/gh/bishshi/sidecalendar/calendar.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/gh/bishshi/rightmenu/rightmenu.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/gh/bishshi/webfont/font.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/aplayer/dist/APlayer.min.css" media="all" onload="this.media="all""><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn1.tianli0.top/npm/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload="this.media='all'"><!-- hexo injector head_end end --><style type="text/css">
|
||
.spoiler {
|
||
display: inline;
|
||
}
|
||
p.spoiler {
|
||
display: flex;
|
||
}
|
||
.spoiler a {
|
||
pointer-events: none;
|
||
}
|
||
.spoiler-blur, .spoiler-blur > * {
|
||
transition: text-shadow .5s ease;
|
||
}
|
||
.spoiler .spoiler-blur, .spoiler .spoiler-blur > * {
|
||
color: rgba(0, 0, 0, 0);
|
||
background-color: rgba(0, 0, 0, 0);
|
||
text-shadow: 0 0 10px grey;
|
||
cursor: pointer;
|
||
}
|
||
.spoiler .spoiler-blur:hover, .spoiler .spoiler-blur:hover > * {
|
||
text-shadow: 0 0 5px grey;
|
||
}
|
||
.spoiler-box, .spoiler-box > * {
|
||
transition: color .5s ease,
|
||
background-color .5s ease;
|
||
}
|
||
.spoiler .spoiler-box, .spoiler .spoiler-box > * {
|
||
color: black;
|
||
background-color: black;
|
||
text-shadow: none;
|
||
}</style><meta name="generator" content="Hexo 8.1.1"><link rel="alternate" href="/atom.xml" title="Bi's Blog" type="application/atom+xml">
|
||
</head><body><div class="bg-animation" id="web_bg" style="background-image: url(/images/background.png);"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img text-center"><img src="https://free.picui.cn/free/2025/08/10/689845496a283.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"></div><div class="site-data text-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">30</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">10</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 存档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/shuoshuo/"><i class="fa-fw fa-regular fa-comment"></i><span> 说说</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg fixed" id="page-header" style="background-image: url(https://pic.biss.click/image/9c4021c3-3111-4e19-acca-52ec899aa0b4.webp);"><nav id="nav"><span id="blog-info"><div id="ls-menu-container"><i class="fas fa-fingerprint"></i><div id="ls-menu-panel"><div class="ls-section"><div class="ls-title">😀 个人网站</div><div class="ls-grid"><a href="/"><i class="fas fa-rss"></i> 个人博客</a><a target="_blank" rel="noopener" href="https://github.com/bishshi"><i class="fab fa-github"></i> Github</a></div></div><div class="ls-section"><div class="ls-title">😎 常用服务</div><div class="ls-grid"><a target="_blank" rel="noopener" href="https://git.biss.click/biss"><i class="fas fa-code"></i> 代码仓库</a><a target="_blank" rel="noopener" href="https://mm.biss.click"><i class="fas fa-pen-nib"></i> 日常yy</a><a target="_blank" rel="noopener" href="https://statstic.biss.click"><i class="fas fa-users"></i> 访客统计</a><a target="_blank" rel="noopener" href="https://pic.biss.click"><i class="fas fa-image"></i> 图床</a><a target="_blank" rel="noopener" href="https://chat.biss.click"><i class="fas fa-robot"></i> AI网站</a><a target="_blank" rel="noopener" href="https://git.biss.click"><i class="fas fa-code-branch"></i> 代码仓库</a></div></div><div class="ls-section"><div class="ls-title">🛸 实用工具</div><div class="ls-grid"><a target="_blank" rel="noopener" href="https://cover.biss.click"><i class="fas fa-palette"></i> 封面设计</a><a target="_blank" rel="noopener" href="https://doc.biss.click"><i class="fas fa-file"></i> 文档服务</a><a target="_blank" rel="noopener" href="https://doc.biss.click"><i class="fas fa-server"></i>服务监测</a><a target="_blank" rel="noopener" href="https://typesense.biss.click"><i class="fas fa-magnifying-glass"></i> 搜索后端</a></div></div></div></div><a class="nav-site-title" href="/"><span class="site-name">Bi's Blog</span></a></span><a class="nav-page-title" href="javascript:void(0);" onclick="btf.scrollToDest(0, 500)"><span class="site-name">自定义右键菜单</span></a><div id="nav-right"><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 存档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/shuoshuo/"><i class="fa-fw fa-regular fa-comment"></i><span> 说说</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div><div id="random-post-button"><a class="site-page social-icon" id="random-post-link" href="javascript:void(0);" onclick="randomPost()"><i class="fas fa-solid fa-shuffle"></i></a></div><div id="search-button"><a class="site-page social-icon search-typesense-trigger"><i class="fas fa-search fa-fw"></i></a></div><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="post-info"><h1 class="post-title">自定义右键菜单</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2025-08-11T08:02:12.000Z" title="发表于 2025-08-11 16:02:12">2025-08-11</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2026-02-18T07:20:55.206Z" title="更新于 2026-02-18 15:20:55">2026-02-18</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/website/">建站手札</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">总字数:</span><span class="word-count">2.4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>13分钟</span></span><span class="post-meta-separator">|</span><span id="" data-flag-title=""><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">浏览量:</span><span id="twikoo_visitors"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="container post-content" id="article-container"><div class="ai-summary"><div class="ai-explanation" style="display: block;" data-summary="这篇文章介绍了如何在自定义右键菜单中添加各种功能，包括返回、前进、刷新、滚动到页面不同位置、复制文本、搜索页面、打开链接、粘贴内容、复制本文地址、在新窗口打开链接、保存图片、随机文章浏览、切换深色模式、繁简转换、阅读模式以及隐私声明、Cookie协议和版权声明等。同时，文章还提供了创建Pug文件和JavaScript文件的步骤，详细说明了如何编写右键菜单的HTML结构和交互逻辑。">AI正在绞尽脑汁想思路ING···</div><div class="ai-title"> <div class="ai-title-left"> <i class="fa-brands fa-slack"></i><div class="ai-title-text">BiのAI摘要</div></div><div class="ai-tag" id="ai-tag">HunYuan-Lite</div></div></div><div id="post-outdate-notice" data="{"limitDay":365,"messagePrev":"It has been","messageNext":"days since the last update, the content of the article may be outdated.","postUpdate":"2026-02-18 15:20:55"}" hidden=""></div><h1 id="演示"><a href="#演示" class="headerlink" title="演示"></a>演示</h1><p>本站右键即可查看,和原有菜单相比比较美观</p>
|
||
<h1 id="新建pug文件"><a href="#新建pug文件" class="headerlink" title="新建pug文件"></a>新建pug文件</h1><p>在 <code>\themes\butterfly\layout\includes</code>新建 <code>rightmenu.pug</code></p>
|
||
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line">#rightMenu.js-pjax</span><br><span class="line"> .rightMenu-group.rightMenu-small</span><br><span class="line"> a.rightMenu-item(href="javascript:window.history.back();")</span><br><span class="line"> i.fa.fa-arrow-left</span><br><span class="line"> a.rightMenu-item(href="javascript:window.history.forward();")</span><br><span class="line"> i.fa.fa-arrow-right</span><br><span class="line"> a.rightMenu-item(href="javascript:window.location.reload();")</span><br><span class="line"> i.fa.fa-refresh</span><br><span class="line"> a.rightMenu-item(href="javascript:window.scrollTo(0, 0);")</span><br><span class="line"> i.fa.fa-arrow-up</span><br><span class="line"> .rightMenu-group.rightMenu-line.hide#menu-text</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.copySelect();")</span><br><span class="line"> i.fa.fa-copy</span><br><span class="line"> span='复制'</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.searchinThisPage();")</span><br><span class="line"> i.fas.fa-search</span><br><span class="line"> span='站内搜索'</span><br><span class="line"> .rightMenu-group.rightMenu-line.hide#menu-too</span><br><span class="line"> a.rightMenu-item(href="javascript:window.open(window.getSelection().toString());window.location.reload();")</span><br><span class="line"> i.fa.fa-link</span><br><span class="line"> span='转到链接'</span><br><span class="line"> .rightMenu-group.rightMenu-line.hide#menu-paste</span><br><span class="line"> a.rightMenu-item(href='javascript:rmf.paste()')</span><br><span class="line"> i.fa.fa-copy</span><br><span class="line"> span='粘贴'</span><br><span class="line"> .rightMenu-group.rightMenu-line.hide#menu-post</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.copyWordsLink()")</span><br><span class="line"> i.fa.fa-link</span><br><span class="line"> span='复制本文地址'</span><br><span class="line"> .rightMenu-group.rightMenu-line.hide#menu-to</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.openWithNewTab()")</span><br><span class="line"> i.fa.fa-window-restore</span><br><span class="line"> span='新窗口打开'</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.open()")</span><br><span class="line"> i.fa.fa-link</span><br><span class="line"> span='转到链接'</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.copyLink()")</span><br><span class="line"> i.fa.fa-copy</span><br><span class="line"> span='复制链接'</span><br><span class="line"> .rightMenu-group.rightMenu-line.hide#menu-img</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.saveAs()")</span><br><span class="line"> i.fa.fa-download</span><br><span class="line"> span='保存图片'</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.openWithNewTab()")</span><br><span class="line"> i.fa.fa-window-restore</span><br><span class="line"> span='在新窗口打开'</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.click()")</span><br><span class="line"> i.fa.fa-arrows-alt</span><br><span class="line"> span='全屏显示'</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.copyLink()")</span><br><span class="line"> i.fa.fa-copy</span><br><span class="line"> span='复制图片链接'</span><br><span class="line"> .rightMenu-group.rightMenu-line</span><br><span class="line"> a.rightMenu-item(href="javascript:randomPost()")</span><br><span class="line"> i.fa.fa-paper-plane</span><br><span class="line"> span='随便逛逛'</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.switchDarkMode();")</span><br><span class="line"> i.fa.fa-moon</span><br><span class="line"> span='昼夜切换'</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.translate();")</span><br><span class="line"> i.iconfont.icon-fanti</span><br><span class="line"> span='繁简转换'</span><br><span class="line"> if is_post()||is_page()</span><br><span class="line"> a.rightMenu-item(href="javascript:rmf.switchReadMode();")</span><br><span class="line"> i.fa.fa-book</span><br><span class="line"> span='阅读模式'</span><br><span class="line"> a.rightMenu-item(href="javascript:pjax.loadUrl(\"/privacy/\");")</span><br><span class="line"> i.fa.fa-info-circle</span><br><span class="line"> span='隐私声明'</span><br><span class="line"> a.rightMenu-item(href="javascript:pjax.loadUrl(\"/cookie/\");")</span><br><span class="line"> i.fa.fa-info-circle</span><br><span class="line"> span='Cookie协议'</span><br><span class="line"> a.rightMenu-item(href="javascript:pjax.loadUrl(\"/cc/\");")</span><br><span class="line"> i.fa.fa-info-circle</span><br><span class="line"> span='版权声明'</span><br></pre></td></tr></tbody></table></figure>
|
||
|
||
<h1 id="新建js文件"><a href="#新建js文件" class="headerlink" title="新建js文件"></a>新建js文件</h1><p>创建 <code>\themes\butterfly\source\js\rightmenu.js</code></p>
|
||
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">setMask</span>(<span class="params"></span>) {<span class="comment">//设置遮罩层</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">"rmMask"</span>)[<span class="number">0</span>] !== <span class="literal">undefined</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">"rmMask"</span>)[<span class="number">0</span>];</span><br><span class="line"> }</span><br><span class="line"> mask = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'div'</span>);</span><br><span class="line"> mask.<span class="property">className</span> = <span class="string">"rmMask"</span>;</span><br><span class="line"> mask.<span class="property">style</span>.<span class="property">width</span> = <span class="variable language_">window</span>.<span class="property">innerWidth</span> + <span class="string">'px'</span>;</span><br><span class="line"> mask.<span class="property">style</span>.<span class="property">height</span> = <span class="variable language_">window</span>.<span class="property">innerHeight</span> + <span class="string">'px'</span>;</span><br><span class="line"> mask.<span class="property">style</span>.<span class="property">background</span> = <span class="string">'#fff'</span>;</span><br><span class="line"> mask.<span class="property">style</span>.<span class="property">opacity</span> = <span class="string">'.0'</span>;</span><br><span class="line"> mask.<span class="property">style</span>.<span class="property">position</span> = <span class="string">'fixed'</span>;</span><br><span class="line"> mask.<span class="property">style</span>.<span class="property">top</span> = <span class="string">'0'</span>;</span><br><span class="line"> mask.<span class="property">style</span>.<span class="property">left</span> = <span class="string">'0'</span>;</span><br><span class="line"> mask.<span class="property">style</span>.<span class="property">zIndex</span> = <span class="number">998</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(mask);</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"rightMenu"</span>).<span class="property">style</span>.<span class="property">zIndex</span> = <span class="number">19198</span>;</span><br><span class="line"> <span class="keyword">return</span> mask;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">insertAtCursor</span>(<span class="params">myField, myValue</span>) {</span><br><span class="line"></span><br><span class="line"> <span class="comment">//IE 浏览器</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">selection</span>) {</span><br><span class="line"> myField.<span class="title function_">focus</span>();</span><br><span class="line"> sel = <span class="variable language_">document</span>.<span class="property">selection</span>.<span class="title function_">createRange</span>();</span><br><span class="line"> sel.<span class="property">text</span> = myValue;</span><br><span class="line"> sel.<span class="title function_">select</span>();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">//FireFox、Chrome等</span></span><br><span class="line"> <span class="keyword">else</span> <span class="keyword">if</span> (myField.<span class="property">selectionStart</span> || myField.<span class="property">selectionStart</span> === <span class="string">'0'</span>) {</span><br><span class="line"> <span class="keyword">var</span> startPos = myField.<span class="property">selectionStart</span>;</span><br><span class="line"> <span class="keyword">var</span> endPos = myField.<span class="property">selectionEnd</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 保存滚动条</span></span><br><span class="line"> <span class="keyword">var</span> restoreTop = myField.<span class="property">scrollTop</span>;</span><br><span class="line"> myField.<span class="property">value</span> = myField.<span class="property">value</span>.<span class="title function_">substring</span>(<span class="number">0</span>, startPos) + myValue + myField.<span class="property">value</span>.<span class="title function_">substring</span>(endPos, myField.<span class="property">value</span>.<span class="property">length</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (restoreTop > <span class="number">0</span>) {</span><br><span class="line"> myField.<span class="property">scrollTop</span> = restoreTop;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> myField.<span class="title function_">focus</span>();</span><br><span class="line"> myField.<span class="property">selectionStart</span> = startPos + myValue.<span class="property">length</span>;</span><br><span class="line"> myField.<span class="property">selectionEnd</span> = startPos + myValue.<span class="property">length</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> myField.<span class="property">value</span> += myValue;</span><br><span class="line"> myField.<span class="title function_">focus</span>();</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> rmf = {};</span><br><span class="line">rmf.<span class="property">showRightMenu</span> = <span class="keyword">function</span> (<span class="params">isTrue, x = <span class="number">0</span>, y = <span class="number">0</span></span>) {</span><br><span class="line"> <span class="keyword">let</span> $rightMenu = $(<span class="string">'#rightMenu'</span>);</span><br><span class="line"> $rightMenu.<span class="title function_">css</span>(<span class="string">'top'</span>, x + <span class="string">'px'</span>).<span class="title function_">css</span>(<span class="string">'left'</span>, y + <span class="string">'px'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (isTrue) {</span><br><span class="line"> $rightMenu.<span class="title function_">show</span>();</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> $rightMenu.<span class="title function_">hide</span>();</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">rmf.<span class="property">switchDarkMode</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> nowMode = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="title function_">getAttribute</span>(<span class="string">'data-theme'</span>) === <span class="string">'dark'</span> ? <span class="string">'dark'</span> : <span class="string">'light'</span></span><br><span class="line"> <span class="keyword">if</span> (nowMode === <span class="string">'light'</span>) {</span><br><span class="line"> <span class="title function_">activateDarkMode</span>()</span><br><span class="line"> saveToLocal.<span class="title function_">set</span>(<span class="string">'theme'</span>, <span class="string">'dark'</span>, <span class="number">2</span>)</span><br><span class="line"> <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">Snackbar</span> !== <span class="literal">undefined</span> && btf.<span class="title function_">snackbarShow</span>(<span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">Snackbar</span>.<span class="property">day_to_night</span>)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="title function_">activateLightMode</span>()</span><br><span class="line"> saveToLocal.<span class="title function_">set</span>(<span class="string">'theme'</span>, <span class="string">'light'</span>, <span class="number">2</span>)</span><br><span class="line"> <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">Snackbar</span> !== <span class="literal">undefined</span> && btf.<span class="title function_">snackbarShow</span>(<span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">Snackbar</span>.<span class="property">night_to_day</span>)</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// handle some cases</span></span><br><span class="line"> <span class="keyword">typeof</span> utterancesTheme === <span class="string">'function'</span> && <span class="title function_">utterancesTheme</span>()</span><br><span class="line"> <span class="keyword">typeof</span> <span class="variable constant_">FB</span> === <span class="string">'object'</span> && <span class="variable language_">window</span>.<span class="title function_">loadFBComment</span>()</span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">DISQUS</span> && <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'disqus_thread'</span>).<span class="property">children</span>.<span class="property">length</span> && <span class="built_in">setTimeout</span>(<span class="function">() =></span> <span class="variable language_">window</span>.<span class="title function_">disqusReset</span>(), <span class="number">200</span>)</span><br><span class="line"> <span class="title function_">switchPostChart</span>();</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line">rmf.<span class="property">copyWordsLink</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> decodedUrl = <span class="built_in">decodeURIComponent</span>(<span class="variable language_">window</span>.<span class="property">location</span>.<span class="property">href</span>); <span class="comment">// 解码 URL</span></span><br><span class="line"> navigator.<span class="property">clipboard</span>.<span class="title function_">writeText</span>(decodedUrl)</span><br><span class="line"> .<span class="title function_">then</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="title class_">Snackbar</span>.<span class="title function_">show</span>({</span><br><span class="line"> <span class="attr">text</span>: <span class="string">'链接复制成功！快去分享吧！'</span>,</span><br><span class="line"> <span class="attr">pos</span>: <span class="string">'top-right'</span>,</span><br><span class="line"> <span class="attr">showAction</span>: <span class="literal">false</span></span><br><span class="line"> });</span><br><span class="line"> })</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line">rmf.<span class="property">switchReadMode</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> $body = <span class="variable language_">document</span>.<span class="property">body</span></span><br><span class="line"> $body.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">'read-mode'</span>)</span><br><span class="line"> <span class="keyword">const</span> newEle = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'button'</span>)</span><br><span class="line"> newEle.<span class="property">type</span> = <span class="string">'button'</span></span><br><span class="line"> newEle.<span class="property">className</span> = <span class="string">'fas fa-sign-out-alt exit-readmode'</span></span><br><span class="line"> $body.<span class="title function_">appendChild</span>(newEle)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">clickFn</span>(<span class="params"></span>) {</span><br><span class="line"> $body.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">'read-mode'</span>)</span><br><span class="line"> newEle.<span class="title function_">remove</span>()</span><br><span class="line"> newEle.<span class="title function_">removeEventListener</span>(<span class="string">'click'</span>, clickFn)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> newEle.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, clickFn)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//复制选中文字</span></span><br><span class="line">rmf.<span class="property">copySelect</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> navigator.<span class="property">clipboard</span>.<span class="title function_">writeText</span>(<span class="variable language_">document</span>.<span class="title function_">getSelection</span>().<span class="title function_">toString</span>()).<span class="title function_">then</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="title class_">Snackbar</span>.<span class="title function_">show</span>({</span><br><span class="line"> <span class="attr">text</span>: <span class="string">'已复制选中文字！'</span>,</span><br><span class="line"> <span class="attr">pos</span>: <span class="string">'top-right'</span>,</span><br><span class="line"> <span class="attr">showAction</span>: <span class="literal">false</span>,</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//回到顶部</span></span><br><span class="line">rmf.<span class="property">scrollToTop</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">"menus_items"</span>)[<span class="number">1</span>].<span class="title function_">setAttribute</span>(<span class="string">"style"</span>, <span class="string">""</span>);</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"name-container"</span>).<span class="title function_">setAttribute</span>(<span class="string">"style"</span>, <span class="string">"display:none"</span>);</span><br><span class="line"> btf.<span class="title function_">scrollToDest</span>(<span class="number">0</span>, <span class="number">500</span>);</span><br><span class="line">}</span><br><span class="line">rmf.<span class="property">translate</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"translateLink"</span>).<span class="title function_">click</span>();</span><br><span class="line">}</span><br><span class="line">rmf.<span class="property">searchinThisPage</span> = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">let</span> mask = <span class="title function_">setMask</span>(); <span class="comment">// 确保 mask 元素存在于 document.body 中</span></span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">"local-search-box--input"</span>)[<span class="number">0</span>].<span class="property">value</span> = <span class="variable language_">window</span>.<span class="title function_">getSelection</span>().<span class="title function_">toString</span>();</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">"search"</span>)[<span class="number">0</span>].<span class="title function_">click</span>();</span><br><span class="line"> <span class="keyword">var</span> evt = <span class="variable language_">document</span>.<span class="title function_">createEvent</span>(<span class="string">"HTMLEvents"</span>);</span><br><span class="line"> evt.<span class="title function_">initEvent</span>(<span class="string">"input"</span>, <span class="literal">false</span>, <span class="literal">false</span>);</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">"local-search-box--input"</span>)[<span class="number">0</span>].<span class="title function_">dispatchEvent</span>(evt);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 在尝试移除 mask 元素之前检查它是否存在于 document.body 中</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">contains</span>(mask)) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">removeChild</span>(mask);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">addEventListener</span>(<span class="string">'touchmove'</span>, <span class="keyword">function</span> (<span class="params">e</span>) {</span><br><span class="line"></span><br><span class="line">}, {<span class="attr">passive</span>: <span class="literal">false</span>});</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">popupMenu</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="comment">//window.oncontextmenu=function(){return false;}</span></span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">oncontextmenu</span> = <span class="keyword">function</span> (<span class="params">event</span>) {</span><br><span class="line"> <span class="title class_">Snackbar</span>.<span class="title function_">show</span>({</span><br><span class="line"> <span class="attr">text</span>: <span class="string">'按住 Ctrl 再点击右键，即可恢复原界面哦'</span>,</span><br><span class="line"> <span class="attr">pos</span>: <span class="string">'bottom-left'</span>,</span><br><span class="line"> <span class="attr">showAction</span>: <span class="literal">false</span></span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">if</span> (event.<span class="property">ctrlKey</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">clientWidth</span> < <span class="number">900</span>) <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line"> $(<span class="string">'.rightMenu-group.hide'</span>).<span class="title function_">hide</span>();</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="title function_">getSelection</span>().<span class="title function_">toString</span>()) {</span><br><span class="line"> $(<span class="string">'#menu-text'</span>).<span class="title function_">show</span>();</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'post'</span>)) {</span><br><span class="line"> $(<span class="string">'#menu-post'</span>).<span class="title function_">show</span>();</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'page'</span>)) {</span><br><span class="line"> $(<span class="string">'#menu-post'</span>).<span class="title function_">show</span>();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> el = <span class="variable language_">window</span>.<span class="property">document</span>.<span class="property">body</span>;</span><br><span class="line"> el = event.<span class="property">target</span>;</span><br><span class="line"> <span class="keyword">var</span> a = <span class="regexp">/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:\/?#[\]@!$&'*+,;=]+$/</span></span><br><span class="line"> <span class="keyword">if</span> (a.<span class="title function_">test</span>(<span class="variable language_">window</span>.<span class="title function_">getSelection</span>().<span class="title function_">toString</span>()) && el.<span class="property">tagName</span> !== <span class="string">"A"</span>) {</span><br><span class="line"> $(<span class="string">'#menu-too'</span>).<span class="title function_">show</span>()</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (el.<span class="property">tagName</span> === <span class="string">'A'</span>) {</span><br><span class="line"> $(<span class="string">'#menu-to'</span>).<span class="title function_">show</span>()</span><br><span class="line"> rmf.<span class="property">open</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (el.<span class="property">href</span>.<span class="title function_">indexOf</span>(<span class="string">"http://"</span>) === -<span class="number">1</span> && el.<span class="property">href</span>.<span class="title function_">indexOf</span>(<span class="string">"https://"</span>) === -<span class="number">1</span> || el.<span class="property">href</span>.<span class="title function_">indexOf</span>(<span class="string">"blog.june-pj.cn"</span>) !== -<span class="number">1</span>) {</span><br><span class="line"> pjax.<span class="title function_">loadUrl</span>(el.<span class="property">href</span>)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> location.<span class="property">href</span> = el.<span class="property">href</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> rmf.<span class="property">openWithNewTab</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">open</span>(el.<span class="property">href</span>);</span><br><span class="line"> <span class="comment">// window.location.reload();</span></span><br><span class="line"> }</span><br><span class="line"> rmf.<span class="property">copyLink</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> url = el.<span class="property">href</span>;</span><br><span class="line"> navigator.<span class="property">clipboard</span>.<span class="title function_">writeText</span>(url);</span><br><span class="line"> <span class="title class_">Snackbar</span>.<span class="title function_">show</span>({</span><br><span class="line"> <span class="attr">text</span>: <span class="string">'链接复制成功！快去分享吧！'</span>,</span><br><span class="line"> <span class="attr">pos</span>: <span class="string">'top-right'</span>,</span><br><span class="line"> <span class="attr">showAction</span>: <span class="literal">false</span></span><br><span class="line"> });</span><br><span class="line"> };</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (el.<span class="property">tagName</span> === <span class="string">'IMG'</span>) {</span><br><span class="line"> $(<span class="string">'#menu-img'</span>).<span class="title function_">show</span>()</span><br><span class="line"> rmf.<span class="property">openWithNewTab</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">open</span>(el.<span class="property">src</span>);</span><br><span class="line"> <span class="comment">// window.location.reload();</span></span><br><span class="line"> }</span><br><span class="line"> rmf.<span class="property">click</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> el.<span class="title function_">click</span>()</span><br><span class="line"> }</span><br><span class="line"> rmf.<span class="property">copyLink</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> url = el.<span class="property">src</span></span><br><span class="line"> navigator.<span class="property">clipboard</span>.<span class="title function_">writeText</span>(url);</span><br><span class="line"> <span class="title class_">Snackbar</span>.<span class="title function_">show</span>({</span><br><span class="line"> <span class="attr">text</span>: <span class="string">'链接复制成功！快去分享吧！'</span>,</span><br><span class="line"> <span class="attr">pos</span>: <span class="string">'top-right'</span>,</span><br><span class="line"> <span class="attr">showAction</span>: <span class="literal">false</span></span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> rmf.<span class="property">saveAs</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> a = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'a'</span>);</span><br><span class="line"> a.<span class="property">href</span> = el.<span class="property">src</span>;</span><br><span class="line"> <span class="comment">// 获取图片的文件名部分</span></span><br><span class="line"> a.<span class="property">download</span> = el.<span class="property">src</span>.<span class="title function_">split</span>(<span class="string">'/'</span>).<span class="title function_">pop</span>(); <span class="comment">// 使用图片的文件名作为下载文件名</span></span><br><span class="line"> a.<span class="property">style</span>.<span class="property">display</span> = <span class="string">'none'</span>; <span class="comment">// 隐藏下载链接</span></span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(a);</span><br><span class="line"> a.<span class="title function_">click</span>();</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">removeChild</span>(a);</span><br><span class="line"> }</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (el.<span class="property">tagName</span> === <span class="string">"TEXTAREA"</span> || el.<span class="property">tagName</span> === <span class="string">"INPUT"</span>) {</span><br><span class="line"> $(<span class="string">'#menu-paste'</span>).<span class="title function_">show</span>();</span><br><span class="line"> <span class="comment">// rmf.paste=function(){</span></span><br><span class="line"> <span class="comment">// input.addEventListener('paste', async event => {</span></span><br><span class="line"> <span class="comment">// event.preventDefault();</span></span><br><span class="line"> <span class="comment">// const text = await navigator.clipboard.readText();</span></span><br><span class="line"> <span class="comment">// el.value+=text;</span></span><br><span class="line"> <span class="comment">// });</span></span><br><span class="line"> <span class="comment">// }</span></span><br><span class="line"> rmf.<span class="property">paste</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> navigator.<span class="property">permissions</span></span><br><span class="line"> .<span class="title function_">query</span>({</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'clipboard-read'</span></span><br><span class="line"> })</span><br><span class="line"> .<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (result.<span class="property">state</span> === <span class="string">'granted'</span> || result.<span class="property">state</span> === <span class="string">'prompt'</span>) {</span><br><span class="line"> <span class="comment">//读取剪贴板</span></span><br><span class="line"> navigator.<span class="property">clipboard</span>.<span class="title function_">readText</span>().<span class="title function_">then</span>(<span class="function"><span class="params">text</span> =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(text)</span><br><span class="line"> <span class="title function_">insertAtCursor</span>(el, text)</span><br><span class="line"> })</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="title class_">Snackbar</span>.<span class="title function_">show</span>({</span><br><span class="line"> <span class="attr">text</span>: <span class="string">'请允许读取剪贴板！'</span>,</span><br><span class="line"> <span class="attr">pos</span>: <span class="string">'top-center'</span>,</span><br><span class="line"> <span class="attr">showAction</span>: <span class="literal">false</span>,</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> pageX = event.<span class="property">clientX</span> + <span class="number">10</span>;</span><br><span class="line"> <span class="keyword">let</span> pageY = event.<span class="property">clientY</span>;</span><br><span class="line"> <span class="keyword">let</span> rmWidth = $(<span class="string">'#rightMenu'</span>).<span class="title function_">width</span>();</span><br><span class="line"> <span class="keyword">let</span> rmHeight = $(<span class="string">'#rightMenu'</span>).<span class="title function_">height</span>();</span><br><span class="line"> <span class="keyword">if</span> (pageX + rmWidth > <span class="variable language_">window</span>.<span class="property">innerWidth</span>) {</span><br><span class="line"> pageX -= rmWidth + <span class="number">10</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (pageY + rmHeight > <span class="variable language_">window</span>.<span class="property">innerHeight</span>) {</span><br><span class="line"> pageY -= pageY + rmHeight - <span class="variable language_">window</span>.<span class="property">innerHeight</span>;</span><br><span class="line"> }</span><br><span class="line"> mask = <span class="title function_">setMask</span>();</span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">onscroll</span> = <span class="function">() =></span> {</span><br><span class="line"> rmf.<span class="title function_">showRightMenu</span>(<span class="literal">false</span>);</span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">onscroll</span> = <span class="function">() =></span> {</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">contains</span>(mask)) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">removeChild</span>(mask);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> $(<span class="string">".rightMenu-item"</span>).<span class="title function_">click</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">contains</span>(mask)) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">removeChild</span>(mask);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> $(<span class="variable language_">window</span>).<span class="title function_">resize</span>(<span class="function">() =></span> {</span><br><span class="line"> rmf.<span class="title function_">showRightMenu</span>(<span class="literal">false</span>);</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">contains</span>(mask)) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">removeChild</span>(mask);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> mask.<span class="property">onclick</span> = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">contains</span>(mask)) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">removeChild</span>(mask);</span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> rmf.<span class="title function_">showRightMenu</span>(<span class="literal">true</span>, pageY, pageX);</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> rmf.<span class="title function_">showRightMenu</span>(<span class="literal">false</span>);</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (!(navigator.<span class="property">userAgent</span>.<span class="title function_">match</span>(<span class="regexp">/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i</span>))) {</span><br><span class="line"> <span class="title function_">popupMenu</span>()</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="property">documentElement</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">addLongtabListener</span>(<span class="params">target, callback</span>) {</span><br><span class="line"> <span class="keyword">let</span> timer = <span class="number">0</span> <span class="comment">// 初始化timer</span></span><br><span class="line"></span><br><span class="line"> target.<span class="property">ontouchstart</span> = <span class="function">() =></span> {</span><br><span class="line"> timer = <span class="number">0</span> <span class="comment">// 重置timer</span></span><br><span class="line"> timer = <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="title function_">callback</span>();</span><br><span class="line"> timer = <span class="number">0</span></span><br><span class="line"> }, <span class="number">380</span>) <span class="comment">// 超时器能成功执行，说明是长按</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> target.<span class="property">ontouchmove</span> = <span class="function">() =></span> {</span><br><span class="line"> <span class="built_in">clearTimeout</span>(timer) <span class="comment">// 如果来到这里，说明是滑动</span></span><br><span class="line"> timer = <span class="number">0</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> target.<span class="property">ontouchend</span> = <span class="function">() =></span> { <span class="comment">// 到这里如果timer有值，说明此触摸时间不足380ms，是点击</span></span><br><span class="line"> <span class="keyword">if</span> (timer) {</span><br><span class="line"> <span class="built_in">clearTimeout</span>(timer)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="title function_">addLongtabListener</span>(box, popupMenu)</span><br></pre></td></tr></tbody></table></figure>
|
||
|
||
<h1 id="创建css"><a href="#创建css" class="headerlink" title="创建css"></a>创建css</h1><p>创建 <code>\themes\butterfly\source\css\rightmenu.css</code></p>
|
||
<figure class="highlight css"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* rightMenu */</span></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">'light'</span>]</span> <span class="selector-id">#rightMenu</span>{</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">160px</span>;</span><br><span class="line"> <span class="attribute">height</span>: fit-content;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">10%</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">10%</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="built_in">var</span>(--card-bg);</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(<span class="number">210</span>,<span class="number">210</span>,<span class="number">210</span>);;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">100</span>;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">3px</span> <span class="number">3px</span> <span class="number">5px</span> <span class="number">#88888894</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="built_in">var</span>(--june-white-acrylic1);</span><br><span class="line"> <span class="attribute">backdrop-filter</span>: <span class="built_in">blur</span>(<span class="number">30px</span>);</span><br><span class="line">}</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">'dark'</span>]</span> <span class="selector-id">#rightMenu</span>{</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">160px</span>;</span><br><span class="line"> <span class="attribute">height</span>: fit-content;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">10%</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">10%</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="built_in">var</span>(--card-bg);</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(<span class="number">210</span>,<span class="number">210</span>,<span class="number">210</span>);;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">100</span>;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">3px</span> <span class="number">3px</span> <span class="number">5px</span> <span class="number">#88888894</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="built_in">var</span>(--june-black-acrylic1);</span><br><span class="line"> <span class="attribute">backdrop-filter</span>: <span class="built_in">blur</span>(<span class="number">30px</span>);</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#rightMenu</span> <span class="selector-class">.rightMenu-group</span>{</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">7px</span> <span class="number">6px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#rightMenu</span> <span class="selector-class">.rightMenu-group</span><span class="selector-pseudo">:not</span>(<span class="selector-pseudo">:nth-last-child</span>(<span class="number">1</span>)){</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(<span class="number">180</span>,<span class="number">180</span>,<span class="number">180</span>);</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#rightMenu</span> <span class="selector-class">.rightMenu-group</span><span class="selector-class">.rightMenu-small</span>{</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#rightMenu</span> <span class="selector-class">.rightMenu-group</span> <span class="selector-class">.rightMenu-item</span>{</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line"> <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--font-color);</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#rightMenu</span> <span class="selector-class">.rightMenu-group</span><span class="selector-class">.rightMenu-line</span> <span class="selector-class">.rightMenu-item</span>{</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">40px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">4px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#rightMenu</span> <span class="selector-class">.rightMenu-group</span> <span class="selector-class">.rightMenu-item</span><span class="selector-pseudo">:hover</span>{</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="built_in">var</span>(--text-bg-hover);</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">5px</span> <span class="built_in">var</span>(--june-border);</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#rightMenu</span> <span class="selector-class">.rightMenu-group</span> <span class="selector-class">.rightMenu-item</span> <span class="selector-tag">i</span>{</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">5px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#rightMenu</span> <span class="selector-class">.rightMenu-group</span> <span class="selector-class">.rightMenu-item</span> <span class="selector-tag">span</span>{</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#rightMenu</span><span class="selector-pseudo">:hover</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--june-theme);</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#rightMenu</span> <span class="selector-class">.rightMenu-group</span><span class="selector-class">.rightMenu-line</span> <span class="selector-class">.rightMenu-item</span> *{</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">40px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.rightMenu-group</span><span class="selector-class">.hide</span>{</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.rightMenu-item</span><span class="selector-pseudo">:hover</span>{</span><br><span class="line"> <span class="attribute">color</span>:white<span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">background-color</span>:<span class="built_in">var</span>(--june-theme)<span class="meta">!important</span>;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
|
||
|
||
<h1 id="引入"><a href="#引入" class="headerlink" title="引入"></a>引入</h1><figure class="highlight yml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="string"><script</span> <span class="string">type="text/javascript"</span> <span class="string">src="/js/rightmenu.js"></script></span></span><br><span class="line"><span class="bullet">-</span> <span class="string"><link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="/css/rightmenu.css"></span></span><br></pre></td></tr></tbody></table></figure></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://blog.biss.click">biss</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://blog.biss.click/posts/8bdb35fb/">https://blog.biss.click/posts/8bdb35fb/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来源 <a href="https://blog.biss.click" target="_blank">Bi's Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/web/">网站</a></div><div class="post-share"><style>#web-share-btn {
|
||
background: var(--btn-bg);
|
||
color: var(--btn-color);
|
||
border: none;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
#web-share-btn:hover {
|
||
background: var(--btn-hover-color);
|
||
}
|
||
</style><div id="web-share-component"><button id="web-share-btn" title="分享本文"><i class="fas fa-share-alt"></i><span> 分享</span></button></div><script>(() => {
|
||
const setupWebShare = () => {
|
||
const btn = document.getElementById('web-share-btn')
|
||
if (!btn) return
|
||
|
||
// 点击事件处理
|
||
btn.addEventListener('click', async () => {
|
||
if (navigator.share) {
|
||
try {
|
||
await navigator.share({
|
||
title: '自定义右键菜单',
|
||
text: '...',
|
||
url: window.location.href
|
||
})
|
||
} catch (err) {
|
||
console.log('分享取消或失败', err)
|
||
}
|
||
} else {
|
||
// 降级处理：比如弹出提示或复制链接
|
||
const shareData = window.location.href
|
||
navigator.clipboard.writeText(shareData).then(() => {
|
||
btf.snackbarShow('系统不支持分享，已将链接复制到剪贴板')
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 考虑到 Butterfly 的 Pjax 跳转，需要重新绑定
|
||
setupWebShare()
|
||
document.addEventListener('pjax:complete', setupWebShare)
|
||
})()</script></div></div><nav class="pagination-post" id="pagination"><a class="pagination-related" href="/posts/f0a1a1f4/" title="英语文章分享-去奋力生活吧，就好像死亡近在咫尺"><img class="cover" src="https://pic.biss.click/image/7d55a9c5-3756-4e3b-ace4-92142a2260cd.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="info"><div class="info-1"><div class="info-item-1">上一篇</div><div class="info-item-2">英语文章分享-去奋力生活吧，就好像死亡近在咫尺</div></div><div class="info-2"><div class="info-item-1">As a hospice doctor, I often have the privilege of being at the bedside of dying patients.Over the years, I’ve had countless conversations about lives well lived, and more often, about regrets.Many of my patients express a strikingly similar sentiment:I really regret that I never had the energy or time to…The rest of the sentence varies.For one, it might be writing a book.For another, traveling to a far-off land.For someone else, maybe it’s training for a favorite sport.The specifics change, ...</div></div></div></a><a class="pagination-related" href="/posts/da17d00/" title="在侧边栏中添加欢迎信息"><img class="cover" src="https://pic.biss.click/image/c0211558-17e4-46d2-9a35-e12f16f3f900.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="info text-right"><div class="info-1"><div class="info-item-1">下一篇</div><div class="info-item-2">在侧边栏中添加欢迎信息</div></div><div class="info-2"><div class="info-item-1">效果展示 开始折腾申请腾讯地图的api key 🪧引用站外地址，不保证站点的可用性和安全性 腾讯地图 Tencent 自行查看文档,要注意在填写信任域名时不填 https:// 添加js在主题 /source/js/目录下添加 txmap.js 有一个更完善的js脚本 🪧引用站外地址，不保证站点的可用性和安全性 txmap.js github 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858...</div></div></div></a></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><a class="pagination-related" href="/posts/6e5f5039/" title="部署历程"><img class="cover" src="https://pic.biss.click/image/135a0e53-78a0-42f4-a9e7-eaf9628db91e.webp" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2025-08-02</div><div class="info-item-2">部署历程</div></div><div class="info-2"><div class="info-item-1">前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...</div></div></div></a><a class="pagination-related" href="/posts/41b9aff7/" title="博客添加AI总结"><img class="cover" src="https://pic.biss.click/image/0d2f2a46-8aa9-42b6-a853-4794222a1492.webp" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2025-08-12</div><div class="info-item-2">博客添加AI总结</div></div><div class="info-2"><div class="info-item-1">之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...</div></div></div></a><a class="pagination-related" href="/posts/33249733/" title="自定义分类条"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2025-08-14</div><div class="info-item-2">自定义分类条</div></div><div class="info-2"><div class="info-item-1">修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...</div></div></div></a><a class="pagination-related" href="/posts/3a26a97a/" title="为博客添加CMS系统"><img class="cover" src="https://pic.biss.click/image/883c5377-2b3d-4f7f-ba4f-1600e9c91b90.webp" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2025-08-25</div><div class="info-item-2">为博客添加CMS系统</div></div><div class="info-2"><div class="info-item-1">序言因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms 🪧引用站外地址，不保证站点的可用性和安全性 sveltia-cms sveltia 安装安装包在博客根目录下运行npm i @sveltia/cms 创建必要文件然后在博客source目录下创建admin目录并在其下新建index.html 123456789101112<!doctype html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, init...</div></div></div></a><a class="pagination-related" href="/posts/7e921903/" title="添加网站左上角菜单"><img class="cover" src="https://pic.biss.click/image/a40baba1-b296-4b3b-a781-da45bffb1b95.webp" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2026-02-10</div><div class="info-item-2">添加网站左上角菜单</div></div><div class="info-2"><div class="info-item-1">看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。 🪧引用站外地址，不保证站点的可用性和安全性 liushen liushen 预计做好后是这种效果： 首先，修改\themes\butterfly\layout\includes\header\nav.pug: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051nav#nav //- 左侧区域：包含指纹菜单和网站名 span#blog-info #ls-menu-container i.fas.fa-fingerprint #ls-menu-panel .ls-section .ls-title 😀 个人网站 .ls-grid ...</div></div></div></a><a class="pagination-related" href="/posts/ad244066/" title="配置说说页面"><img class="cover" src="https://pic.biss.click/image/0f3b8150-af77-426f-afc1-36df5ab27b36.webp" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2025-08-10</div><div class="info-item-2">配置说说页面</div></div><div class="info-2"><div class="info-item-1">又开始折腾啦，这次把说说页面加上，改用moments项目的api 🪧引用站外地址，不保证站点的可用性和安全性 Moments 极简朋友圈 githun@kingwrcy 前期要求硬件要求 一台服务器 一个可自主解析的域名 软件要求 docker环境 反向代理工具（本文以Nginx为例） 介绍与展示这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改： 说说页面： ✅来自本站，本站可确保其安全性，请放心点击跳转 我的说说 胡言乱语ing。。。 轻量朋友圈 🪧引用站外地址，不保证站点的可用性和安全性 ...</div></div></div></a></div></div><hr class="custom-hr"><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="https://free.picui.cn/free/2025/08/10/689845496a283.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"></div><div class="author-info-name">biss</div><div class="author-info-description"></div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">30</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">10</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/bishshi"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons"><a class="social-icon" href="https://github.com/bishshi" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:bishsh2006@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-ip-location-info"></div></div><div class="card-widget" id="card-poem"><div id="poem_sentence"></div><div id="poem_info"><div id="poem_dynasty"></div><div id="poem_author"></div></div></div><script src="https://cdn.liumingye.cn/npm/js-heo@1.0.11/poem/jinrishici.js" charset="utf-8"></script><script type="text/javascript">jinrishici.load(function(result) {
|
||
var sentence = document.querySelector("#poem_sentence")
|
||
var author = document.querySelector("#poem_author")
|
||
var dynasty = document.querySelector("#poem_dynasty")
|
||
var sentenceText = result.data.content
|
||
sentenceText = sentenceText.substr(0, sentenceText.length - 1);
|
||
sentence.innerHTML = sentenceText
|
||
dynasty.innerHTML = result.data.origin.dynasty
|
||
author.innerHTML = result.data.origin.author + '《' + result.data.origin.title + '》'
|
||
});</script><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%BC%94%E7%A4%BA"><span class="toc-number">1.</span> <span class="toc-text">演示</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%B0%E5%BB%BApug%E6%96%87%E4%BB%B6"><span class="toc-number">2.</span> <span class="toc-text">新建pug文件</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%B0%E5%BB%BAjs%E6%96%87%E4%BB%B6"><span class="toc-number">3.</span> <span class="toc-text">新建js文件</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAcss"><span class="toc-number">4.</span> <span class="toc-text">创建css</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BC%95%E5%85%A5"><span class="toc-number">5.</span> <span class="toc-text">引入</span></a></li></ol></div></div><div class="card-widget card-post-series"><div class="item-headline"><i class="fa-solid fa-layer-group"></i><span>系列文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/7e921903/" title="添加网站左上角菜单"><img src="https://pic.biss.click/image/a40baba1-b296-4b3b-a781-da45bffb1b95.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="添加网站左上角菜单"></a><div class="content"><a class="title" href="/posts/7e921903/" title="添加网站左上角菜单">添加网站左上角菜单</a><time datetime="2026-02-09T23:11:14.000Z" title="发表于 2026-02-10 07:11:14">2026-02-10</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/posts/f287c563/" title="添加typesense搜索">添加typesense搜索</a><time datetime="2026-02-05T05:14:16.000Z" title="发表于 2026-02-05 13:14:16">2026-02-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/b5601a7e/" title="自定义字体"><img src="https://pic.biss.click/image/6c4f9470-3917-44fb-ba10-30f3c4147592.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="自定义字体"></a><div class="content"><a class="title" href="/posts/b5601a7e/" title="自定义字体">自定义字体</a><time datetime="2026-01-15T23:47:15.000Z" title="发表于 2026-01-16 07:47:15">2026-01-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/5ed2f1e6/" title="在侧边栏添加日历和倒计时"><img src="https://pic.biss.click/image/232af9c6-97ce-42f8-85a8-9338963066e6.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="在侧边栏添加日历和倒计时"></a><div class="content"><a class="title" href="/posts/5ed2f1e6/" title="在侧边栏添加日历和倒计时">在侧边栏添加日历和倒计时</a><time datetime="2026-01-15T23:47:07.000Z" title="发表于 2026-01-16 07:47:07">2026-01-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/ce1ec3fe/" title="使用GitHub推送Hexo到服务器"><img src="https://pic.biss.click/image/e0a08509-dea4-4af7-bafa-c81ca9d1cf8d.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="使用GitHub推送Hexo到服务器"></a><div class="content"><a class="title" href="/posts/ce1ec3fe/" title="使用GitHub推送Hexo到服务器">使用GitHub推送Hexo到服务器</a><time datetime="2025-08-18T09:10:18.000Z" title="发表于 2025-08-18 17:10:18">2025-08-18</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/c6143ad3/" title="自定义页脚（新）"><img src="https://pic.biss.click/image/a49d986a-7430-4fa5-89dd-13dee416632f.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="自定义页脚（新）"></a><div class="content"><a class="title" href="/posts/c6143ad3/" title="自定义页脚（新）">自定义页脚（新）</a><time datetime="2025-08-14T09:05:27.000Z" title="发表于 2025-08-14 17:05:27">2025-08-14</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/posts/33249733/" title="自定义分类条">自定义分类条</a><time datetime="2025-08-14T08:25:49.000Z" title="发表于 2025-08-14 16:25:49">2025-08-14</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/posts/3e61a389/" title="自定义导航栏">自定义导航栏</a><time datetime="2025-08-13T08:12:25.000Z" title="发表于 2025-08-13 16:12:25">2025-08-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/b5866b9e/" title="利用 SiteMap 随机访问站内页面"><img src="https://pic.biss.click/image/2f13dc34-ccef-46f9-96d9-531e049fede5.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="利用 SiteMap 随机访问站内页面"></a><div class="content"><a class="title" href="/posts/b5866b9e/" title="利用 SiteMap 随机访问站内页面">利用 SiteMap 随机访问站内页面</a><time datetime="2025-08-12T07:15:32.000Z" title="发表于 2025-08-12 15:15:32">2025-08-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/41b9aff7/" title="博客添加AI总结"><img src="https://pic.biss.click/image/0d2f2a46-8aa9-42b6-a853-4794222a1492.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="博客添加AI总结"></a><div class="content"><a class="title" href="/posts/41b9aff7/" title="博客添加AI总结">博客添加AI总结</a><time datetime="2025-08-12T01:46:25.000Z" title="发表于 2025-08-12 09:46:25">2025-08-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/a6ab0925/" title="利用插件自定义页脚菜单"><img src="https://pic.biss.click/image/a49d986a-7430-4fa5-89dd-13dee416632f.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="利用插件自定义页脚菜单"></a><div class="content"><a class="title" href="/posts/a6ab0925/" title="利用插件自定义页脚菜单">利用插件自定义页脚菜单</a><time datetime="2025-08-12T01:19:16.000Z" title="发表于 2025-08-12 09:19:16">2025-08-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/8bdb35fb/" title="自定义右键菜单"><img src="https://pic.biss.click/image/9c4021c3-3111-4e19-acca-52ec899aa0b4.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="自定义右键菜单"></a><div class="content"><a class="title" href="/posts/8bdb35fb/" title="自定义右键菜单">自定义右键菜单</a><time datetime="2025-08-11T08:02:12.000Z" title="发表于 2025-08-11 16:02:12">2025-08-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/da17d00/" title="在侧边栏中添加欢迎信息"><img src="https://pic.biss.click/image/c0211558-17e4-46d2-9a35-e12f16f3f900.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="在侧边栏中添加欢迎信息"></a><div class="content"><a class="title" href="/posts/da17d00/" title="在侧边栏中添加欢迎信息">在侧边栏中添加欢迎信息</a><time datetime="2025-08-10T11:30:40.000Z" title="发表于 2025-08-10 19:30:40">2025-08-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/ad244066/" title="配置说说页面"><img src="https://pic.biss.click/image/0f3b8150-af77-426f-afc1-36df5ab27b36.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="配置说说页面"></a><div class="content"><a class="title" href="/posts/ad244066/" title="配置说说页面">配置说说页面</a><time datetime="2025-08-10T00:25:39.000Z" title="发表于 2025-08-10 08:25:39">2025-08-10</time></div></div></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/posts/5785bd01/" title="新年快乐！">新年快乐！</a><time datetime="2026-02-13T22:56:18.000Z" title="发表于 2026-02-14 06:56:18">2026-02-14</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/7e921903/" title="添加网站左上角菜单"><img src="https://pic.biss.click/image/a40baba1-b296-4b3b-a781-da45bffb1b95.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="添加网站左上角菜单"></a><div class="content"><a class="title" href="/posts/7e921903/" title="添加网站左上角菜单">添加网站左上角菜单</a><time datetime="2026-02-09T23:11:14.000Z" title="发表于 2026-02-10 07:11:14">2026-02-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/d2c8521/" title="将博客仓库转移到gitea"><img src="https://pic.biss.click/image/f9767ecf-b8de-461b-8e62-8f7444297ea6.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="将博客仓库转移到gitea"></a><div class="content"><a class="title" href="/posts/d2c8521/" title="将博客仓库转移到gitea">将博客仓库转移到gitea</a><time datetime="2026-02-07T04:30:39.000Z" title="发表于 2026-02-07 12:30:39">2026-02-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/34725d47/" title="安装gitea"><img src="https://pic.biss.click/image/961bc881-cb0a-4ab7-ace5-9990e71c30a0.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="安装gitea"></a><div class="content"><a class="title" href="/posts/34725d47/" title="安装gitea">安装gitea</a><time datetime="2026-02-06T22:32:04.000Z" title="发表于 2026-02-07 06:32:04">2026-02-07</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/posts/f287c563/" title="添加typesense搜索">添加typesense搜索</a><time datetime="2026-02-05T05:14:16.000Z" title="发表于 2026-02-05 13:14:16">2026-02-05</time></div></div></div></div></div></div></main><footer id="footer"><div class="footer-other"><div class="footer-copyright"><span class="copyright">© 2025 - 2026 By biss</span><span class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></span></div><div class="footer_custom_text"><p> <a style="margin-inline:5px" target="_blank" href="https://hexo.io/zh-cn/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="hexo 8.1"></a> <a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org"><img src="https://img.shields.io/badge/Theme-Butterfly-pink?style=flat" title="butterfly主题"></a> <a style="margin-inline:5px" target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA-red?style=flat&logo=alchemy" title="CC BY-NC-SA 4.0"></a> </p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="前往评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://unpkg.com/@fancyapps/ui/dist/fancybox/fancybox.umd.js"></script><script src="https://unpkg.com/node-snackbar/dist/snackbar.min.js"></script><div class="js-pjax"><script>(() => {
|
||
const loadMathjax = () => {
|
||
if (!window.MathJax) {
|
||
window.MathJax = {
|
||
loader: {
|
||
load: [
|
||
// Four font extension packages (optional)
|
||
//- '[tex]/bbm',
|
||
//- '[tex]/bboldx',
|
||
//- '[tex]/dsfont',
|
||
'[tex]/mhchem'
|
||
],
|
||
paths: {
|
||
'mathjax-newcm': '[mathjax]/../@mathjax/mathjax-newcm-font',
|
||
|
||
//- // Four font extension packages (optional)
|
||
//- 'mathjax-bbm-extension': '[mathjax]/../@mathjax/mathjax-bbm-font-extension',
|
||
//- 'mathjax-bboldx-extension': '[mathjax]/../@mathjax/mathjax-bboldx-font-extension',
|
||
//- 'mathjax-dsfont-extension': '[mathjax]/../@mathjax/mathjax-dsfont-font-extension',
|
||
'mathjax-mhchem-extension': '[mathjax]/../@mathjax/mathjax-mhchem-font-extension'
|
||
}
|
||
},
|
||
output: {
|
||
font: 'mathjax-newcm',
|
||
},
|
||
tex: {
|
||
inlineMath: [['$', '$'], ['\\(', '\\)']],
|
||
tags: 'none',
|
||
packages: {
|
||
'[+]': [
|
||
'mhchem'
|
||
]
|
||
}
|
||
},
|
||
chtml: {
|
||
scale: 1.1
|
||
},
|
||
options: {
|
||
enableMenu: true,
|
||
menuOptions: {
|
||
settings: {
|
||
enrich: false // Turn off Braille and voice narration text automatic generation
|
||
}
|
||
},
|
||
renderActions: {
|
||
findScript: [10, doc => {
|
||
for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
|
||
const display = !!node.type.match(/; *mode=display/)
|
||
const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display)
|
||
const text = document.createTextNode('')
|
||
node.parentNode.replaceChild(text, node)
|
||
math.start = {node: text, delim: '', n: 0}
|
||
math.end = {node: text, delim: '', n: 0}
|
||
doc.math.push(math)
|
||
}
|
||
}, '']
|
||
}
|
||
}
|
||
}
|
||
|
||
const script = document.createElement('script')
|
||
script.src = 'https://unpkg.com/mathjax/tex-mml-chtml.js'
|
||
script.id = 'MathJax-script'
|
||
script.async = true
|
||
document.head.appendChild(script)
|
||
} else {
|
||
MathJax.startup.document.state(0)
|
||
MathJax.texReset()
|
||
MathJax.typesetPromise()
|
||
}
|
||
}
|
||
|
||
btf.addGlobalFn('encrypt', loadMathjax, 'mathjax')
|
||
window.pjax ? loadMathjax() : window.addEventListener('load', loadMathjax)
|
||
})()</script><script>(() => {
|
||
const applyThemeDefaultsConfig = theme => {
|
||
if (theme === 'dark-mode') {
|
||
Chart.defaults.color = "rgba(255, 255, 255, 0.8)"
|
||
Chart.defaults.borderColor = "rgba(255, 255, 255, 0.2)"
|
||
Chart.defaults.scale.ticks.backdropColor = "transparent"
|
||
} else {
|
||
Chart.defaults.color = "rgba(0, 0, 0, 0.8)"
|
||
Chart.defaults.borderColor = "rgba(0, 0, 0, 0.1)"
|
||
Chart.defaults.scale.ticks.backdropColor = "transparent"
|
||
}
|
||
}
|
||
|
||
// Recursively traverse the config object and automatically apply theme-specific color schemes
|
||
const applyThemeConfig = (obj, theme) => {
|
||
if (typeof obj !== 'object' || obj === null) return
|
||
|
||
Object.keys(obj).forEach(key => {
|
||
const value = obj[key]
|
||
// If the property is an object and has theme-specific options, apply them
|
||
if (typeof value === 'object' && value !== null) {
|
||
if (value[theme]) {
|
||
obj[key] = value[theme] // Apply the value for the current theme
|
||
} else {
|
||
// Recursively process child objects
|
||
applyThemeConfig(value, theme)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const runChartJS = ele => {
|
||
window.loadChartJS = true
|
||
|
||
Array.from(ele).forEach((item, index) => {
|
||
const chartSrc = item.firstElementChild
|
||
const chartID = item.getAttribute('data-chartjs-id') || ('chartjs-' + index) // Use custom ID or default ID
|
||
const width = item.getAttribute('data-width')
|
||
const existingCanvas = document.getElementById(chartID)
|
||
|
||
// If a canvas already exists, remove it to avoid rendering duplicates
|
||
if (existingCanvas) {
|
||
existingCanvas.parentNode.remove()
|
||
}
|
||
|
||
const chartDefinition = chartSrc.textContent
|
||
const canvas = document.createElement('canvas')
|
||
canvas.id = chartID
|
||
|
||
const div = document.createElement('div')
|
||
div.className = 'chartjs-wrap'
|
||
|
||
if (width) {
|
||
div.style.width = width
|
||
}
|
||
|
||
div.appendChild(canvas)
|
||
chartSrc.insertAdjacentElement('afterend', div)
|
||
|
||
const ctx = document.getElementById(chartID).getContext('2d')
|
||
|
||
const config = JSON.parse(chartDefinition)
|
||
|
||
const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark-mode' : 'light-mode'
|
||
|
||
// Set default styles (initial setup)
|
||
applyThemeDefaultsConfig(theme)
|
||
|
||
// Automatically traverse the config and apply dual-mode color schemes
|
||
applyThemeConfig(config, theme)
|
||
|
||
new Chart(ctx, config)
|
||
})
|
||
}
|
||
|
||
const loadChartJS = () => {
|
||
const chartJSEle = document.querySelectorAll('#article-container .chartjs-container')
|
||
if (chartJSEle.length === 0) return
|
||
|
||
window.loadChartJS ? runChartJS(chartJSEle) : btf.getScript('https://unpkg.com/chart.js/dist/chart.umd.js').then(() => runChartJS(chartJSEle))
|
||
}
|
||
|
||
// Listen for theme change events
|
||
btf.addGlobalFn('themeChange', loadChartJS, 'chartjs')
|
||
btf.addGlobalFn('encrypt', loadChartJS, 'chartjs')
|
||
|
||
window.pjax ? loadChartJS() : document.addEventListener('DOMContentLoaded', loadChartJS)
|
||
})()</script><script>(() => {
|
||
const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
|
||
const option = null
|
||
|
||
const getCount = () => {
|
||
const countELement = document.getElementById('twikoo-count')
|
||
if(!countELement) return
|
||
twikoo.getCommentsCount({
|
||
envId: 'https://comment.biss.click',
|
||
region: '',
|
||
urls: [window.location.pathname],
|
||
includeReply: false
|
||
}).then(res => {
|
||
countELement.textContent = res[0].count
|
||
}).catch(err => {
|
||
console.error(err)
|
||
})
|
||
}
|
||
|
||
const init = (el = document, path = location.pathname) => {
|
||
twikoo.init({
|
||
el: el.querySelector('#twikoo-wrap'),
|
||
envId: 'https://comment.biss.click',
|
||
region: '',
|
||
onCommentLoaded: () => {
|
||
btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
|
||
},
|
||
...option,
|
||
path: isShuoshuo ? path : (option && option.path) || path
|
||
})
|
||
|
||
|
||
|
||
isShuoshuo && (window.shuoshuoComment.destroyTwikoo = () => {
|
||
if (el.children.length) {
|
||
el.innerHTML = ''
|
||
el.classList.add('no-comment')
|
||
}
|
||
})
|
||
}
|
||
|
||
const loadTwikoo = (el, path) => {
|
||
if (typeof twikoo === 'object') setTimeout(() => init(el, path), 0)
|
||
else btf.getScript('https://unpkg.com/twikoo/dist/twikoo.all.min.js').then(() => init(el, path))
|
||
}
|
||
|
||
if (isShuoshuo) {
|
||
'Twikoo' === 'Twikoo'
|
||
? window.shuoshuoComment = { loadComment: loadTwikoo }
|
||
: window.loadOtherComment = loadTwikoo
|
||
return
|
||
}
|
||
|
||
if ('Twikoo' === 'Twikoo' || !false) {
|
||
if (false) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
|
||
else loadTwikoo()
|
||
} else {
|
||
window.loadOtherComment = loadTwikoo
|
||
}
|
||
})()</script></div><script src="/js/random.js"></script><script src="/js/shuoshuoshouye.js"></script><script src="/js/ai-summary.js"></script><script src="/js/typesense-search.js"></script><script src="/js/statistic.js"></script><script src="/js/footer.js" <script=""></script><script src="https://cdn.jsdmirror.com/npm/echarts@4.9.0/dist/echarts.min.js"></script><script src="https://cdn.jsdmirror.com/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdmirror.com/npm/meting/dist/Meting.min.js"></script><script src="https://cdn.jsdmirror.com/gh/bishshi/welcomemessage/txmap.js"></script><script src="https://cdn.jsdmirror.com/gh/bishshi/rightmenu@1.2/rightmenu.js"></script><script src="https://cdn.jsdmirror.com/gh/bishshi/sidecalendar/calendar.js"></script><script src="https://cdn.jsdmirror.com/npm/chinese-lunar@0.1.4/lib/chinese-lunar.js"></script><script src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script><script src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script><script src="https://unpkg.com/pjax/pjax.min.js" defer="defer"></script><script>document.addEventListener('DOMContentLoaded', () => {
|
||
const pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"]
|
||
|
||
window.pjax = new Pjax({
|
||
elements: 'a:not([target="_blank"])',
|
||
selectors: pjaxSelectors,
|
||
cacheBust: false,
|
||
analytics: false,
|
||
scrollRestoration: false
|
||
})
|
||
|
||
const triggerPjaxFn = (val) => {
|
||
if (!val) return
|
||
Object.values(val).forEach(fn => {
|
||
try {
|
||
fn()
|
||
} catch (err) {
|
||
console.debug('Pjax callback failed:', err)
|
||
}
|
||
})
|
||
}
|
||
|
||
document.addEventListener('pjax:send', () => {
|
||
// removeEventListener
|
||
btf.removeGlobalFnEvent('pjaxSendOnce')
|
||
btf.removeGlobalFnEvent('themeChange')
|
||
|
||
// reset readmode
|
||
const $bodyClassList = document.body.classList
|
||
if ($bodyClassList.contains('read-mode')) $bodyClassList.remove('read-mode')
|
||
|
||
triggerPjaxFn(window.globalFn.pjaxSend)
|
||
})
|
||
|
||
document.addEventListener('pjax:complete', () => {
|
||
btf.removeGlobalFnEvent('pjaxCompleteOnce')
|
||
document.querySelectorAll('script[data-pjax]').forEach(item => {
|
||
const newScript = document.createElement('script')
|
||
const content = item.text || item.textContent || item.innerHTML || ""
|
||
Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
|
||
newScript.appendChild(document.createTextNode(content))
|
||
item.parentNode.replaceChild(newScript, item)
|
||
})
|
||
|
||
triggerPjaxFn(window.globalFn.pjaxComplete)
|
||
})
|
||
|
||
document.addEventListener('pjax:error', e => {
|
||
if (e.request.status === 404) {
|
||
true
|
||
? pjax.loadUrl('/404.html')
|
||
: window.location.href = e.request.responseURL
|
||
}
|
||
})
|
||
})</script><script async="" data-pjax="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><div class="js-pjax" id="rightMenu"><div class="rightMenu-group rightMenu-small"><a class="rightMenu-item" href="javascript:window.history.back();"><i class="fa fa-arrow-left"></i></a><a class="rightMenu-item" href="javascript:window.history.forward();"><i class="fa fa-arrow-right"></i></a><a class="rightMenu-item" href="javascript:window.location.reload();"><i class="fa fa-refresh"></i></a><a class="rightMenu-item" href="javascript:window.scrollTo(0, 0);"><i class="fa fa-arrow-up"></i></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-text"><a class="rightMenu-item" href="javascript:rmf.copySelect();"><i class="fa fa-copy"></i><span>复制</span></a><a class="rightMenu-item" href="javascript:rmf.searchinThisPage();"><i class="fas fa-search"></i><span>站内搜索</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-too"><a class="rightMenu-item" href="javascript:window.open(window.getSelection().toString());window.location.reload();"><i class="fa fa-link"></i><span>转到链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-paste"><a class="rightMenu-item" href="javascript:rmf.paste()"><i class="fa fa-copy"></i><span>粘贴</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-post"><a class="rightMenu-item" href="javascript:rmf.copyWordsLink()"><i class="fa fa-link"></i><span>复制本文地址</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-to"><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>新窗口打开</span></a><a class="rightMenu-item" href="javascript:rmf.open()"><i class="fa fa-link"></i><span>转到链接</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-img"><a class="rightMenu-item" href="javascript:rmf.saveAs()"><i class="fa fa-download"></i><span>保存图片</span></a><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>在新窗口打开</span></a><a class="rightMenu-item" href="javascript:rmf.click()"><i class="fa fa-arrows-alt"></i><span>全屏显示</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制图片链接</span></a></div><div class="rightMenu-group rightMenu-line"><a class="rightMenu-item" href="javascript:randomPost()"><i class="fa fa-paper-plane"></i><span>随便逛逛</span></a><a class="rightMenu-item" href="javascript:rmf.switchDarkMode();"><i class="fa fa-moon"></i><span>昼夜切换</span></a><a class="rightMenu-item" href="javascript:rmf.translate();"><i class="iconfont icon-fanti"></i><span>繁简转换</span></a><a class="rightMenu-item" href="javascript:rmf.switchReadMode();"><i class="fa fa-book"></i><span>阅读模式</span></a><a class="rightMenu-item" href="javascript:pjax.loadUrl("/privacy/");"><i class="fa fa-info-circle"></i><span>隐私声明</span></a><a class="rightMenu-item" href="javascript:pjax.loadUrl("/cookie/");"><i class="fa fa-info-circle"></i><span>Cookie协议</span></a><a class="rightMenu-item" href="javascript:pjax.loadUrl("/cc/");"><i class="fa fa-info-circle"></i><span>版权声明</span></a></div></div><!-- hexo injector body_end start --><script data-pjax="">
|
||
function butterfly_swiper_injector_config(){
|
||
var parent_div_git = document.getElementById('recent-posts');
|
||
var item_html = '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="background:url(https://pic.biss.click/image/63a5c345-cb40-4e92-bc7b-7dc4daaf5b74.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2025-09-28</span><a class="blog-slider__title" onclick="pjax.loadUrl("posts/b57500e9/");" href="javascript:void(0);" alt="">在Openwrt上安装AdguardHome</a><div class="blog-slider__text">还不知道怎么描述哦</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://pic.biss.click/image/961bc881-cb0a-4ab7-ace5-9990e71c30a0.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2026-02-07</span><a class="blog-slider__title" onclick="pjax.loadUrl("posts/34725d47/");" href="javascript:void(0);" alt="">安装gitea</a><div class="blog-slider__text">还不知道怎么描述哦</div></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div>';
|
||
console.log('已挂载butterfly_swiper')
|
||
parent_div_git.insertAdjacentHTML("afterbegin",item_html)
|
||
}
|
||
var elist = 'undefined'.split(',');
|
||
var cpage = location.pathname;
|
||
var epage = '/';
|
||
var flag = 0;
|
||
|
||
for (var i=0;i<elist.length;i++){
|
||
if (cpage.includes(elist[i])){
|
||
flag++;
|
||
}
|
||
}
|
||
|
||
if ((epage ==='all')&&(flag == 0)){
|
||
butterfly_swiper_injector_config();
|
||
}
|
||
else if (epage === cpage){
|
||
butterfly_swiper_injector_config();
|
||
}
|
||
</script><script defer="" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script><script defer="" data-pjax="" src="https://npm.elemecdn.com/hexo-butterfly-swiper-lyx/lib/swiper_init.js"></script><!-- hexo injector body_end end --></body></html> |