biss
552 lines
133 KiB
HTML
552 lines
133 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-26T11:44:54.740Z">
|
||
<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-26T11:44:54.740Z",
|
||
"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">32</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-26T11:44:54.740Z" title="更新于 2026-02-26 19:44:54">2026-02-26</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-26 19:44:54"}" 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/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/b5601a7e/" title="自定义字体"><img class="cover" src="https://pic.biss.click/image/6c4f9470-3917-44fb-ba10-30f3c4147592.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-01-16</div><div class="info-item-2">自定义字体</div></div><div class="info-2"><div class="info-item-1">今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示 2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。 选择字体首先在网上查找自己喜欢的字体，这里有一个网站 🪧引用站外地址，不保证站点的可用性和安全性 中文开源字体集 Open Source Fonts Collection for Chinese 开源字体 找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站： 🪧引用站外地址，不保证站点的可用性和安全性 转换网站 ttf2woff2 利用这个网站把下载的ttf字体文件转换成woff2格式。 添加字体新建一个css文件 ...</div></div></div></a><a class="pagination-related" href="/posts/ce1ec3fe/" title="使用GitHub推送Hexo到服务器"><img class="cover" src="https://pic.biss.click/image/e0a08509-dea4-4af7-bafa-c81ca9d1cf8d.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-18</div><div class="info-item-2">使用GitHub推送Hexo到服务器</div></div><div class="info-2"><div class="info-item-1">1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...</div></div></div></a><a class="pagination-related" href="/posts/c6143ad3/" title="自定义页脚（新）"><img class="cover" src="https://pic.biss.click/image/a49d986a-7430-4fa5-89dd-13dee416632f.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-14</div><div class="info-item-2">自定义页脚（新）</div></div><div class="info-2"><div class="info-item-1">添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...</div></div></div></a><a class="pagination-related" href="/posts/59c8572a/" title="搭建Owncloud并集成Onlyoffice"><img class="cover" src="https://pic.biss.click/image/a990c4b7-3081-4cd0-b632-2de189b299bf.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-26</div><div class="info-item-2">搭建Owncloud并集成Onlyoffice</div></div><div class="info-2"><div class="info-item-1">引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...</div></div></div></a><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></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">32</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"><a class="thumbnail" href="/posts/7baa41fc/" title="自建bitwarden服务"><img src="https://pic.biss.click/image/deaddd0c-e808-45f3-8354-3c44b2b65167.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="自建bitwarden服务"></a><div class="content"><a class="title" href="/posts/7baa41fc/" title="自建bitwarden服务">自建bitwarden服务</a><time datetime="2026-02-25T03:09:23.000Z" title="发表于 2026-02-25 11:09:23">2026-02-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/56f57c0b/" title="自建renovate-bot"><img src="https://pic.biss.click/image/fca16741-64fa-495b-aa5e-a2ef077461ef.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="自建renovate-bot"></a><div class="content"><a class="title" href="/posts/56f57c0b/" title="自建renovate-bot">自建renovate-bot</a><time datetime="2026-02-23T02:49:17.000Z" title="发表于 2026-02-23 10:49:17">2026-02-23</time></div></div><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></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> <a href="https://www.trustssl.cc/ipv6.php?domain=blog.biss.click" title="本站已支持IPv6访问" target="_blank"><img src="https://static.coolcdn.cn/images/ipv6.svg"></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/fca16741-64fa-495b-aa5e-a2ef077461ef.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-23</span><a class="blog-slider__title" onclick="pjax.loadUrl("posts/56f57c0b/");" href="javascript:void(0);" alt="">自建renovate-bot</a><div class="blog-slider__text">还不知道怎么描述哦</div></div></div><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> |