552 lines
131 KiB
HTML
552 lines
131 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-23T00:41:17.224Z">
|
||
<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-23T00:41:17.224Z",
|
||
"author": [
|
||
{
|
||
"@type": "Person",
|
||
"name": "biss",
|
||
"url": "https://blog.biss.click"
|
||
}
|
||
]
|
||
}</script><link rel="shortcut icon" href="/images/Bi.ico"><link rel="canonical" href="https://blog.biss.click/posts/8bdb35fb/index.html"><link rel="preconnect" href="//unpkg.com"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://unpkg.com/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://unpkg.com/@fancyapps/ui/dist/fancybox/fancybox.css" media="print" onload="this.media='all'"><script>
|
||
(() => {
|
||
|
||
const saveToLocal = {
|
||
set: (key, value, ttl) => {
|
||
if (!ttl) return
|
||
const expiry = Date.now() + ttl * 86400000
|
||
localStorage.setItem(key, JSON.stringify({ value, expiry }))
|
||
},
|
||
get: key => {
|
||
const itemStr = localStorage.getItem(key)
|
||
if (!itemStr) return undefined
|
||
const { value, expiry } = JSON.parse(itemStr)
|
||
if (Date.now() > expiry) {
|
||
localStorage.removeItem(key)
|
||
return undefined
|
||
}
|
||
return value
|
||
}
|
||
}
|
||
|
||
window.btf = {
|
||
saveToLocal,
|
||
getScript: (url, attr = {}) => new Promise((resolve, reject) => {
|
||
const script = document.createElement('script')
|
||
script.src = url
|
||
script.async = true
|
||
Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
|
||
script.onload = script.onreadystatechange = () => {
|
||
if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
|
||
}
|
||
script.onerror = reject
|
||
document.head.appendChild(script)
|
||
}),
|
||
getCSS: (url, id) => new Promise((resolve, reject) => {
|
||
const link = document.createElement('link')
|
||
link.rel = 'stylesheet'
|
||
link.href = url
|
||
if (id) link.id = id
|
||
link.onload = link.onreadystatechange = () => {
|
||
if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
|
||
}
|
||
link.onerror = reject
|
||
document.head.appendChild(link)
|
||
}),
|
||
addGlobalFn: (key, fn, name = false, parent = window) => {
|
||
if (!true && key.startsWith('pjax')) return
|
||
const globalFn = parent.globalFn || {}
|
||
globalFn[key] = globalFn[key] || {}
|
||
globalFn[key][name || Object.keys(globalFn[key]).length] = fn
|
||
parent.globalFn = globalFn
|
||
}
|
||
}
|
||
|
||
|
||
const activateDarkMode = () => {
|
||
document.documentElement.setAttribute('data-theme', 'dark')
|
||
if (document.querySelector('meta[name="theme-color"]') !== null) {
|
||
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
|
||
}
|
||
}
|
||
const activateLightMode = () => {
|
||
document.documentElement.setAttribute('data-theme', 'light')
|
||
if (document.querySelector('meta[name="theme-color"]') !== null) {
|
||
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
|
||
}
|
||
}
|
||
|
||
btf.activateDarkMode = activateDarkMode
|
||
btf.activateLightMode = activateLightMode
|
||
|
||
const theme = saveToLocal.get('theme')
|
||
|
||
theme === 'dark' ? activateDarkMode() : theme === 'light' ? activateLightMode() : null
|
||
|
||
|
||
const asideStatus = saveToLocal.get('aside-status')
|
||
if (asideStatus !== undefined) {
|
||
document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
|
||
}
|
||
|
||
|
||
const detectApple = () => {
|
||
if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
|
||
document.documentElement.classList.add('apple')
|
||
}
|
||
}
|
||
detectApple()
|
||
|
||
})()
|
||
</script><script>const GLOBAL_CONFIG = {
|
||
root: '/',
|
||
algolia: undefined,
|
||
localSearch: undefined,
|
||
translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
|
||
highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":200,"highlightFullpage":true,"highlightMacStyle":false},
|
||
copy: {
|
||
success: '复制成功',
|
||
error: '复制失败',
|
||
noSupport: '浏览器不支持'
|
||
},
|
||
relativeDate: {
|
||
homepage: false,
|
||
post: false
|
||
},
|
||
runtime: '',
|
||
dateSuffix: {
|
||
just: '刚刚',
|
||
min: '分钟前',
|
||
hour: '小时前',
|
||
day: '天前',
|
||
month: '个月前'
|
||
},
|
||
copyright: undefined,
|
||
lightbox: 'fancybox',
|
||
Snackbar: {"chs_to_cht":"已切换为繁体中文","cht_to_chs":"已切换为简体中文","day_to_night":"已切换为深色模式","night_to_day":"已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"bottom-left"},
|
||
infinitegrid: {
|
||
js: 'https://unpkg.com/@egjs/infinitegrid/dist/infinitegrid.min.js',
|
||
buttonText: '加载更多'
|
||
},
|
||
isPhotoFigcaption: false,
|
||
islazyloadPlugin: false,
|
||
isAnchor: false,
|
||
percent: {
|
||
toc: true,
|
||
rightside: false,
|
||
},
|
||
autoDarkmode: false
|
||
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
|
||
title: '自定义右键菜单',
|
||
isHighlightShrink: false,
|
||
isToc: true,
|
||
pageType: 'post'
|
||
}</script><link rel="stylesheet" href="/css/shuoshuo.css"><link rel="stylesheet" href="/css/shuoshuoshouye.css"><link rel="stylesheet" href="/css/nav.css"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/poem.css"><link rel="stylesheet" href="/css/swiper.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/gh/bishshi/welcomemessage/welcome.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/gh/bishshi/sidecalendar/calendar.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/gh/bishshi/rightmenu/rightmenu.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/gh/bishshi/webfont/font.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/aplayer/dist/APlayer.min.css" media="all" onload="this.media="all""><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn1.tianli0.top/npm/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload="this.media='all'"><!-- hexo injector head_end end --><style type="text/css">
|
||
.spoiler {
|
||
display: inline;
|
||
}
|
||
p.spoiler {
|
||
display: flex;
|
||
}
|
||
.spoiler a {
|
||
pointer-events: none;
|
||
}
|
||
.spoiler-blur, .spoiler-blur > * {
|
||
transition: text-shadow .5s ease;
|
||
}
|
||
.spoiler .spoiler-blur, .spoiler .spoiler-blur > * {
|
||
color: rgba(0, 0, 0, 0);
|
||
background-color: rgba(0, 0, 0, 0);
|
||
text-shadow: 0 0 10px grey;
|
||
cursor: pointer;
|
||
}
|
||
.spoiler .spoiler-blur:hover, .spoiler .spoiler-blur:hover > * {
|
||
text-shadow: 0 0 5px grey;
|
||
}
|
||
.spoiler-box, .spoiler-box > * {
|
||
transition: color .5s ease,
|
||
background-color .5s ease;
|
||
}
|
||
.spoiler .spoiler-box, .spoiler .spoiler-box > * {
|
||
color: black;
|
||
background-color: black;
|
||
text-shadow: none;
|
||
}</style><meta name="generator" content="Hexo 8.1.1"><link rel="alternate" href="/atom.xml" title="Bi's Blog" type="application/atom+xml">
|
||
</head><body><div class="bg-animation" id="web_bg" style="background-image: url(/images/background.png);"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img text-center"><img src="https://free.picui.cn/free/2025/08/10/689845496a283.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"></div><div class="site-data text-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">30</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">10</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 存档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/shuoshuo/"><i class="fa-fw fa-regular fa-comment"></i><span> 说说</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg fixed" id="page-header" style="background-image: url(https://pic.biss.click/image/9c4021c3-3111-4e19-acca-52ec899aa0b4.webp);"><nav id="nav"><span id="blog-info"><div id="ls-menu-container"><i class="fas fa-fingerprint"></i><div id="ls-menu-panel"><div class="ls-section"><div class="ls-title">😀 个人网站</div><div class="ls-grid"><a href="/"><i class="fas fa-rss"></i> 个人博客</a><a target="_blank" rel="noopener" href="https://github.com/bishshi"><i class="fab fa-github"></i> Github</a></div></div><div class="ls-section"><div class="ls-title">😎 常用服务</div><div class="ls-grid"><a target="_blank" rel="noopener" href="https://git.biss.click/biss"><i class="fas fa-code"></i> 代码仓库</a><a target="_blank" rel="noopener" href="https://mm.biss.click"><i class="fas fa-pen-nib"></i> 日常yy</a><a target="_blank" rel="noopener" href="https://statstic.biss.click"><i class="fas fa-users"></i> 访客统计</a><a target="_blank" rel="noopener" href="https://pic.biss.click"><i class="fas fa-image"></i> 图床</a><a target="_blank" rel="noopener" href="https://chat.biss.click"><i class="fas fa-robot"></i> AI网站</a><a target="_blank" rel="noopener" href="https://git.biss.click"><i class="fas fa-code-branch"></i> 代码仓库</a></div></div><div class="ls-section"><div class="ls-title">🛸 实用工具</div><div class="ls-grid"><a target="_blank" rel="noopener" href="https://cover.biss.click"><i class="fas fa-palette"></i> 封面设计</a><a target="_blank" rel="noopener" href="https://doc.biss.click"><i class="fas fa-file"></i> 文档服务</a><a target="_blank" rel="noopener" href="https://doc.biss.click"><i class="fas fa-server"></i>服务监测</a><a target="_blank" rel="noopener" href="https://typesense.biss.click"><i class="fas fa-magnifying-glass"></i> 搜索后端</a></div></div></div></div><a class="nav-site-title" href="/"><span class="site-name">Bi's Blog</span></a></span><a class="nav-page-title" href="javascript:void(0);" onclick="btf.scrollToDest(0, 500)"><span class="site-name">自定义右键菜单</span></a><div id="nav-right"><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 存档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/shuoshuo/"><i class="fa-fw fa-regular fa-comment"></i><span> 说说</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div><div id="random-post-button"><a class="site-page social-icon" id="random-post-link" href="javascript:void(0);" onclick="randomPost()"><i class="fas fa-solid fa-shuffle"></i></a></div><div id="search-button"><a class="site-page social-icon search-typesense-trigger"><i class="fas fa-search fa-fw"></i></a></div><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="post-info"><h1 class="post-title">自定义右键菜单</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2025-08-11T08:02:12.000Z" title="发表于 2025-08-11 16:02:12">2025-08-11</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2026-02-23T00:41:17.224Z" title="更新于 2026-02-23 08:41:17">2026-02-23</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-23 08:41:17"}" 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/b5866b9e/" title="利用 SiteMap 随机访问站内页面"><img class="cover" src="https://pic.biss.click/image/2f13dc34-ccef-46f9-96d9-531e049fede5.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">利用 SiteMap 随机访问站内页面</div></div><div class="info-2"><div class="info-item-1">在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。比较简单只有js代码，但是先要安装插件 前置条件1npm install hexo-generator-sitemap --save 在站点配置文件 _config.yaml中添加： 1234567sitemap: path: - sitemap.xml - sitemap.txt rel: false tags: true categories: true 添加js在主题目录下添加·\themes\butterfly\source\js\random.js 12345678910111213function randomPost() { fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {...</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" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2025-08-10</div><div class="info-item-2">在侧边栏中添加欢迎信息</div></div><div class="info-2"><div class="info-item-1">效果展示 开始折腾申请腾讯地图的api key 🪧引用站外地址，不保证站点的可用性和安全性 腾讯地图 Tencent 自行查看文档,要注意在填写信任域名时不填 https:// 添加js在主题 /source/js/目录下添加 txmap.js 有一个更完善的js脚本 🪧引用站外地址，不保证站点的可用性和安全性 txmap.js github 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858...</div></div></div></a><a class="pagination-related" href="/posts/33249733/" title="自定义分类条"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2025-08-14</div><div class="info-item-2">自定义分类条</div></div><div class="info-2"><div class="info-item-1">修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...</div></div></div></a><a class="pagination-related" href="/posts/3e61a389/" title="自定义导航栏"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2025-08-13</div><div class="info-item-2">自定义导航栏</div></div><div class="info-2"><div class="info-item-1">最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。 PC 菜单栏修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容 1234567891011121314151617181920212223242526nav#nav span#blog-info a(href=url_for('/') title=config.title) if theme.nav.logo img.site-icon(src=url_for(theme.nav.logo)) if theme.nav.display_title span.site-name=config.title #menus- if (theme.algolia_search.enable || theme.local_search.enable)- #search-button- a.site-page...</div></div></div></a><a class="pagination-related" href="/posts/7e921903/" title="添加网站左上角菜单"><img class="cover" src="https://pic.biss.click/image/a40baba1-b296-4b3b-a781-da45bffb1b95.webp" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2026-02-10</div><div class="info-item-2">添加网站左上角菜单</div></div><div class="info-2"><div class="info-item-1">看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。 🪧引用站外地址，不保证站点的可用性和安全性 liushen liushen 预计做好后是这种效果： 首先，修改\themes\butterfly\layout\includes\header\nav.pug: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051nav#nav //- 左侧区域：包含指纹菜单和网站名 span#blog-info #ls-menu-container i.fas.fa-fingerprint #ls-menu-panel .ls-section .ls-title 😀 个人网站 .ls-grid ...</div></div></div></a><a class="pagination-related" href="/posts/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></div></div><hr class="custom-hr"><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="https://free.picui.cn/free/2025/08/10/689845496a283.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"></div><div class="author-info-name">biss</div><div class="author-info-description"></div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">30</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">10</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/bishshi"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons"><a class="social-icon" href="https://github.com/bishshi" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:bishsh2006@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"></div><div id="welcome-ip-location-info"></div></div><div class="card-widget" id="card-poem"><div id="poem_sentence"></div><div id="poem_info"><div id="poem_dynasty"></div><div id="poem_author"></div></div></div><script src="https://cdn.liumingye.cn/npm/js-heo@1.0.11/poem/jinrishici.js" charset="utf-8"></script><script type="text/javascript">jinrishici.load(function(result) {
|
||
var sentence = document.querySelector("#poem_sentence")
|
||
var author = document.querySelector("#poem_author")
|
||
var dynasty = document.querySelector("#poem_dynasty")
|
||
var sentenceText = result.data.content
|
||
sentenceText = sentenceText.substr(0, sentenceText.length - 1);
|
||
sentence.innerHTML = sentenceText
|
||
dynasty.innerHTML = result.data.origin.dynasty
|
||
author.innerHTML = result.data.origin.author + '《' + result.data.origin.title + '》'
|
||
});</script><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%BC%94%E7%A4%BA"><span class="toc-number">1.</span> <span class="toc-text">演示</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%B0%E5%BB%BApug%E6%96%87%E4%BB%B6"><span class="toc-number">2.</span> <span class="toc-text">新建pug文件</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%B0%E5%BB%BAjs%E6%96%87%E4%BB%B6"><span class="toc-number">3.</span> <span class="toc-text">新建js文件</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAcss"><span class="toc-number">4.</span> <span class="toc-text">创建css</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BC%95%E5%85%A5"><span class="toc-number">5.</span> <span class="toc-text">引入</span></a></li></ol></div></div><div class="card-widget card-post-series"><div class="item-headline"><i class="fa-solid fa-layer-group"></i><span>系列文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/7e921903/" title="添加网站左上角菜单"><img src="https://pic.biss.click/image/a40baba1-b296-4b3b-a781-da45bffb1b95.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="添加网站左上角菜单"></a><div class="content"><a class="title" href="/posts/7e921903/" title="添加网站左上角菜单">添加网站左上角菜单</a><time datetime="2026-02-09T23:11:14.000Z" title="发表于 2026-02-10 07:11:14">2026-02-10</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/posts/f287c563/" title="添加typesense搜索">添加typesense搜索</a><time datetime="2026-02-05T05:14:16.000Z" title="发表于 2026-02-05 13:14:16">2026-02-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/b5601a7e/" title="自定义字体"><img src="https://pic.biss.click/image/6c4f9470-3917-44fb-ba10-30f3c4147592.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="自定义字体"></a><div class="content"><a class="title" href="/posts/b5601a7e/" title="自定义字体">自定义字体</a><time datetime="2026-01-15T23:47:15.000Z" title="发表于 2026-01-16 07:47:15">2026-01-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/5ed2f1e6/" title="在侧边栏添加日历和倒计时"><img src="https://pic.biss.click/image/232af9c6-97ce-42f8-85a8-9338963066e6.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="在侧边栏添加日历和倒计时"></a><div class="content"><a class="title" href="/posts/5ed2f1e6/" title="在侧边栏添加日历和倒计时">在侧边栏添加日历和倒计时</a><time datetime="2026-01-15T23:47:07.000Z" title="发表于 2026-01-16 07:47:07">2026-01-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/ce1ec3fe/" title="使用GitHub推送Hexo到服务器"><img src="https://pic.biss.click/image/e0a08509-dea4-4af7-bafa-c81ca9d1cf8d.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="使用GitHub推送Hexo到服务器"></a><div class="content"><a class="title" href="/posts/ce1ec3fe/" title="使用GitHub推送Hexo到服务器">使用GitHub推送Hexo到服务器</a><time datetime="2025-08-18T09:10:18.000Z" title="发表于 2025-08-18 17:10:18">2025-08-18</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/c6143ad3/" title="自定义页脚（新）"><img src="https://pic.biss.click/image/a49d986a-7430-4fa5-89dd-13dee416632f.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="自定义页脚（新）"></a><div class="content"><a class="title" href="/posts/c6143ad3/" title="自定义页脚（新）">自定义页脚（新）</a><time datetime="2025-08-14T09:05:27.000Z" title="发表于 2025-08-14 17:05:27">2025-08-14</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/posts/33249733/" title="自定义分类条">自定义分类条</a><time datetime="2025-08-14T08:25:49.000Z" title="发表于 2025-08-14 16:25:49">2025-08-14</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/posts/3e61a389/" title="自定义导航栏">自定义导航栏</a><time datetime="2025-08-13T08:12:25.000Z" title="发表于 2025-08-13 16:12:25">2025-08-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/b5866b9e/" title="利用 SiteMap 随机访问站内页面"><img src="https://pic.biss.click/image/2f13dc34-ccef-46f9-96d9-531e049fede5.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="利用 SiteMap 随机访问站内页面"></a><div class="content"><a class="title" href="/posts/b5866b9e/" title="利用 SiteMap 随机访问站内页面">利用 SiteMap 随机访问站内页面</a><time datetime="2025-08-12T07:15:32.000Z" title="发表于 2025-08-12 15:15:32">2025-08-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/41b9aff7/" title="博客添加AI总结"><img src="https://pic.biss.click/image/0d2f2a46-8aa9-42b6-a853-4794222a1492.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="博客添加AI总结"></a><div class="content"><a class="title" href="/posts/41b9aff7/" title="博客添加AI总结">博客添加AI总结</a><time datetime="2025-08-12T01:46:25.000Z" title="发表于 2025-08-12 09:46:25">2025-08-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/a6ab0925/" title="利用插件自定义页脚菜单"><img src="https://pic.biss.click/image/a49d986a-7430-4fa5-89dd-13dee416632f.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="利用插件自定义页脚菜单"></a><div class="content"><a class="title" href="/posts/a6ab0925/" title="利用插件自定义页脚菜单">利用插件自定义页脚菜单</a><time datetime="2025-08-12T01:19:16.000Z" title="发表于 2025-08-12 09:19:16">2025-08-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/8bdb35fb/" title="自定义右键菜单"><img src="https://pic.biss.click/image/9c4021c3-3111-4e19-acca-52ec899aa0b4.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="自定义右键菜单"></a><div class="content"><a class="title" href="/posts/8bdb35fb/" title="自定义右键菜单">自定义右键菜单</a><time datetime="2025-08-11T08:02:12.000Z" title="发表于 2025-08-11 16:02:12">2025-08-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/da17d00/" title="在侧边栏中添加欢迎信息"><img src="https://pic.biss.click/image/c0211558-17e4-46d2-9a35-e12f16f3f900.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="在侧边栏中添加欢迎信息"></a><div class="content"><a class="title" href="/posts/da17d00/" title="在侧边栏中添加欢迎信息">在侧边栏中添加欢迎信息</a><time datetime="2025-08-10T11:30:40.000Z" title="发表于 2025-08-10 19:30:40">2025-08-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/ad244066/" title="配置说说页面"><img src="https://pic.biss.click/image/0f3b8150-af77-426f-afc1-36df5ab27b36.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="配置说说页面"></a><div class="content"><a class="title" href="/posts/ad244066/" title="配置说说页面">配置说说页面</a><time datetime="2025-08-10T00:25:39.000Z" title="发表于 2025-08-10 08:25:39">2025-08-10</time></div></div></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/posts/5785bd01/" title="新年快乐！">新年快乐！</a><time datetime="2026-02-13T22:56:18.000Z" title="发表于 2026-02-14 06:56:18">2026-02-14</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/7e921903/" title="添加网站左上角菜单"><img src="https://pic.biss.click/image/a40baba1-b296-4b3b-a781-da45bffb1b95.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="添加网站左上角菜单"></a><div class="content"><a class="title" href="/posts/7e921903/" title="添加网站左上角菜单">添加网站左上角菜单</a><time datetime="2026-02-09T23:11:14.000Z" title="发表于 2026-02-10 07:11:14">2026-02-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/d2c8521/" title="将博客仓库转移到gitea"><img src="https://pic.biss.click/image/f9767ecf-b8de-461b-8e62-8f7444297ea6.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="将博客仓库转移到gitea"></a><div class="content"><a class="title" href="/posts/d2c8521/" title="将博客仓库转移到gitea">将博客仓库转移到gitea</a><time datetime="2026-02-07T04:30:39.000Z" title="发表于 2026-02-07 12:30:39">2026-02-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/34725d47/" title="安装gitea"><img src="https://pic.biss.click/image/961bc881-cb0a-4ab7-ace5-9990e71c30a0.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="安装gitea"></a><div class="content"><a class="title" href="/posts/34725d47/" title="安装gitea">安装gitea</a><time datetime="2026-02-06T22:32:04.000Z" title="发表于 2026-02-07 06:32:04">2026-02-07</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/posts/f287c563/" title="添加typesense搜索">添加typesense搜索</a><time datetime="2026-02-05T05:14:16.000Z" title="发表于 2026-02-05 13:14:16">2026-02-05</time></div></div></div></div></div></div></main><footer id="footer"><div class="footer-other"><div class="footer-copyright"><span class="copyright">© 2025 - 2026 By biss</span><span class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></span></div><div class="footer_custom_text"><p> <a style="margin-inline:5px" target="_blank" href="https://hexo.io/zh-cn/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="hexo 8.1"></a> <a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org"><img src="https://img.shields.io/badge/Theme-Butterfly-pink?style=flat" title="butterfly主题"></a> <a style="margin-inline:5px" target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA-red?style=flat&logo=alchemy" title="CC BY-NC-SA 4.0"></a> </p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="前往评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://unpkg.com/@fancyapps/ui/dist/fancybox/fancybox.umd.js"></script><script src="https://unpkg.com/node-snackbar/dist/snackbar.min.js"></script><div class="js-pjax"><script>(() => {
|
||
const loadMathjax = () => {
|
||
if (!window.MathJax) {
|
||
window.MathJax = {
|
||
loader: {
|
||
load: [
|
||
// Four font extension packages (optional)
|
||
//- '[tex]/bbm',
|
||
//- '[tex]/bboldx',
|
||
//- '[tex]/dsfont',
|
||
'[tex]/mhchem'
|
||
],
|
||
paths: {
|
||
'mathjax-newcm': '[mathjax]/../@mathjax/mathjax-newcm-font',
|
||
|
||
//- // Four font extension packages (optional)
|
||
//- 'mathjax-bbm-extension': '[mathjax]/../@mathjax/mathjax-bbm-font-extension',
|
||
//- 'mathjax-bboldx-extension': '[mathjax]/../@mathjax/mathjax-bboldx-font-extension',
|
||
//- 'mathjax-dsfont-extension': '[mathjax]/../@mathjax/mathjax-dsfont-font-extension',
|
||
'mathjax-mhchem-extension': '[mathjax]/../@mathjax/mathjax-mhchem-font-extension'
|
||
}
|
||
},
|
||
output: {
|
||
font: 'mathjax-newcm',
|
||
},
|
||
tex: {
|
||
inlineMath: [['$', '$'], ['\\(', '\\)']],
|
||
tags: 'none',
|
||
packages: {
|
||
'[+]': [
|
||
'mhchem'
|
||
]
|
||
}
|
||
},
|
||
chtml: {
|
||
scale: 1.1
|
||
},
|
||
options: {
|
||
enableMenu: true,
|
||
menuOptions: {
|
||
settings: {
|
||
enrich: false // Turn off Braille and voice narration text automatic generation
|
||
}
|
||
},
|
||
renderActions: {
|
||
findScript: [10, doc => {
|
||
for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
|
||
const display = !!node.type.match(/; *mode=display/)
|
||
const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display)
|
||
const text = document.createTextNode('')
|
||
node.parentNode.replaceChild(text, node)
|
||
math.start = {node: text, delim: '', n: 0}
|
||
math.end = {node: text, delim: '', n: 0}
|
||
doc.math.push(math)
|
||
}
|
||
}, '']
|
||
}
|
||
}
|
||
}
|
||
|
||
const script = document.createElement('script')
|
||
script.src = 'https://unpkg.com/mathjax/tex-mml-chtml.js'
|
||
script.id = 'MathJax-script'
|
||
script.async = true
|
||
document.head.appendChild(script)
|
||
} else {
|
||
MathJax.startup.document.state(0)
|
||
MathJax.texReset()
|
||
MathJax.typesetPromise()
|
||
}
|
||
}
|
||
|
||
btf.addGlobalFn('encrypt', loadMathjax, 'mathjax')
|
||
window.pjax ? loadMathjax() : window.addEventListener('load', loadMathjax)
|
||
})()</script><script>(() => {
|
||
const applyThemeDefaultsConfig = theme => {
|
||
if (theme === 'dark-mode') {
|
||
Chart.defaults.color = "rgba(255, 255, 255, 0.8)"
|
||
Chart.defaults.borderColor = "rgba(255, 255, 255, 0.2)"
|
||
Chart.defaults.scale.ticks.backdropColor = "transparent"
|
||
} else {
|
||
Chart.defaults.color = "rgba(0, 0, 0, 0.8)"
|
||
Chart.defaults.borderColor = "rgba(0, 0, 0, 0.1)"
|
||
Chart.defaults.scale.ticks.backdropColor = "transparent"
|
||
}
|
||
}
|
||
|
||
// Recursively traverse the config object and automatically apply theme-specific color schemes
|
||
const applyThemeConfig = (obj, theme) => {
|
||
if (typeof obj !== 'object' || obj === null) return
|
||
|
||
Object.keys(obj).forEach(key => {
|
||
const value = obj[key]
|
||
// If the property is an object and has theme-specific options, apply them
|
||
if (typeof value === 'object' && value !== null) {
|
||
if (value[theme]) {
|
||
obj[key] = value[theme] // Apply the value for the current theme
|
||
} else {
|
||
// Recursively process child objects
|
||
applyThemeConfig(value, theme)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const runChartJS = ele => {
|
||
window.loadChartJS = true
|
||
|
||
Array.from(ele).forEach((item, index) => {
|
||
const chartSrc = item.firstElementChild
|
||
const chartID = item.getAttribute('data-chartjs-id') || ('chartjs-' + index) // Use custom ID or default ID
|
||
const width = item.getAttribute('data-width')
|
||
const existingCanvas = document.getElementById(chartID)
|
||
|
||
// If a canvas already exists, remove it to avoid rendering duplicates
|
||
if (existingCanvas) {
|
||
existingCanvas.parentNode.remove()
|
||
}
|
||
|
||
const chartDefinition = chartSrc.textContent
|
||
const canvas = document.createElement('canvas')
|
||
canvas.id = chartID
|
||
|
||
const div = document.createElement('div')
|
||
div.className = 'chartjs-wrap'
|
||
|
||
if (width) {
|
||
div.style.width = width
|
||
}
|
||
|
||
div.appendChild(canvas)
|
||
chartSrc.insertAdjacentElement('afterend', div)
|
||
|
||
const ctx = document.getElementById(chartID).getContext('2d')
|
||
|
||
const config = JSON.parse(chartDefinition)
|
||
|
||
const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark-mode' : 'light-mode'
|
||
|
||
// Set default styles (initial setup)
|
||
applyThemeDefaultsConfig(theme)
|
||
|
||
// Automatically traverse the config and apply dual-mode color schemes
|
||
applyThemeConfig(config, theme)
|
||
|
||
new Chart(ctx, config)
|
||
})
|
||
}
|
||
|
||
const loadChartJS = () => {
|
||
const chartJSEle = document.querySelectorAll('#article-container .chartjs-container')
|
||
if (chartJSEle.length === 0) return
|
||
|
||
window.loadChartJS ? runChartJS(chartJSEle) : btf.getScript('https://unpkg.com/chart.js/dist/chart.umd.js').then(() => runChartJS(chartJSEle))
|
||
}
|
||
|
||
// Listen for theme change events
|
||
btf.addGlobalFn('themeChange', loadChartJS, 'chartjs')
|
||
btf.addGlobalFn('encrypt', loadChartJS, 'chartjs')
|
||
|
||
window.pjax ? loadChartJS() : document.addEventListener('DOMContentLoaded', loadChartJS)
|
||
})()</script><script>(() => {
|
||
const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
|
||
const option = null
|
||
|
||
const getCount = () => {
|
||
const countELement = document.getElementById('twikoo-count')
|
||
if(!countELement) return
|
||
twikoo.getCommentsCount({
|
||
envId: 'https://comment.biss.click',
|
||
region: '',
|
||
urls: [window.location.pathname],
|
||
includeReply: false
|
||
}).then(res => {
|
||
countELement.textContent = res[0].count
|
||
}).catch(err => {
|
||
console.error(err)
|
||
})
|
||
}
|
||
|
||
const init = (el = document, path = location.pathname) => {
|
||
twikoo.init({
|
||
el: el.querySelector('#twikoo-wrap'),
|
||
envId: 'https://comment.biss.click',
|
||
region: '',
|
||
onCommentLoaded: () => {
|
||
btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
|
||
},
|
||
...option,
|
||
path: isShuoshuo ? path : (option && option.path) || path
|
||
})
|
||
|
||
|
||
|
||
isShuoshuo && (window.shuoshuoComment.destroyTwikoo = () => {
|
||
if (el.children.length) {
|
||
el.innerHTML = ''
|
||
el.classList.add('no-comment')
|
||
}
|
||
})
|
||
}
|
||
|
||
const loadTwikoo = (el, path) => {
|
||
if (typeof twikoo === 'object') setTimeout(() => init(el, path), 0)
|
||
else btf.getScript('https://unpkg.com/twikoo/dist/twikoo.all.min.js').then(() => init(el, path))
|
||
}
|
||
|
||
if (isShuoshuo) {
|
||
'Twikoo' === 'Twikoo'
|
||
? window.shuoshuoComment = { loadComment: loadTwikoo }
|
||
: window.loadOtherComment = loadTwikoo
|
||
return
|
||
}
|
||
|
||
if ('Twikoo' === 'Twikoo' || !false) {
|
||
if (false) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
|
||
else loadTwikoo()
|
||
} else {
|
||
window.loadOtherComment = loadTwikoo
|
||
}
|
||
})()</script></div><script src="/js/random.js"></script><script src="/js/shuoshuoshouye.js"></script><script src="/js/ai-summary.js"></script><script src="/js/typesense-search.js"></script><script src="/js/statistic.js"></script><script src="/js/footer.js" <script=""></script><script src="https://cdn.jsdmirror.com/npm/echarts@4.9.0/dist/echarts.min.js"></script><script src="https://cdn.jsdmirror.com/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdmirror.com/npm/meting/dist/Meting.min.js"></script><script src="https://cdn.jsdmirror.com/gh/bishshi/welcomemessage/txmap.js"></script><script src="https://cdn.jsdmirror.com/gh/bishshi/rightmenu@1.2/rightmenu.js"></script><script src="https://cdn.jsdmirror.com/gh/bishshi/sidecalendar/calendar.js"></script><script src="https://cdn.jsdmirror.com/npm/chinese-lunar@0.1.4/lib/chinese-lunar.js"></script><script src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script><script src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script><script src="https://unpkg.com/pjax/pjax.min.js" defer="defer"></script><script>document.addEventListener('DOMContentLoaded', () => {
|
||
const pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"]
|
||
|
||
window.pjax = new Pjax({
|
||
elements: 'a:not([target="_blank"])',
|
||
selectors: pjaxSelectors,
|
||
cacheBust: false,
|
||
analytics: false,
|
||
scrollRestoration: false
|
||
})
|
||
|
||
const triggerPjaxFn = (val) => {
|
||
if (!val) return
|
||
Object.values(val).forEach(fn => {
|
||
try {
|
||
fn()
|
||
} catch (err) {
|
||
console.debug('Pjax callback failed:', err)
|
||
}
|
||
})
|
||
}
|
||
|
||
document.addEventListener('pjax:send', () => {
|
||
// removeEventListener
|
||
btf.removeGlobalFnEvent('pjaxSendOnce')
|
||
btf.removeGlobalFnEvent('themeChange')
|
||
|
||
// reset readmode
|
||
const $bodyClassList = document.body.classList
|
||
if ($bodyClassList.contains('read-mode')) $bodyClassList.remove('read-mode')
|
||
|
||
triggerPjaxFn(window.globalFn.pjaxSend)
|
||
})
|
||
|
||
document.addEventListener('pjax:complete', () => {
|
||
btf.removeGlobalFnEvent('pjaxCompleteOnce')
|
||
document.querySelectorAll('script[data-pjax]').forEach(item => {
|
||
const newScript = document.createElement('script')
|
||
const content = item.text || item.textContent || item.innerHTML || ""
|
||
Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
|
||
newScript.appendChild(document.createTextNode(content))
|
||
item.parentNode.replaceChild(newScript, item)
|
||
})
|
||
|
||
triggerPjaxFn(window.globalFn.pjaxComplete)
|
||
})
|
||
|
||
document.addEventListener('pjax:error', e => {
|
||
if (e.request.status === 404) {
|
||
true
|
||
? pjax.loadUrl('/404.html')
|
||
: window.location.href = e.request.responseURL
|
||
}
|
||
})
|
||
})</script><script async="" data-pjax="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><div class="js-pjax" id="rightMenu"><div class="rightMenu-group rightMenu-small"><a class="rightMenu-item" href="javascript:window.history.back();"><i class="fa fa-arrow-left"></i></a><a class="rightMenu-item" href="javascript:window.history.forward();"><i class="fa fa-arrow-right"></i></a><a class="rightMenu-item" href="javascript:window.location.reload();"><i class="fa fa-refresh"></i></a><a class="rightMenu-item" href="javascript:window.scrollTo(0, 0);"><i class="fa fa-arrow-up"></i></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-text"><a class="rightMenu-item" href="javascript:rmf.copySelect();"><i class="fa fa-copy"></i><span>复制</span></a><a class="rightMenu-item" href="javascript:rmf.searchinThisPage();"><i class="fas fa-search"></i><span>站内搜索</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-too"><a class="rightMenu-item" href="javascript:window.open(window.getSelection().toString());window.location.reload();"><i class="fa fa-link"></i><span>转到链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-paste"><a class="rightMenu-item" href="javascript:rmf.paste()"><i class="fa fa-copy"></i><span>粘贴</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-post"><a class="rightMenu-item" href="javascript:rmf.copyWordsLink()"><i class="fa fa-link"></i><span>复制本文地址</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-to"><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>新窗口打开</span></a><a class="rightMenu-item" href="javascript:rmf.open()"><i class="fa fa-link"></i><span>转到链接</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-img"><a class="rightMenu-item" href="javascript:rmf.saveAs()"><i class="fa fa-download"></i><span>保存图片</span></a><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>在新窗口打开</span></a><a class="rightMenu-item" href="javascript:rmf.click()"><i class="fa fa-arrows-alt"></i><span>全屏显示</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制图片链接</span></a></div><div class="rightMenu-group rightMenu-line"><a class="rightMenu-item" href="javascript:randomPost()"><i class="fa fa-paper-plane"></i><span>随便逛逛</span></a><a class="rightMenu-item" href="javascript:rmf.switchDarkMode();"><i class="fa fa-moon"></i><span>昼夜切换</span></a><a class="rightMenu-item" href="javascript:rmf.translate();"><i class="iconfont icon-fanti"></i><span>繁简转换</span></a><a class="rightMenu-item" href="javascript:rmf.switchReadMode();"><i class="fa fa-book"></i><span>阅读模式</span></a><a class="rightMenu-item" href="javascript:pjax.loadUrl("/privacy/");"><i class="fa fa-info-circle"></i><span>隐私声明</span></a><a class="rightMenu-item" href="javascript:pjax.loadUrl("/cookie/");"><i class="fa fa-info-circle"></i><span>Cookie协议</span></a><a class="rightMenu-item" href="javascript:pjax.loadUrl("/cc/");"><i class="fa fa-info-circle"></i><span>版权声明</span></a></div></div><!-- hexo injector body_end start --><script data-pjax="">
|
||
function butterfly_swiper_injector_config(){
|
||
var parent_div_git = document.getElementById('recent-posts');
|
||
var item_html = '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="background:url(https://pic.biss.click/image/63a5c345-cb40-4e92-bc7b-7dc4daaf5b74.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2025-09-28</span><a class="blog-slider__title" onclick="pjax.loadUrl("posts/b57500e9/");" href="javascript:void(0);" alt="">在Openwrt上安装AdguardHome</a><div class="blog-slider__text">还不知道怎么描述哦</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://pic.biss.click/image/961bc881-cb0a-4ab7-ace5-9990e71c30a0.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2026-02-07</span><a class="blog-slider__title" onclick="pjax.loadUrl("posts/34725d47/");" href="javascript:void(0);" alt="">安装gitea</a><div class="blog-slider__text">还不知道怎么描述哦</div></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div>';
|
||
console.log('已挂载butterfly_swiper')
|
||
parent_div_git.insertAdjacentHTML("afterbegin",item_html)
|
||
}
|
||
var elist = 'undefined'.split(',');
|
||
var cpage = location.pathname;
|
||
var epage = '/';
|
||
var flag = 0;
|
||
|
||
for (var i=0;i<elist.length;i++){
|
||
if (cpage.includes(elist[i])){
|
||
flag++;
|
||
}
|
||
}
|
||
|
||
if ((epage ==='all')&&(flag == 0)){
|
||
butterfly_swiper_injector_config();
|
||
}
|
||
else if (epage === cpage){
|
||
butterfly_swiper_injector_config();
|
||
}
|
||
</script><script defer="" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script><script defer="" data-pjax="" src="https://npm.elemecdn.com/hexo-butterfly-swiper-lyx/lib/swiper_init.js"></script><!-- hexo injector body_end end --></body></html> |