935 lines
70 KiB
HTML
935 lines
70 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="这篇文章详细介绍了如何部署Hexo博客到Linux服务器,包括前提条件、本地环境准备、SSH密钥认证、配置步骤、工作流程以及故障排除提示。文章首先列出了部署所需满足的条件,然后逐步指导读者如何在服务器上安装Git、创建裸仓库、配置Git钩子以自动部署Hexo博客,并提供了验证部署成功的步骤。最后,文章还给出了一些常见问题的解决建议,帮助读者顺利完成部署。整个过程简单高效,适合需要自动化部署博客的用户。"><meta name="author" content="biss"><meta name="keywords" content="建站手札, 网站"><link rel="canonical" href="https://blog.biss.click/posts/6e5f5039/"><link rel="alternate" type="application/rss+xml" title="Bi's Blog RSS" href="https://blog.biss.click/rss.xml"><meta property="og:site_name" content="Bi's Blog"><meta property="og:locale" content="zh_CN"><meta property="og:type" content="article"><meta property="og:title" content="部署历程 | Bi's Blog"><meta property="og:description" content="这篇文章详细介绍了如何部署Hexo博客到Linux服务器,包括前提条件、本地环境准备、SSH密钥认证、配置步骤、工作流程以及故障排除提示。文章首先列出了部署所需满足的条件,然后逐步指导读者如何在服务器上安装Git、创建裸仓库、配置Git钩子以自动部署Hexo博客,并提供了验证部署成功的步骤。最后,文章还给出了一些常见问题的解决建议,帮助读者顺利完成部署。整个过程简单高效,适合需要自动化部署博客的用户。"><meta property="og:url" content="https://blog.biss.click/posts/6e5f5039/"><meta property="og:image" content="https://pic.biss.click/image/135a0e53-78a0-42f4-a9e7-eaf9628db91e.webp"><meta property="og:image:alt" content="部署历程"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="部署历程 | Bi's Blog"><meta name="twitter:description" content="这篇文章详细介绍了如何部署Hexo博客到Linux服务器,包括前提条件、本地环境准备、SSH密钥认证、配置步骤、工作流程以及故障排除提示。文章首先列出了部署所需满足的条件,然后逐步指导读者如何在服务器上安装Git、创建裸仓库、配置Git钩子以自动部署Hexo博客,并提供了验证部署成功的步骤。最后,文章还给出了一些常见问题的解决建议,帮助读者顺利完成部署。整个过程简单高效,适合需要自动化部署博客的用户。"><meta name="twitter:image" content="https://pic.biss.click/image/135a0e53-78a0-42f4-a9e7-eaf9628db91e.webp"><meta property="article:published_time" content="2025-08-02T19:07:05.000Z"><meta property="article:modified_time" content="2025-08-02T19:07:05.000Z"><meta property="article:author" content="biss"><meta property="article:tag" content="建站手札"><meta property="article:tag" content="网站"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"部署历程","description":"这篇文章详细介绍了如何部署Hexo博客到Linux服务器,包括前提条件、本地环境准备、SSH密钥认证、配置步骤、工作流程以及故障排除提示。文章首先列出了部署所需满足的条件,然后逐步指导读者如何在服务器上安装Git、创建裸仓库、配置Git钩子以自动部署Hexo博客,并提供了验证部署成功的步骤。最后,文章还给出了一些常见问题的解决建议,帮助读者顺利完成部署。整个过程简单高效,适合需要自动化部署博客的用户。","image":["https://pic.biss.click/image/135a0e53-78a0-42f4-a9e7-eaf9628db91e.webp"],"datePublished":"2025-08-02T19:07:05.000Z","dateModified":"2025-08-02T19:07:05.000Z","wordCount":2207,"inLanguage":"zh-CN","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.biss.click/posts/6e5f5039/"},"author":{"@type":"Person","name":"biss","url":"https://github.com/bishshi"},"publisher":{"@type":"Person","name":"biss","image":"https://free.picui.cn/free/2025/08/10/689845496a283.png"},"keywords":"建站手札, 网站","articleSection":"建站手札"}</script><link rel="icon" href="/images/Bi.ico"><link rel="manifest" href="/manifest.webmanifest"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><meta name="theme-color" content="#f7f5ef" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#0b1014" media="(prefers-color-scheme: dark)"><script defer src="https://umami.biss.click/script.js" data-website-id="3d97b310-b241-4fc6-bc9c-68e317fc7d42"></script><script>window.SITE_CONFIG = {"site":{"url":"https://blog.biss.click","name":"Bi's Blog","description":"Personal blog by biss.","language":"zh-CN","domain":"blog.biss.click","slogan":"好奇心转化为代码的空间。","startTime":"2025-01-01T00:00:00+08:00","copyrightStartYear":2025,"license":"内容采用 CC BY-NC-SA 4.0 协议"},"author":{"name":"biss","email":"bishsh2006@gmail.com","github":"https://github.com/bishshi","avatar":"https://free.picui.cn/free/2025/08/10/689845496a283.png"},"comments":{"envId":"https://comment.biss.click","region":"","script":"https://cdn.jsdelivr.net/npm/twikoo@1.7.7/dist/twikoo.min.js"},"analytics":{"umami":{"script":"https://umami.biss.click/script.js","websiteId":"3d97b310-b241-4fc6-bc9c-68e317fc7d42","statsEndpoint":"https://blogumami.biss.click"}},"talks":{"apiUrl":"https://mm.biss.click/api/echo/page","pageSize":30,"homeLimit":6,"cacheKey":"talksCache","cacheTimeKey":"talksCacheTime","cacheDurationMs":1800000,"fallbackAvatar":"https://free.picui.cn/free/2025/08/10/689845496a283.png"},"search":{"apiKey":"2uxQzk7eD2GBCljdSmIiuU3ause7UK9n","server":{"host":"typesense.biss.click","port":"443","protocol":"https"},"indexName":"blogs","searchParams":{"query_by":"title,content","highlight_full_fields":"title,content","per_page":8,"num_typos":1,"typo_tokens_threshold":1,"prefix":true},"ui":{"maxRetries":10,"retryDelay":100,"animationDuration":300,"maxInitRetries":30,"placeholder":"输入关键词寻找故事..."}},"externalLinks":{"waitSeconds":10,"whitelist":["blog.biss.click","biss.click","github.com","localhost","127.0.0.1"]}};</script><script>
|
|
(() => {
|
|
const storageKey = 'site-theme';
|
|
const media = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const getSystemTheme = () => (media.matches ? 'dark' : 'light');
|
|
const getSavedTheme = () => {
|
|
try {
|
|
const theme = localStorage.getItem(storageKey);
|
|
return theme === 'dark' || theme === 'light' ? theme : null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
document.documentElement.dataset.theme = getSavedTheme() || getSystemTheme();
|
|
})();
|
|
</script><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css"><title>部署历程 | Bi's Blog</title><link rel="stylesheet" href="/_astro/BaseLayout.BC0-3eVR.css"></head><body><header class="site-header"><nav class="nav"><a class="brand" href="/" aria-label="Bi's Blog 首页"><span>biss</span><i>.log</i></a><button class="nav-menu-toggle" type="button" aria-label="打开菜单" aria-expanded="false" data-nav-toggle><i class="fa-solid fa-bars nav-menu-open" aria-hidden="true"></i><i class="fa-solid fa-xmark nav-menu-close" aria-hidden="true"></i></button><div class="nav-drawer-backdrop" data-nav-backdrop></div><div class="nav-menu" data-nav-menu><div class="nav-links nav-center"><a href="/archives/"><i class="fa-solid fa-box-archive nav-icon" aria-hidden="true"></i><span>归档</span></a><a href="/categories/"><i class="fa-solid fa-folder-open nav-icon" aria-hidden="true"></i><span>分类</span></a><a href="/tags/"><i class="fa-solid fa-tags nav-icon" aria-hidden="true"></i><span>标签</span></a><a href="/shuoshuo/"><i class="fa-regular fa-comments nav-icon" aria-hidden="true"></i><span>说说</span></a><a href="/about/"><i class="fa-solid fa-heart nav-icon" aria-hidden="true"></i><span>关于</span></a><a href="/link/"><i class="fa-solid fa-link nav-icon" aria-hidden="true"></i><span>友链</span></a></div><div class="nav-links nav-actions"><button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章"><i class="fa-solid fa-shuffle nav-icon" aria-hidden="true"></i><span>随机文章</span></button><button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索"><i class="fa-solid fa-magnifying-glass nav-icon" aria-hidden="true"></i><span>搜索</span></button><button class="nav-console" type="button" aria-label="打开中控台" title="中控台" data-console-open><i class="fa-solid fa-gauge-high nav-icon" aria-hidden="true"></i><span>中控台</span></button><button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle><i class="fa-solid fa-sun theme-toggle-sun nav-icon" aria-hidden="true"></i><i class="fa-solid fa-moon theme-toggle-moon nav-icon" aria-hidden="true"></i></button></div></div></nav></header><div class="control-console" data-console-modal aria-hidden="true"><div class="control-console-backdrop" data-console-close></div><section class="control-console-panel" role="dialog" aria-modal="true" aria-labelledby="control-console-title" tabindex="-1"><header class="control-console-head"><div><p>CONTROL CENTER</p><h2 id="control-console-title">中控台</h2></div><button class="control-console-close" type="button" aria-label="关闭中控台" title="关闭" data-console-close><i class="fa-solid fa-xmark" aria-hidden="true"></i></button></header><div class="control-console-grid"><a class="control-site-card" href="https://biss.click" target="_blank" rel="noreferrer"><i class="fa-solid fa-house-chimney" aria-hidden="true"></i><span><strong>主站入口</strong><em>个人主页与常用入口集合</em></span><small>biss.click</small></a><a class="control-site-card" href="https://mm.biss.click" target="_blank" rel="noreferrer"><i class="fa-regular fa-comments" aria-hidden="true"></i><span><strong>说说动态</strong><em>短句、碎片记录和近况更新</em></span><small>mm.biss.click</small></a><a class="control-site-card" href="https://comment.biss.click" target="_blank" rel="noreferrer"><i class="fa-solid fa-message" aria-hidden="true"></i><span><strong>评论系统</strong><em>Twikoo 评论服务与访客互动</em></span><small>comment.biss.click</small></a><a class="control-site-card" href="https://umami.biss.click" target="_blank" rel="noreferrer"><i class="fa-solid fa-chart-line" aria-hidden="true"></i><span><strong>站点统计</strong><em>Umami 访问统计与站点数据</em></span><small>umami.biss.click</small></a></div><div class="control-console-info" aria-label="站点信息"><section><span>当前站点</span><strong>blog.biss.click</strong></section><section><span>站点作者</span><strong>biss</strong></section><section><span>运行起点</span><strong>2025-01-01</strong></section></div></section></div><main><div class="reading-progress" aria-hidden="true"><span data-reading-progress></span></div><aside class="reading-resume" data-reading-resume hidden aria-live="polite"><div class="reading-resume-icon" aria-hidden="true"><i class="fa-solid fa-book-open"></i></div><div><strong>继续上次阅读?</strong><p>你上次读到了 <span data-reading-resume-percent>--</span>。</p></div><div class="reading-resume-actions"><button type="button" data-reading-continue>继续阅读</button><button type="button" data-reading-restart>从头开始</button></div></aside><section class="post-layout"><article class="article post-article"><header class="article-header article-header-cover"><img class="article-header-cover-img" src="https://pic.biss.click/image/135a0e53-78a0-42f4-a9e7-eaf9628db91e.webp" alt="" loading="eager" decoding="async"><div class="article-header-content"><div class="article-date-line"><time datetime="2025-08-02T19:07:05.000Z">发布于 2025/08/03</time></div><h1>部署历程</h1><div class="article-hero-meta" aria-label="文章信息"><span>发布于 2025/08/03</span><a href="/categories/site-notes/">建站手札</a><span>总字数:2.2k</span><span>阅读时长:6 分钟</span></div></div></header><section class="article-summary-card" aria-label="文章导读"><div class="article-summary-header"><span class="article-summary-brand"><span class="article-summary-icon" aria-hidden="true">↳</span>文章导读</span><span class="article-summary-model">摘要由 Qwen 生成</span></div><p class="article-summary-content"><span class="article-summary-text">这篇文章详细介绍了如何部署Hexo博客到Linux服务器,包括前提条件、本地环境准备、SSH密钥认证、配置步骤、工作流程以及故障排除提示。文章首先列出了部署所需满足的条件,然后逐步指导读者如何在服务器上安装Git、创建裸仓库、配置Git钩子以自动部署Hexo博客,并提供了验证部署成功的步骤。最后,文章还给出了一些常见问题的解决建议,帮助读者顺利完成部署。整个过程简单高效,适合需要自动化部署博客的用户。</span></p></section><aside class="butterfly-note butterfly-note--warning article-outdated-note" aria-label="文章时效性提示" data-freshness-at="2025-08-02T19:07:05.000Z" data-has-new-version="false" hidden><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i><div class="butterfly-note__content"><p>注意:本文最后维护于 2025/08/03,距今已超过一年,部分内容可能已经过时,请结合最新资料判断。</p></div></aside><div class="prose" data-toc="[{"depth":1,"text":"前提条件","id":"前提条件"},{"depth":1,"text":"创建目录 (如果父目录不存在,也一并创建)","id":"创建目录-如果父目录不存在也一并创建"},{"depth":1,"text":"可选的提交信息","id":"可选的提交信息"},{"depth":1,"text":"故障排除提示","id":"故障排除提示"}]"><h1 id="前提条件">前提条件</h1>
|
|
<p>在开始之前,请确保你已满足以下条件:</p>
|
|
<ul>
|
|
<li>服务器:
|
|
<ul>
|
|
<li>安装了 1Panel 面板的 Linux 服务器</li>
|
|
<li>拥有服务器的 SSH 访问权限(本文示例将使用 root 用户,你可以根据实际情况替换为其他有权限的用户)。</li>
|
|
<li>服务器上已安装 Git。</li>
|
|
</ul>
|
|
</li>
|
|
<li>1Panel 配置:</li>
|
|
</ul>
|
|
<p>已通过 1Panel 创建了一个网站(例如 <code>blog.yourdomain.com</code>),并记下该网站的 根目录(<code>Document Root</code>)。通常在 1Panel 中,路径类似于 <code>/opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index</code>。请务必替换为你的实际路径。
|
|
本地环境:</p>
|
|
<ul>
|
|
<li>你的电脑上已安装并配置好 Hexo 博客环境。</li>
|
|
<li>你的电脑上已安装 Git。</li>
|
|
<li>已安装 Hexo Git 部署插件:</li>
|
|
</ul>
|
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">npm</span><span style="color:#9ECBFF"> install</span><span style="color:#9ECBFF"> hexo-deployer-git</span><span style="color:#79B8FF"> --save</span></span></code></pre>
|
|
<p>SSH 密钥认证 (关键):</p>
|
|
<ol>
|
|
<li>你需要在本地电脑生成 SSH 密钥对(如果还没有的话)。</li>
|
|
<li>必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户(如 root)的 ~/.ssh/authorized_keys 文件中。这样可以确保 hexo deploy 时 Git PUSH 操作无需输入密码即可完成。
|
|
配置步骤
|
|
步骤一:在服务器上安装 Git
|
|
如果你的服务器尚未安装 Git,请根据你的 Linux 发行版执行相应命令:</li>
|
|
</ol>
|
|
<p>Debian/Ubuntu:</p>
|
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">sudo</span><span style="color:#9ECBFF"> apt-get</span><span style="color:#9ECBFF"> update</span></span>
|
|
<span class="line"><span style="color:#B392F0">sudo</span><span style="color:#9ECBFF"> apt-get</span><span style="color:#9ECBFF"> install</span><span style="color:#9ECBFF"> git</span><span style="color:#79B8FF"> -y</span></span></code></pre>
|
|
<p>Fedora/RedHat/CentOS:</p>
|
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">sudo</span><span style="color:#9ECBFF"> yum</span><span style="color:#9ECBFF"> install</span><span style="color:#9ECBFF"> git</span><span style="color:#79B8FF"> -y</span></span></code></pre>
|
|
<p>步骤二:在服务器上创建 Git 裸仓库 (Bare Repository)
|
|
我们需要在服务器上创建一个 Git “裸仓库”。裸仓库不包含工作目录(即你看不到项目文件),只存储 Git 的版本历史和对象数据,非常适合作为中心仓库或中转仓库。</p>
|
|
<p>创建仓库目录:
|
|
选择一个路径来存放你的 Git 仓库。例如,我们选择放在 /root/git/ 目录下(你可以自定义路径)。</p>
|
|
<h1 id="创建目录-如果父目录不存在也一并创建">创建目录 (如果父目录不存在,也一并创建)</h1>
|
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">mkdir</span><span style="color:#79B8FF"> -p</span><span style="color:#9ECBFF"> /root/git/</span></span></code></pre>
|
|
<p>修改目录权限 (可选但推荐):
|
|
如果你不是一直使用 root 用户,或者希望更精细地控制权限,可以修改目录所有者和权限。如果使用 root,此步通常可以跳过。</p>
|
|
<p>将目录所有者改为当前用户 (如果用 root 执行,则为 root)</p>
|
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">chown</span><span style="color:#79B8FF"> -R</span><span style="color:#9ECBFF"> USER:USER:USER</span><span style="color:#9ECBFF"> /root/git/</span></span></code></pre>
|
|
<p>设置权限 (所有者完全控制,同组用户读取执行,其他用户读取执行)</p>
|
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">chmod</span><span style="color:#79B8FF"> -R</span><span style="color:#79B8FF"> 755</span><span style="color:#9ECBFF"> /root/git/</span></span></code></pre>
|
|
<p>初始化裸仓库:
|
|
进入你选择的目录,并初始化一个裸仓库。我们将仓库命名为 blog.git (你也可以自定义)。</p>
|
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#79B8FF">cd</span><span style="color:#9ECBFF"> /root/git</span></span>
|
|
<span class="line"><span style="color:#B392F0">git</span><span style="color:#9ECBFF"> init</span><span style="color:#79B8FF"> --bare</span><span style="color:#9ECBFF"> blog.git</span></span></code></pre>
|
|
<p>执行后,你会在 /root/git/ 目录下看到一个名为 blog.git 的文件夹。</p>
|
|
<p>步骤三:在服务器上配置 Git 钩子 (post-receive)
|
|
Git 钩子是在 Git 操作过程中的特定时间点自动执行的脚本。post-receive 钩子在服务器成功接收到推送 (push) 后执行。我们将利用这个钩子将推送过来的 Hexo 文件检出 (checkout) 到 1Panel 的网站根目录。</p>
|
|
<p>创建钩子文件:
|
|
进入裸仓库的 hooks 目录,并创建一个名为 post-receive 的文件。</p>
|
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">vim</span><span style="color:#9ECBFF"> /root/git/blog.git/hooks/post-receive</span></span></code></pre>
|
|
<p>编辑钩子内容:
|
|
在 vim 编辑器中,按 i 进入插入模式,然后粘贴以下脚本内容:</p>
|
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D">#!/bin/bash</span></span>
|
|
<span class="line"><span style="color:#6A737D"># 指定 Hexo 网站文件存放的目录 (!!!!务必替换为你的 1Panel 网站实际根目录!!!!)</span></span>
|
|
<span class="line"><span style="color:#E1E4E8">WORK_TREE</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"/opt/1panel/apps/openresty/openresty/www/sites/blog/index"</span><span style="color:#E1E4E8"> </span></span>
|
|
<span class="line"><span style="color:#6A737D"># 指定 Git 裸仓库的路径 (!!!!务必替换为你的裸仓库实际路径!!!!)</span></span>
|
|
<span class="line"><span style="color:#E1E4E8">GIT_DIR</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"/root/git/blog.git"</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#6A737D"># 执行 Git checkout 命令,强制将内容检出到工作目录</span></span>
|
|
<span class="line"><span style="color:#B392F0">git</span><span style="color:#79B8FF"> --work-tree=${</span><span style="color:#E1E4E8">WORK_TREE</span><span style="color:#79B8FF">}</span><span style="color:#79B8FF"> --git-dir=${</span><span style="color:#E1E4E8">GIT_DIR</span><span style="color:#79B8FF">}</span><span style="color:#9ECBFF"> checkout</span><span style="color:#79B8FF"> -f</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#79B8FF">echo</span><span style="color:#9ECBFF"> "Hexo blog deployed to ${</span><span style="color:#E1E4E8">WORK_TREE</span><span style="color:#9ECBFF">}"</span></span></code></pre>
|
|
<h1 id="可选的提交信息">可选的提交信息</h1>
|
|
<p>请务必修改:</p>
|
|
<p><code>root</code>: 替换为你配置了 SSH 免密登录的服务器用户名。
|
|
<code>YOUR_SERVER_IP</code>: 替换为你的服务器公网 IP 地址或域名。
|
|
<code>22</code>: 如果你的 SSH 端口不是默认的 22,请修改。
|
|
<code>/root/git/blog.git</code>: 替换为你在服务器上创建的裸仓库的 绝对路径。
|
|
<code>branch</code>: 确保这个分支名 (main 或 master) 与你的 post-receive 钩子期望检出的分支一致(默认情况下 checkout -f 会检出仓库的 HEAD 指向的分支,通常是 master 或 main)。
|
|
步骤五:部署你的 Hexo 博客
|
|
一切配置完成后,部署就非常简单了:</p>
|
|
<p>在本地 Hexo 项目目录下,执行标准的生成和部署命令:</p>
|
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">hexo</span><span style="color:#9ECBFF"> clean</span><span style="color:#E1E4E8"> && </span><span style="color:#B392F0">hexo</span><span style="color:#9ECBFF"> generate</span><span style="color:#E1E4E8"> && </span><span style="color:#B392F0">hexo</span><span style="color:#9ECBFF"> deploy</span></span></code></pre>
|
|
<p>或者直接:</p>
|
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">hexo</span><span style="color:#9ECBFF"> d</span></span></code></pre>
|
|
<p>工作流程:</p>
|
|
<p>hexo g 生成静态文件到 public 目录。
|
|
hexo d 使用 hexo-deployer-git 插件:
|
|
将 public 目录的内容提交到一个临时 Git 分支。
|
|
通过 SSH 将这个分支强制推送到你配置的服务器裸仓库 (ssh://root@YOUR_SERVER_IP:22/root/git/blog.git)。
|
|
服务器上的 Git 仓库接收到推送后,自动触发 post-receive 钩子脚本。
|
|
钩子脚本执行 git checkout -f,将最新的网站文件强制检出(部署)到 1Panel 网站的根目录 (/opt/1panel/apps/openresty/openresty/www/sites/blog/index)。
|
|
验证:
|
|
部署命令执行成功后,稍等片刻,然后访问你的博客域名 (<a href="http://blog.yourdomain.com">http://blog.yourdomain.com</a> 或 <a href="https://blog.yourdomain.com)%EF%BC%8C%E5%BA%94%E8%AF%A5%E5%B0%B1%E8%83%BD%E7%9C%8B%E5%88%B0%E6%9B%B4%E6%96%B0%E5%90%8E%E7%9A%84%E5%86%85%E5%AE%B9%E4%BA%86%E3%80%82">https://blog.yourdomain.com),应该就能看到更新后的内容了。</a></p>
|
|
<h1 id="故障排除提示">故障排除提示</h1>
|
|
<ul>
|
|
<li>权限问题: 检查服务器上 Git 仓库目录、网站根目录以及钩子文件的权限是否正确。钩子脚本需要有权限写入网站根目录。</li>
|
|
<li>SSH 密钥问题: 确保本地 SSH 公钥已正确添加到服务器的 authorized_keys 文件中,并且本地 SSH 私钥可用。尝试手动 ssh root@YOUR_SERVER_IP 看是否能免密登录。</li>
|
|
<li>路径错误: 仔细核对 post-receive 脚本中的 —work-tree 和 —git-dir 路径,以及本地 _config.yml 中的 repo 路径是否完全正确。</li>
|
|
<li>钩子未执行: 检查钩子文件是否有执行权限 (chmod +x),文件名是否精确为 post-receive (没有扩展名)。</li>
|
|
<li>查看日志: 如果部署失败,可以尝试在服务器上查看 SSH 或 Git 相关日志,或者在钩子脚本中添加一些 echo 输出到日志文件来调试。</li>
|
|
<li>通过以上配置,你就实现了一个高效、自动化的 Hexo 博客部署流程!</li>
|
|
</ul></div><section class="post-copyright-card" aria-label="文章版权信息"><div class="post-copyright-mark" aria-hidden="true"><span>CC</span></div><div class="post-copyright-main"><h2>部署历程</h2><a class="post-copyright-link" href="/posts/6e5f5039/">/posts/6e5f5039/</a><dl class="post-copyright-meta"><div><dt>作者</dt><dd>biss</dd></div><div><dt>发布于</dt><dd><time datetime="2025-08-02T19:07:05.000Z">2025/08/03</time></dd></div><div><dt>许可协议</dt><dd><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noreferrer">CC BY-NC-SA 4.0</a></dd></div></dl></div><div class="post-copyright-footer"><div class="post-copyright-tags" aria-label="文章标签"><a href="/tags/%E7%BD%91%E7%AB%99/">网站</a></div><div class="post-copyright-actions" aria-label="文章操作"><button class="post-copyright-action is-primary post-share-button" type="button" data-share-title="部署历程" data-share-url="https://blog.biss.click/posts/6e5f5039/" title="分享文章"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"></path><path d="M12 16V4"></path><path d="m7 9 5-5 5 5"></path></svg><span>分享</span></button><a class="post-copyright-action" href="/rss.xml" title="订阅 RSS"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M5 5a14 14 0 0 1 14 14"></path><path d="M5 11a8 8 0 0 1 8 8"></path><path d="M6 18h.01"></path></svg><span>订阅</span></a><a class="post-copyright-action" href="/about/" title="打赏作者"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M7 8h10"></path><path d="M8 8V5h8v3"></path><path d="M6 8h12l-1.5 11h-9L6 8Z"></path><path d="M10 12h4"></path></svg><span>打赏</span></a><a class="post-copyright-icon" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fblog.biss.click%2Fposts%2F6e5f5039%2F&text=%E9%83%A8%E7%BD%B2%E5%8E%86%E7%A8%8B" target="_blank" rel="noreferrer" title="分享到 X"><span aria-hidden="true">x</span></a><a class="post-copyright-icon" href="https://service.weibo.com/share/share.php?url=https%3A%2F%2Fblog.biss.click%2Fposts%2F6e5f5039%2F&title=%E9%83%A8%E7%BD%B2%E5%8E%86%E7%A8%8B" target="_blank" rel="noreferrer" title="分享到微博"><span aria-hidden="true">微</span></a></div></div></section><script>
|
|
(() => {
|
|
document.querySelectorAll('.post-share-button').forEach((button) => {
|
|
button.addEventListener('click', async () => {
|
|
const title = button.dataset.shareTitle || document.title;
|
|
const url = button.dataset.shareUrl || window.location.href;
|
|
const label = button.querySelector('span');
|
|
const originalText = label?.textContent || '分享';
|
|
|
|
try {
|
|
if (navigator.share) {
|
|
await navigator.share({ title, url });
|
|
return;
|
|
}
|
|
|
|
await navigator.clipboard.writeText(url);
|
|
if (label) label.textContent = '已复制';
|
|
} catch {
|
|
if (label) label.textContent = '复制失败';
|
|
} finally {
|
|
window.setTimeout(() => {
|
|
if (label) label.textContent = originalText;
|
|
}, 1800);
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
</script><section id="post-comment" class="twikoo-comments" aria-label="Comments" data-env-id="https://comment.biss.click" data-region data-path="/posts/6e5f5039/" data-script="https://cdn.jsdelivr.net/npm/twikoo@1.7.7/dist/twikoo.min.js"><div class="twikoo-comments-head"><span class="twikoo-comments-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M21 12a8 8 0 0 1-8 8H7l-4 3v-5a8 8 0 1 1 18-6Z"></path></svg></span><div><h2>Comments</h2><p>部署历程</p></div></div><div id="twikoo-wrap" class="twikoo-wrap"></div></section><script>
|
|
(() => {
|
|
const root = document.getElementById('post-comment');
|
|
const wrap = document.getElementById('twikoo-wrap');
|
|
if (!root || !wrap || root.dataset.twikooLoaded === 'true') return;
|
|
|
|
const envId = root.dataset.envId;
|
|
const path = root.dataset.path || window.location.pathname;
|
|
const region = root.dataset.region || undefined;
|
|
if (!envId) return;
|
|
|
|
root.dataset.twikooLoaded = 'true';
|
|
|
|
const initTwikoo = () => {
|
|
if (!window.twikoo || typeof window.twikoo.init !== 'function') return;
|
|
|
|
window.twikoo.init({
|
|
el: wrap,
|
|
envId,
|
|
region,
|
|
path,
|
|
});
|
|
};
|
|
|
|
if (window.twikoo) {
|
|
initTwikoo();
|
|
return;
|
|
}
|
|
|
|
const script = document.createElement('script');
|
|
script.src = root.dataset.script;
|
|
script.defer = true;
|
|
script.onload = initTwikoo;
|
|
script.onerror = () => {
|
|
root.dataset.twikooLoaded = 'false';
|
|
};
|
|
document.head.appendChild(script);
|
|
})();
|
|
</script></article><aside class="article-sidebar" aria-label="文章侧边栏"><section class="sidebar-card article-author-card"><img class="profile-avatar" src="https://free.picui.cn/free/2025/08/10/689845496a283.png" alt="biss" loading="lazy"><div class="profile-name">biss</div><div class="article-author-meta"><span>2025/08/03</span><a href="/categories/site-notes/">建站手札</a></div></section><section class="sidebar-card article-tags-card"><h2><span aria-hidden="true">#</span>文章标签<em>1</em></h2><div class="article-tag-list" aria-label="文章标签"><a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a></div></section><div class="article-sticky-sidebar"><section class="sidebar-card toc-card"><h2><span aria-hidden="true">☰</span>文章目录<em>4</em></h2><nav class="toc-list toc-tree" aria-label="文章目录" data-toc-tree><div class="toc-group is-open" data-toc-group data-heading-id="前提条件"><a class="toc-link toc-link-main" href="#前提条件" data-toc-link data-toc-top><span class="toc-marker" aria-hidden="true"></span><span>前提条件</span></a></div><div class="toc-group" data-toc-group data-heading-id="创建目录-如果父目录不存在也一并创建"><a class="toc-link toc-link-main" href="#创建目录-如果父目录不存在也一并创建" data-toc-link data-toc-top><span class="toc-marker" aria-hidden="true"></span><span>创建目录 (如果父目录不存在,也一并创建)</span></a></div><div class="toc-group" data-toc-group data-heading-id="可选的提交信息"><a class="toc-link toc-link-main" href="#可选的提交信息" data-toc-link data-toc-top><span class="toc-marker" aria-hidden="true"></span><span>可选的提交信息</span></a></div><div class="toc-group" data-toc-group data-heading-id="故障排除提示"><a class="toc-link toc-link-main" href="#故障排除提示" data-toc-link data-toc-top><span class="toc-marker" aria-hidden="true"></span><span>故障排除提示</span></a></div></nav></section><section class="sidebar-card same-category-card"><h2><span aria-hidden="true">▣</span>同类文章<em>8</em></h2><div class="same-category-list"><a href="/posts/8f3b9d21/"><strong>网站迁移日志</strong><time datetime="2026-06-19T16:45:00.000Z">2026/06/20</time></a><a href="/posts/4c91a8f2/"><strong>用 Umami 分享链接给网站信息卡提供统计数据</strong><time datetime="2026-06-19T08:58:00.000Z">2026/06/19</time></a><a href="/posts/7e921903/"><strong>添加网站左上角菜单</strong><time datetime="2026-02-10T07:11:14.000Z">2026/02/10</time></a><a href="/posts/f287c563/"><strong>添加typesense搜索</strong><time datetime="2026-02-05T13:14:16.000Z">2026/02/05</time></a><a href="/posts/b5601a7e/"><strong>自定义字体</strong><time datetime="2026-01-16T07:47:15.000Z">2026/01/16</time></a><a href="/posts/5ed2f1e6/"><strong>在侧边栏添加日历和倒计时</strong><time datetime="2026-01-16T07:47:07.000Z">2026/01/16</time></a><a href="/posts/3a26a97a/"><strong>为博客添加CMS系统</strong><time datetime="2025-08-25T22:03:00.000Z">2025/08/26</time></a><a href="/posts/ce1ec3fe/"><strong>使用GitHub推送Hexo到服务器</strong><time datetime="2025-08-18T17:10:18.000Z">2025/08/19</time></a></div></section><section class="sidebar-card site-info-card" data-site-info-card data-stats-endpoint="https://blogumami.biss.click"><h2><i class="fa-solid fa-chart-line" aria-hidden="true"></i> 网站信息</h2><dl class="site-info-list"><div><dt>文章数目</dt><dd>45</dd></div><div><dt>本站总字数</dt><dd>38,514</dd></div><div><dt>本站访客数</dt><dd data-stat-key="visitors">--</dd></div><div><dt>本站访问量</dt><dd data-stat-key="pageviews">--</dd></div><div><dt>最后更新时间</dt><dd>2026/08/28</dd></div></dl></section><script>
|
|
(() => {
|
|
const cacheDuration = 10 * 60 * 1000;
|
|
const formatter = new Intl.NumberFormat('en-US');
|
|
const cards = [...document.querySelectorAll('[data-site-info-card]')];
|
|
const endpoint = cards.find((card) => card.dataset.statsEndpoint)?.dataset.statsEndpoint;
|
|
|
|
if (!endpoint) return;
|
|
|
|
const cacheKey = `site-info-stats:${endpoint}`;
|
|
|
|
const updateCards = (stats) => {
|
|
const visitors = Number(stats?.visitors);
|
|
const pageviews = Number(stats?.pageviews);
|
|
|
|
cards.forEach((card) => {
|
|
const visitorsEl = card.querySelector('[data-stat-key="visitors"]');
|
|
const pageviewsEl = card.querySelector('[data-stat-key="pageviews"]');
|
|
if (visitorsEl && Number.isFinite(visitors)) visitorsEl.textContent = formatter.format(visitors);
|
|
if (pageviewsEl && Number.isFinite(pageviews)) pageviewsEl.textContent = formatter.format(pageviews);
|
|
});
|
|
};
|
|
|
|
try {
|
|
const cached = JSON.parse(localStorage.getItem(cacheKey) || 'null');
|
|
if (cached?.time && Date.now() - cached.time < cacheDuration) {
|
|
updateCards(cached.data);
|
|
return;
|
|
}
|
|
} catch {
|
|
localStorage.removeItem(cacheKey);
|
|
}
|
|
|
|
fetch(endpoint, { headers: { Accept: 'application/json' } })
|
|
.then((response) => {
|
|
if (!response.ok) throw new Error(`Stats request failed: ${response.status}`);
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
localStorage.setItem(cacheKey, JSON.stringify({ time: Date.now(), data }));
|
|
updateCards(data);
|
|
})
|
|
.catch(() => {
|
|
});
|
|
})();
|
|
</script></div></aside></section></main><footer class="site-footer" aria-label="站点页脚"><div class="footer-inner"><section class="footer-top" aria-label="站点信息"><a class="footer-brand" href="/" aria-label="Bi's Blog 首页"><img src="/images/Bi.ico" alt="" loading="lazy"><span>Bi's Blog</span></a><p class="footer-slogan">好奇心转化为代码的空间。</p></section><section class="footer-contact" aria-label="联系方式"><p>联系方式</p><div class="footer-socials"><a href="mailto:bishsh2006@gmail.com" aria-label="发送邮件" title="发送邮件"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a><a href="/rss.xml" aria-label="订阅 RSS" title="订阅 RSS"><i class="fa-solid fa-rss" aria-hidden="true"></i></a><a href="https://github.com/bishshi" target="_blank" rel="noreferrer" aria-label="GitHub" title="GitHub"><i class="fa-brands fa-github" aria-hidden="true"></i></a></div><nav class="footer-contact-links" aria-label="页脚链接"><a href="/archives/">发展历程</a><span aria-hidden="true">|</span><a href="/privacy/">隐私政策</a></nav></section><section class="footer-bottom" aria-label="版权信息"><div><p>© 2025 - 2026 Bi's Blog</p><p>blog.biss.click | 内容采用 CC BY-NC-SA 4.0 协议</p></div><div class="footer-meta"><p>本站已运行:<span id="site-runtime">计算中...</span></p><p><a href="https://fastly.com/" target="_blank" rel="noreferrer">Fastly</a><span aria-hidden="true">|</span><a href="https://astro.build/" target="_blank" rel="noreferrer">ASTRO</a></p></div></section></div></footer><aside class="hitokoto-card is-collapsed" aria-label="一言" data-hitokoto-card data-astro-cid-fo5bt3gf><div class="hitokoto-card__head" data-astro-cid-fo5bt3gf><button class="hitokoto-card__toggle" type="button" aria-label="展开一言" aria-expanded="false" title="一言" data-hitokoto-toggle data-astro-cid-fo5bt3gf><i class="fa-solid fa-quote-left" aria-hidden="true" data-astro-cid-fo5bt3gf></i><span data-astro-cid-fo5bt3gf>一言</span></button><div class="hitokoto-card__actions" data-astro-cid-fo5bt3gf><button class="hitokoto-card__refresh" type="button" aria-label="换一句" title="换一句" data-hitokoto-refresh data-astro-cid-fo5bt3gf><i class="fa-solid fa-rotate" aria-hidden="true" data-astro-cid-fo5bt3gf></i></button><button class="hitokoto-card__collapse" type="button" aria-label="收起一言" title="收起" data-hitokoto-collapse data-astro-cid-fo5bt3gf><i class="fa-solid fa-chevron-down" aria-hidden="true" data-astro-cid-fo5bt3gf></i></button></div></div><a class="hitokoto-card__text" href="https://hitokoto.cn/" target="_blank" rel="noreferrer" data-hitokoto-text data-astro-cid-fo5bt3gf>获取中...</a><p class="hitokoto-card__from" data-hitokoto-from data-astro-cid-fo5bt3gf>来自 Hitokoto</p></aside><script type="module">(()=>{let e=document.querySelector(`[data-hitokoto-card]`),t=e?.querySelector(`[data-hitokoto-toggle]`),n=e?.querySelector(`[data-hitokoto-text]`),r=e?.querySelector(`[data-hitokoto-from]`),i=e?.querySelector(`[data-hitokoto-refresh]`),a=e?.querySelector(`[data-hitokoto-collapse]`);if(!(e instanceof HTMLElement)||!(t instanceof HTMLButtonElement)||!(n instanceof HTMLAnchorElement)||!(r instanceof HTMLElement))return;let o=`hitokoto-card-cache`,s=`hitokoto-card-expanded`,c={sentence:`生活明朗,万物可爱。`,source:`本地缓存`,url:`https://hitokoto.cn/`},l=[`/`,`/index.html`].includes(window.location.pathname),u=window.matchMedia(`(max-width: 720px)`);function d(){try{let e=localStorage.getItem(s);if(e===`true`)return!0;if(e===`false`)return!1}catch{}return null}function f(e){try{localStorage.setItem(s,String(e))}catch{}}function p(n,{persist:r=!1}={}){e.classList.toggle(`is-collapsed`,!n),t.setAttribute(`aria-expanded`,String(n)),t.setAttribute(`aria-label`,n?`收起一言`:`展开一言`),r&&f(n)}function m(){try{let e=localStorage.getItem(o);if(!e)return null;let t=JSON.parse(e);return!t||typeof t.expiresAt!=`number`||t.expiresAt<=Date.now()?null:t.data}catch{return null}}function h(e){try{localStorage.setItem(o,JSON.stringify({data:e,expiresAt:Date.now()+216e5}))}catch{}}function g(e){n.textContent=e.sentence,n.href=e.url||`https://hitokoto.cn/`,r.textContent=e.source?`出自 ${e.source}`:`来自 Hitokoto`}async function _({force:t=!1}={}){if(!t){let e=m();if(e){g(e);return}}e.classList.add(`is-loading`),n.textContent=`获取中...`;try{let e=await fetch(`https://yiyan.biss.click/api?encode=json`);if(!e.ok)throw Error(`Hitokoto request failed: ${e.status}`);let t=await e.json(),n=t.hitokoto||t.content||t.sentence||t.text,r={sentence:typeof n==`string`&&n.trim()?n.trim():c.sentence,source:typeof t.from==`string`&&t.from.trim()?t.from.trim():`Hitokoto`,url:t.uuid?`https://hitokoto.cn/?uuid=${encodeURIComponent(t.uuid)}`:`https://hitokoto.cn/`};h(r),g(r)}catch(e){console.error(e),g(m()||c)}finally{e.classList.remove(`is-loading`)}}p(d()??(l&&!u.matches)),t.addEventListener(`click`,()=>{p(e.classList.contains(`is-collapsed`),{persist:!0})}),i?.addEventListener(`click`,e=>{e.stopPropagation(),p(!0,{persist:!0}),_({force:!0})}),a?.addEventListener(`click`,e=>{e.stopPropagation(),p(!1,{persist:!0})}),e.addEventListener(`click`,t=>{e.classList.contains(`is-collapsed`)&&(t.target instanceof Element&&t.target.closest(`a, button`)||p(!0,{persist:!0}))}),_()})();</script><div class="custom-context-menu" data-context-menu role="menu" aria-hidden="true"><div class="context-menu-nav" aria-label="页面导航"><button type="button" data-context-action="back" aria-label="后退上一页" title="后退上一页"><i class="fa-solid fa-arrow-left" aria-hidden="true"></i></button><button type="button" data-context-action="forward" aria-label="前进下一页" title="前进下一页"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></button><button type="button" data-context-action="reload" aria-label="刷新页面" title="刷新页面"><i class="fa-solid fa-rotate-right" aria-hidden="true"></i></button><a href="/" aria-label="返回首页" title="返回首页"><i class="fa-solid fa-house" aria-hidden="true"></i></a></div><div class="context-menu-group" data-selection-group hidden><button type="button" data-context-action="copy-selection" data-selection-item><i class="fa-regular fa-copy" aria-hidden="true"></i><span>复制选中文字</span></button><button type="button" data-context-action="search-selection" data-selection-item><i class="fa-brands fa-microsoft" aria-hidden="true"></i><span>用 Bing 搜索</span></button><button type="button" data-context-action="quote-selection" data-selection-item data-comments-item><i class="fa-regular fa-comment-dots" aria-hidden="true"></i><span>引用到评论区</span></button></div><div class="context-menu-group" data-image-group hidden><button type="button" data-context-action="copy-image"><i class="fa-regular fa-image" aria-hidden="true"></i><span>复制图片</span></button><button type="button" data-context-action="open-image"><i class="fa-solid fa-up-right-from-square" aria-hidden="true"></i><span>新页面打开图片</span></button><button type="button" data-context-action="copy-image-url"><i class="fa-solid fa-link" aria-hidden="true"></i><span>复制图片地址</span></button></div><div class="context-menu-group"><a href="/archives/"><i class="fa-solid fa-box-archive" aria-hidden="true"></i><span>时间线</span></a><a href="/categories/"><i class="fa-solid fa-folder" aria-hidden="true"></i><span>分类</span></a><a href="/tags/"><i class="fa-solid fa-hashtag" aria-hidden="true"></i><span>标签</span></a><button type="button" data-context-action="random-post"><i class="fa-solid fa-shuffle" aria-hidden="true"></i><span>随机文章</span></button><button type="button" data-context-action="comments" data-comments-item><i class="fa-regular fa-comment-dots" aria-hidden="true"></i><span>跳转评论区</span></button><button type="button" data-context-action="print"><i class="fa-solid fa-print" aria-hidden="true"></i><span>打印页面</span></button><a href="/cc/"><i class="fa-solid fa-circle-info" aria-hidden="true"></i><span>网站版权</span></a></div></div><div class="context-menu-native-hint" data-context-native-hint role="note" aria-label="Ctrl 右键提示"><kbd>Ctrl</kbd> + 右键:浏览器原生菜单</div><script>
|
|
(() => {
|
|
const menu = document.querySelector('[data-context-menu]');
|
|
if (!menu) return;
|
|
|
|
const nativeHint = document.querySelector('[data-context-native-hint]');
|
|
const selectionItems = [...menu.querySelectorAll('[data-selection-item]')];
|
|
const selectionGroup = menu.querySelector('[data-selection-group]');
|
|
const commentsItems = [...menu.querySelectorAll('[data-comments-item]')];
|
|
const imageGroup = menu.querySelector('[data-image-group]');
|
|
const focusableSelector = 'a[href], button:not([disabled])';
|
|
let lastSelectionText = '';
|
|
let lastImage = null;
|
|
let nativeHintTimer = 0;
|
|
|
|
const isNativeContextTarget = (target) =>
|
|
target instanceof Element &&
|
|
Boolean(target.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]'));
|
|
|
|
const getCommentsTarget = () =>
|
|
document.querySelector('.twikoo-comments, #twikoo-wrap, #twikoo, .tk-comments-container');
|
|
|
|
const getSelectionText = () => String(window.getSelection?.() || '').trim();
|
|
|
|
const getImageTarget = (target) => {
|
|
if (!(target instanceof Element)) return null;
|
|
const image = target.closest('img');
|
|
return image instanceof HTMLImageElement ? image : null;
|
|
};
|
|
|
|
const getImageUrl = () => {
|
|
if (!lastImage) return '';
|
|
return lastImage.currentSrc || lastImage.src || lastImage.getAttribute('src') || '';
|
|
};
|
|
|
|
const copyText = async (text) => {
|
|
if (navigator.clipboard?.writeText) {
|
|
await navigator.clipboard.writeText(text);
|
|
return;
|
|
}
|
|
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = text;
|
|
textarea.setAttribute('readonly', '');
|
|
textarea.style.position = 'fixed';
|
|
textarea.style.inset = '0 auto auto -9999px';
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
textarea.remove();
|
|
};
|
|
|
|
const setMenuState = () => {
|
|
const hasSelection = lastSelectionText.length > 0;
|
|
const hasComments = Boolean(getCommentsTarget());
|
|
const hasImage = Boolean(getImageUrl());
|
|
|
|
selectionItems.forEach((item) => {
|
|
item.hidden = !hasSelection;
|
|
});
|
|
if (selectionGroup) selectionGroup.hidden = !hasSelection;
|
|
|
|
commentsItems.forEach((item) => {
|
|
item.hidden = !hasComments || (item.hasAttribute('data-selection-item') && !hasSelection);
|
|
});
|
|
|
|
if (imageGroup) imageGroup.hidden = !hasImage;
|
|
};
|
|
|
|
const closeMenu = () => {
|
|
menu.classList.remove('is-open');
|
|
menu.setAttribute('aria-hidden', 'true');
|
|
};
|
|
|
|
const openMenu = (x, y) => {
|
|
setMenuState();
|
|
menu.classList.add('is-open');
|
|
menu.setAttribute('aria-hidden', 'false');
|
|
|
|
const rect = menu.getBoundingClientRect();
|
|
const gap = 10;
|
|
const left = Math.min(Math.max(gap, x), window.innerWidth - rect.width - gap);
|
|
const top = Math.min(Math.max(gap, y), window.innerHeight - rect.height - gap);
|
|
|
|
menu.style.left = `${left}px`;
|
|
menu.style.top = `${top}px`;
|
|
};
|
|
|
|
const showNativeHint = () => {
|
|
if (!nativeHint) return;
|
|
window.clearTimeout(nativeHintTimer);
|
|
nativeHint.classList.add('is-visible');
|
|
nativeHintTimer = window.setTimeout(() => {
|
|
nativeHint.classList.remove('is-visible');
|
|
}, 2600);
|
|
};
|
|
|
|
const jumpToComments = () => {
|
|
const target = getCommentsTarget();
|
|
target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
};
|
|
|
|
const quoteToComments = () => {
|
|
jumpToComments();
|
|
window.setTimeout(() => {
|
|
const textarea = document.querySelector('#twikoo textarea, .twikoo-comments textarea, .tk-input textarea');
|
|
if (!(textarea instanceof HTMLTextAreaElement) || !lastSelectionText) return;
|
|
|
|
const quote = lastSelectionText
|
|
.split(/\r?\n/)
|
|
.map((line) => `> ${line}`)
|
|
.join('\n');
|
|
const current = textarea.value.trim();
|
|
textarea.value = current ? `${current}\n\n${quote}\n` : `${quote}\n`;
|
|
textarea.dispatchEvent(new Event('input', { bubbles: true }));
|
|
textarea.focus();
|
|
}, 500);
|
|
};
|
|
|
|
const searchSelection = () => {
|
|
if (!lastSelectionText) return;
|
|
const url = `https://www.bing.com/search?q=${encodeURIComponent(lastSelectionText)}`;
|
|
window.open(url, '_blank', 'noopener,noreferrer');
|
|
};
|
|
|
|
const copyImage = async () => {
|
|
const imageUrl = getImageUrl();
|
|
if (!imageUrl) return;
|
|
|
|
try {
|
|
if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
|
|
throw new Error('Image clipboard is not available.');
|
|
}
|
|
|
|
const response = await fetch(imageUrl, { mode: 'cors' });
|
|
const blob = await response.blob();
|
|
await navigator.clipboard.write([
|
|
new ClipboardItem({ [blob.type || 'image/png']: blob }),
|
|
]);
|
|
} catch {
|
|
await copyText(new URL(imageUrl, window.location.href).toString());
|
|
}
|
|
};
|
|
|
|
const openImage = () => {
|
|
const imageUrl = getImageUrl();
|
|
if (!imageUrl) return;
|
|
window.open(new URL(imageUrl, window.location.href).toString(), '_blank', 'noopener,noreferrer');
|
|
};
|
|
|
|
document.addEventListener('contextmenu', (event) => {
|
|
if (event.ctrlKey) {
|
|
closeMenu();
|
|
nativeHint?.classList.remove('is-visible');
|
|
return;
|
|
}
|
|
|
|
if (isNativeContextTarget(event.target)) return;
|
|
|
|
lastSelectionText = getSelectionText();
|
|
lastImage = getImageTarget(event.target);
|
|
event.preventDefault();
|
|
openMenu(event.clientX, event.clientY);
|
|
showNativeHint();
|
|
});
|
|
|
|
document.addEventListener('click', (event) => {
|
|
const actionTarget = event.target instanceof Element ? event.target.closest('[data-context-action]') : null;
|
|
if (!actionTarget || !menu.contains(actionTarget)) {
|
|
closeMenu();
|
|
return;
|
|
}
|
|
|
|
const action = actionTarget.dataset.contextAction;
|
|
closeMenu();
|
|
|
|
if (action === 'back') history.back();
|
|
if (action === 'forward') history.forward();
|
|
if (action === 'reload') location.reload();
|
|
if (action === 'copy-selection' && lastSelectionText) copyText(lastSelectionText);
|
|
if (action === 'search-selection') searchSelection();
|
|
if (action === 'quote-selection') quoteToComments();
|
|
if (action === 'copy-image') copyImage();
|
|
if (action === 'open-image') openImage();
|
|
if (action === 'copy-image-url') copyText(new URL(getImageUrl(), window.location.href).toString());
|
|
if (action === 'random-post' && typeof window.randomPost === 'function') window.randomPost(actionTarget);
|
|
if (action === 'comments') jumpToComments();
|
|
if (action === 'print') window.print();
|
|
});
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape') closeMenu();
|
|
if (event.key === 'Tab' && menu.classList.contains('is-open')) {
|
|
const items = [...menu.querySelectorAll(focusableSelector)].filter((item) => !item.closest('[hidden]'));
|
|
if (items.length === 0) return;
|
|
const first = items[0];
|
|
const last = items[items.length - 1];
|
|
|
|
if (event.shiftKey && document.activeElement === first) {
|
|
event.preventDefault();
|
|
last.focus();
|
|
} else if (!event.shiftKey && document.activeElement === last) {
|
|
event.preventDefault();
|
|
first.focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
window.addEventListener('scroll', closeMenu, { passive: true });
|
|
window.addEventListener('resize', closeMenu);
|
|
})();
|
|
</script><aside class="pwa-toast" data-pwa-toast hidden role="status" aria-live="polite"><div class="pwa-toast-icon" aria-hidden="true"><i class="fa-solid fa-download"></i></div><div class="pwa-toast-copy"><strong data-pwa-title>PWA 提示</strong><p data-pwa-message></p></div><div class="pwa-toast-actions"><button class="pwa-toast-primary" type="button" data-pwa-primary>确定</button><button class="pwa-toast-close" type="button" data-pwa-close aria-label="关闭提示">稍后</button></div></aside><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://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script><script src="/js/random.js"></script><script src="/js/search/typesense-search.js"></script><script src="/js/external-links.js"></script><script src="/js/pwa.js"></script><script>
|
|
(() => {
|
|
const nav = document.querySelector('.nav');
|
|
const toggle = document.querySelector('[data-nav-toggle]');
|
|
const menu = document.querySelector('[data-nav-menu]');
|
|
const backdrop = document.querySelector('[data-nav-backdrop]');
|
|
if (!nav || !toggle || !menu) return;
|
|
|
|
function setMenu(open) {
|
|
nav.classList.toggle('is-open', open);
|
|
toggle.setAttribute('aria-expanded', String(open));
|
|
toggle.setAttribute('aria-label', open ? '关闭菜单' : '打开菜单');
|
|
menu.setAttribute('aria-hidden', String(!open && window.innerWidth <= 720));
|
|
document.body.classList.toggle('has-nav-drawer', open);
|
|
}
|
|
|
|
toggle.addEventListener('click', () => {
|
|
setMenu(!nav.classList.contains('is-open'));
|
|
});
|
|
|
|
backdrop?.addEventListener('click', () => setMenu(false));
|
|
|
|
menu.addEventListener('click', (event) => {
|
|
if (event.target instanceof Element && event.target.closest('a')) setMenu(false);
|
|
});
|
|
|
|
document.addEventListener('click', (event) => {
|
|
if (!nav.classList.contains('is-open')) return;
|
|
if (event.target instanceof Node && nav.contains(event.target)) return;
|
|
setMenu(false);
|
|
});
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape' && nav.classList.contains('is-open')) setMenu(false);
|
|
});
|
|
|
|
window.addEventListener('resize', () => {
|
|
if (window.innerWidth > 720) setMenu(false);
|
|
else menu.setAttribute('aria-hidden', String(!nav.classList.contains('is-open')));
|
|
});
|
|
|
|
menu.setAttribute('aria-hidden', String(window.innerWidth <= 720));
|
|
})();
|
|
|
|
(() => {
|
|
const modal = document.querySelector('[data-console-modal]');
|
|
const panel = modal?.querySelector('.control-console-panel');
|
|
const openButtons = document.querySelectorAll('[data-console-open]');
|
|
const closeButtons = modal?.querySelectorAll('[data-console-close]') || [];
|
|
if (!modal || !panel || openButtons.length === 0) return;
|
|
|
|
function setConsole(open) {
|
|
modal.classList.toggle('is-open', open);
|
|
modal.setAttribute('aria-hidden', String(!open));
|
|
document.body.classList.toggle('has-control-console', open);
|
|
if (open) panel.focus();
|
|
}
|
|
|
|
openButtons.forEach((button) => {
|
|
button.addEventListener('click', () => setConsole(true));
|
|
});
|
|
|
|
closeButtons.forEach((button) => {
|
|
button.addEventListener('click', () => setConsole(false));
|
|
});
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape' && modal.classList.contains('is-open')) setConsole(false);
|
|
});
|
|
})();
|
|
|
|
(() => {
|
|
const storageKey = 'site-theme';
|
|
const root = document.documentElement;
|
|
const button = document.querySelector('[data-theme-toggle]');
|
|
const media = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const getSystemTheme = () => (media.matches ? 'dark' : 'light');
|
|
const getSavedTheme = () => {
|
|
try {
|
|
const theme = localStorage.getItem(storageKey);
|
|
return theme === 'dark' || theme === 'light' ? theme : null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
};
|
|
const setSavedTheme = (theme) => {
|
|
try {
|
|
if (theme === getSystemTheme()) localStorage.removeItem(storageKey);
|
|
else localStorage.setItem(storageKey, theme);
|
|
} catch {
|
|
// localStorage can be unavailable in strict privacy modes.
|
|
}
|
|
};
|
|
const getTheme = () => getSavedTheme() || getSystemTheme();
|
|
|
|
function applyTheme(theme) {
|
|
root.dataset.theme = theme;
|
|
root.dataset.themeMode = getSavedTheme() ? 'manual' : 'auto';
|
|
button?.setAttribute('aria-label', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
|
|
button?.setAttribute(
|
|
'title',
|
|
getSavedTheme()
|
|
? (theme === 'dark' ? '切换到日间模式' : '切换到夜间模式')
|
|
: `跟随系统:${theme === 'dark' ? '夜间' : '日间'}模式`
|
|
);
|
|
}
|
|
|
|
applyTheme(getTheme());
|
|
|
|
button?.addEventListener('click', () => {
|
|
const nextTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
|
|
setSavedTheme(nextTheme);
|
|
applyTheme(nextTheme);
|
|
});
|
|
|
|
const handleSystemThemeChange = () => {
|
|
if (!getSavedTheme()) applyTheme(getSystemTheme());
|
|
};
|
|
|
|
if (typeof media.addEventListener === 'function') {
|
|
media.addEventListener('change', handleSystemThemeChange);
|
|
} else if (typeof media.addListener === 'function') {
|
|
media.addListener(handleSystemThemeChange);
|
|
}
|
|
})();
|
|
|
|
(() => {
|
|
const runtime = document.getElementById('site-runtime');
|
|
if (!runtime) return;
|
|
|
|
const start = new Date(window.SITE_CONFIG.site.startTime).getTime();
|
|
const pad = (value) => String(value).padStart(2, '0');
|
|
|
|
function updateRuntime() {
|
|
const diff = Math.max(0, Date.now() - start);
|
|
const days = Math.floor(diff / 86400000);
|
|
const hours = Math.floor((diff / 3600000) % 24);
|
|
const minutes = Math.floor((diff / 60000) % 60);
|
|
const seconds = Math.floor((diff / 1000) % 60);
|
|
runtime.textContent = `${days} 天 ${pad(hours)} 时 ${pad(minutes)} 分 ${pad(seconds)} 秒`;
|
|
}
|
|
|
|
updateRuntime();
|
|
window.setInterval(updateRuntime, 1000);
|
|
})();
|
|
</script></body></html><script>(function(){const postSlug = "6e5f5039";
|
|
|
|
(() => {
|
|
const article = document.querySelector('.post-article');
|
|
const progressBar = document.querySelector('[data-reading-progress]');
|
|
const resume = document.querySelector('[data-reading-resume]');
|
|
const resumePercent = document.querySelector('[data-reading-resume-percent]');
|
|
const continueButton = document.querySelector('[data-reading-continue]');
|
|
const restartButton = document.querySelector('[data-reading-restart]');
|
|
if (!article || !progressBar || !resume) return;
|
|
|
|
const storageKey = `reading-progress:${postSlug}`;
|
|
let saved = null;
|
|
let canPersist = true;
|
|
let frame = 0;
|
|
|
|
try {
|
|
saved = JSON.parse(localStorage.getItem(storageKey) || 'null');
|
|
} catch {
|
|
saved = null;
|
|
}
|
|
|
|
const articleMetrics = () => {
|
|
const top = article.getBoundingClientRect().top + window.scrollY;
|
|
const distance = Math.max(1, article.offsetHeight - window.innerHeight);
|
|
return { top, distance };
|
|
};
|
|
|
|
const getProgress = () => {
|
|
const { top, distance } = articleMetrics();
|
|
return Math.min(1, Math.max(0, (window.scrollY - top) / distance));
|
|
};
|
|
|
|
const persist = (progress) => {
|
|
if (!canPersist) return;
|
|
try {
|
|
if (progress >= 0.97) localStorage.removeItem(storageKey);
|
|
else if (progress >= 0.02) localStorage.setItem(storageKey, JSON.stringify({ progress, savedAt: Date.now() }));
|
|
} catch {
|
|
// Storage can be unavailable in strict privacy modes.
|
|
}
|
|
};
|
|
|
|
const update = () => {
|
|
frame = 0;
|
|
const progress = getProgress();
|
|
progressBar.style.transform = `scaleX(${progress})`;
|
|
persist(progress);
|
|
};
|
|
|
|
const requestUpdate = () => {
|
|
if (!frame) frame = window.requestAnimationFrame(update);
|
|
};
|
|
|
|
const closeResume = () => {
|
|
resume.hidden = true;
|
|
canPersist = true;
|
|
};
|
|
|
|
const savedIsFresh = saved && Date.now() - Number(saved.savedAt) < 90 * 86400000;
|
|
const savedProgress = Number(saved?.progress);
|
|
if (savedIsFresh && savedProgress >= 0.05 && savedProgress < 0.97) {
|
|
canPersist = false;
|
|
if (resumePercent) resumePercent.textContent = `${Math.round(savedProgress * 100)}%`;
|
|
window.setTimeout(() => { resume.hidden = false; }, 350);
|
|
}
|
|
|
|
continueButton?.addEventListener('click', () => {
|
|
closeResume();
|
|
const { top, distance } = articleMetrics();
|
|
window.scrollTo({ top: top + distance * savedProgress, behavior: 'smooth' });
|
|
});
|
|
|
|
restartButton?.addEventListener('click', () => {
|
|
try { localStorage.removeItem(storageKey); } catch {}
|
|
closeResume();
|
|
window.scrollTo({ top: Math.max(0, articleMetrics().top - 90), behavior: 'smooth' });
|
|
});
|
|
|
|
update();
|
|
window.addEventListener('scroll', requestUpdate, { passive: true });
|
|
window.addEventListener('resize', requestUpdate);
|
|
window.addEventListener('pagehide', () => persist(getProgress()));
|
|
})();
|
|
})();</script><script>
|
|
(() => {
|
|
document.querySelectorAll('.article-outdated-note[data-freshness-at]').forEach((note) => {
|
|
const freshnessAt = new Date(note.dataset.freshnessAt || '');
|
|
const hasNewVersion = note.dataset.hasNewVersion === 'true';
|
|
if (Number.isNaN(freshnessAt.valueOf())) return;
|
|
|
|
const threshold = new Date();
|
|
threshold.setFullYear(threshold.getFullYear() - 1);
|
|
note.hidden = !hasNewVersion && freshnessAt >= threshold;
|
|
});
|
|
})();
|
|
</script><script>
|
|
(() => {
|
|
const prose = document.querySelector('.prose[data-toc]');
|
|
if (!prose) return;
|
|
|
|
let toc = [];
|
|
try {
|
|
toc = JSON.parse(prose.dataset.toc || '[]');
|
|
} catch {
|
|
toc = [];
|
|
}
|
|
|
|
prose.querySelectorAll('h1, h2, h3').forEach((heading, index) => {
|
|
const item = toc[index];
|
|
if (item?.id && !heading.id) heading.id = item.id;
|
|
});
|
|
|
|
const tocTree = document.querySelector('[data-toc-tree]');
|
|
if (tocTree && toc.length > 0) {
|
|
const links = [...tocTree.querySelectorAll('[data-toc-link]')];
|
|
const groups = [...tocTree.querySelectorAll('[data-toc-group]')];
|
|
const headings = toc
|
|
.map((item) => document.getElementById(item.id))
|
|
.filter(Boolean);
|
|
|
|
const setActiveToc = (id) => {
|
|
links.forEach((link) => {
|
|
const isActive = link.getAttribute('href') === `#${id}`;
|
|
link.classList.toggle('is-active', isActive);
|
|
if (isActive) link.setAttribute('aria-current', 'location');
|
|
else link.removeAttribute('aria-current');
|
|
});
|
|
|
|
const activeLink = tocTree.querySelector(`[data-toc-link][href="#${CSS.escape(id)}"]`);
|
|
const activeGroup = activeLink?.closest('[data-toc-group]');
|
|
groups.forEach((group) => group.classList.toggle('is-open', group === activeGroup));
|
|
};
|
|
|
|
const updateToc = () => {
|
|
const anchorOffset = 132;
|
|
let activeId = headings[0]?.id;
|
|
|
|
headings.forEach((heading) => {
|
|
if (heading.getBoundingClientRect().top <= anchorOffset) activeId = heading.id;
|
|
});
|
|
|
|
if (activeId) setActiveToc(activeId);
|
|
};
|
|
|
|
tocTree.addEventListener('click', (event) => {
|
|
const link = event.target.closest?.('[data-toc-link]');
|
|
if (!link) return;
|
|
|
|
const group = link.closest('[data-toc-group]');
|
|
groups.forEach((item) => item.classList.toggle('is-open', item === group));
|
|
});
|
|
|
|
updateToc();
|
|
window.addEventListener('scroll', updateToc, { passive: true });
|
|
window.addEventListener('resize', updateToc);
|
|
}
|
|
|
|
})();
|
|
</script><script>
|
|
(() => {
|
|
const prose = document.querySelector('.post-article .prose');
|
|
if (!prose) return;
|
|
|
|
const collapsedLineCount = 8;
|
|
const copyLabels = {
|
|
idle: '复制',
|
|
done: '已复制',
|
|
error: '复制失败',
|
|
};
|
|
|
|
const languageNames = {
|
|
bash: 'Bash',
|
|
c: 'C',
|
|
cpp: 'C++',
|
|
cs: 'C#',
|
|
css: 'CSS',
|
|
html: 'HTML',
|
|
js: 'JavaScript',
|
|
json: 'JSON',
|
|
jsx: 'JSX',
|
|
md: 'Markdown',
|
|
powershell: 'PowerShell',
|
|
py: 'Python',
|
|
shell: 'Shell',
|
|
sh: 'Shell',
|
|
ts: 'TypeScript',
|
|
tsx: 'TSX',
|
|
txt: 'Text',
|
|
yaml: 'YAML',
|
|
yml: 'YAML',
|
|
};
|
|
|
|
function getCodeLanguage(pre, code) {
|
|
const rawLanguage =
|
|
pre.dataset.language ||
|
|
code.dataset.language ||
|
|
[...pre.classList, ...code.classList]
|
|
.find((className) => className.startsWith('language-'))
|
|
?.replace(/^language-/, '') ||
|
|
'';
|
|
|
|
const normalized = rawLanguage.trim().toLowerCase();
|
|
return languageNames[normalized] || normalized.toUpperCase() || 'Code';
|
|
}
|
|
|
|
function getCodeText(code, lines) {
|
|
if (lines.length > 0) return lines.map((line) => line.textContent || '').join('\n');
|
|
return code.textContent || '';
|
|
}
|
|
|
|
prose.querySelectorAll('img').forEach((image) => {
|
|
if (image.closest('a, .article-header-cover')) return;
|
|
|
|
const src = image.currentSrc || image.getAttribute('src');
|
|
if (!src) return;
|
|
|
|
const link = document.createElement('a');
|
|
link.className = 'fancybox';
|
|
link.href = src;
|
|
link.dataset.fancybox = 'article-gallery';
|
|
link.dataset.caption = image.getAttribute('alt') || '';
|
|
image.parentNode?.insertBefore(link, image);
|
|
link.appendChild(image);
|
|
});
|
|
|
|
prose.querySelectorAll('table').forEach((table) => {
|
|
if (table.closest('.table-scroll')) return;
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'table-scroll';
|
|
table.parentNode?.insertBefore(wrapper, table);
|
|
wrapper.appendChild(table);
|
|
});
|
|
|
|
prose.querySelectorAll('.butterfly-hide-inline').forEach((item) => {
|
|
const button = item.querySelector('.butterfly-hide-toggle');
|
|
if (!button) return;
|
|
|
|
button.addEventListener('click', () => {
|
|
item.classList.toggle('is-open');
|
|
});
|
|
});
|
|
|
|
if (window.Fancybox) {
|
|
window.Fancybox.bind('[data-fancybox="article-gallery"]', {
|
|
compact: false,
|
|
dragToClose: true,
|
|
Images: {
|
|
zoom: true,
|
|
},
|
|
});
|
|
}
|
|
|
|
async function copyText(text) {
|
|
if (navigator.clipboard?.writeText) {
|
|
await navigator.clipboard.writeText(text);
|
|
return;
|
|
}
|
|
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = text;
|
|
textarea.setAttribute('readonly', '');
|
|
textarea.style.position = 'fixed';
|
|
textarea.style.top = '-9999px';
|
|
textarea.style.opacity = '0';
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
textarea.remove();
|
|
}
|
|
|
|
prose.querySelectorAll('pre').forEach((pre) => {
|
|
if (pre.closest('.code-block')) return;
|
|
|
|
const code = pre.querySelector('code');
|
|
if (!code) return;
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'code-block';
|
|
pre.parentNode?.insertBefore(wrapper, pre);
|
|
wrapper.appendChild(pre);
|
|
|
|
const header = document.createElement('div');
|
|
header.className = 'code-block-header';
|
|
|
|
const language = document.createElement('span');
|
|
language.className = 'code-block-language';
|
|
language.textContent = getCodeLanguage(pre, code);
|
|
|
|
const toolbar = document.createElement('div');
|
|
toolbar.className = 'code-block-toolbar';
|
|
|
|
const copyButton = document.createElement('button');
|
|
copyButton.className = 'code-block-copy';
|
|
copyButton.type = 'button';
|
|
copyButton.textContent = copyLabels.idle;
|
|
copyButton.setAttribute('aria-label', '复制代码');
|
|
|
|
const toggleButton = document.createElement('button');
|
|
toggleButton.className = 'code-block-toggle';
|
|
toggleButton.type = 'button';
|
|
toggleButton.textContent = '展开';
|
|
toggleButton.setAttribute('aria-expanded', 'false');
|
|
|
|
const expandCue = document.createElement('button');
|
|
expandCue.className = 'code-block-expand-cue';
|
|
expandCue.type = 'button';
|
|
expandCue.setAttribute('aria-label', 'Expand code block');
|
|
expandCue.setAttribute('aria-expanded', 'false');
|
|
expandCue.innerHTML = '<span aria-hidden="true"></span>';
|
|
|
|
toolbar.append(copyButton, toggleButton);
|
|
header.append(language, toolbar);
|
|
wrapper.appendChild(header);
|
|
wrapper.appendChild(expandCue);
|
|
|
|
const codeLines = [...code.querySelectorAll(':scope > .line')];
|
|
if (codeLines.length > 0) {
|
|
wrapper.classList.add('has-line-numbers');
|
|
wrapper.style.setProperty('--line-number-width', `${String(codeLines.length).length + 1}ch`);
|
|
codeLines.forEach((line, index) => {
|
|
line.dataset.line = String(index + 1);
|
|
});
|
|
}
|
|
|
|
const lineCount = codeLines.length || (code.textContent || '').split(/\r?\n/).length;
|
|
if (lineCount > collapsedLineCount) wrapper.classList.add('is-collapsible');
|
|
|
|
copyButton.addEventListener('click', async () => {
|
|
try {
|
|
await copyText(getCodeText(code, codeLines));
|
|
copyButton.textContent = copyLabels.done;
|
|
window.setTimeout(() => {
|
|
copyButton.textContent = copyLabels.idle;
|
|
}, 1400);
|
|
} catch {
|
|
copyButton.textContent = copyLabels.error;
|
|
window.setTimeout(() => {
|
|
copyButton.textContent = copyLabels.idle;
|
|
}, 1600);
|
|
}
|
|
});
|
|
|
|
function toggleExpanded() {
|
|
const isExpanded = wrapper.classList.toggle('is-expanded');
|
|
toggleButton.textContent = isExpanded ? '收起' : '展开';
|
|
toggleButton.setAttribute('aria-expanded', String(isExpanded));
|
|
expandCue.setAttribute('aria-expanded', String(isExpanded));
|
|
}
|
|
|
|
toggleButton.addEventListener('click', toggleExpanded);
|
|
expandCue.addEventListener('click', toggleExpanded);
|
|
});
|
|
})();
|
|
</script> |