<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>MrBin的博客</title><description>MrBin</description><link>https://zuelhhb.top/</link><templateTheme>Firefly</templateTheme><templateThemeVersion>6.6.13</templateThemeVersion><templateThemeUrl>https://github.com/CuteLeaf/Firefly</templateThemeUrl><lastBuildDate>2026年7月7日 03:39:17</lastBuildDate><item><title>测试</title><link>https://zuelhhb.top/posts/blog/%E6%B5%8B%E8%AF%953333/</link><guid isPermaLink="true">https://zuelhhb.top/posts/blog/%E6%B5%8B%E8%AF%953333/</guid><description>测试</description><pubDate>Sun, 05 Jul 2026 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;测试&lt;/p&gt;</content:encoded></item><item><title>Cloudflare Workers 部署 Cloudflare‑ImgBed 图床完整教程</title><link>https://zuelhhb.top/posts/blog/img-bed/</link><guid isPermaLink="true">https://zuelhhb.top/posts/blog/img-bed/</guid><description>搭建属于自己的图床</description><pubDate>Thu, 07 May 2026 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;Cloudflare Workers 部署 Cloudflare‑ImgBed 图床完整教程&lt;a href=&quot;#cloudflare-workers-部署-cloudflareimgbed-图床完整教程&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;本文基于&lt;a href=&quot;https://cfbed.sanyue.de/deployment/worker.html&quot; target=&quot;_blank&quot;&gt;官方文档&lt;/a&gt;)，从零教你用 &lt;strong&gt;Cloudflare Workers&lt;/strong&gt; 部署专属图床，全程免费、无服务器、支持自动更新。&lt;/p&gt;&lt;hr /&gt;&lt;section&gt;&lt;h2&gt;一、什么是图床？为什么选 Cloudflare‑ImgBed？&lt;a href=&quot;#一什么是图床为什么选-cloudflareimgbed&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;1. 图床是什么&lt;a href=&quot;#1-图床是什么&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;图床 = 专门存放图片并生成&lt;strong&gt;可直接访问的 URL&lt;/strong&gt; 的服务，用于博客、公众号、文档、笔记，Markdown 等场景，解决图片统一托管、跨平台复用、链接长期有效问题。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2. 为什么选本方案&lt;a href=&quot;#2-为什么选本方案&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;零成本：Cloudflare 免费额度足够个人日常使用&lt;/li&gt;
&lt;li&gt;无服务器：不用买主机、不用配置环境&lt;/li&gt;
&lt;li&gt;全球加速：Cloudflare CDN 全球节点，访问快&lt;/li&gt;
&lt;li&gt;数据可控：自己部署、自己管理，不怕第三方图床跑路&lt;/li&gt;
&lt;li&gt;多存储：支持 R2、Telegram、D1/KV 数据库&lt;/li&gt;
&lt;li&gt;自动部署：GitHub Actions 一键部署 + 自动更新&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;3. Pages vs Workers（本教程选 Workers）&lt;a href=&quot;#3-pages-vs-workers本教程选-workers&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;可以做ip优选&lt;a href=&quot;#可以做ip优选&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;二、部署前期准备&lt;a href=&quot;#二部署前期准备&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;账号准备&lt;/strong&gt;
    - GitHub 账号（用于 Fork 项目、存 Secrets）
    - Cloudflare 账号（免费注册即可）&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;必备信息&lt;/strong&gt;（后面会一步步拿）
    - Cloudflare Account ID
    - Cloudflare API Token（权限：编辑 Workers）
    - KV 或 D1 数据库 ID（二选一）
    - 可选：R2 存储桶名、Telegram 机器人信息&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;工具&lt;/strong&gt;
浏览器即可，无需本地环境、无需终端。&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;三、完整部署步骤（按顺序做）&lt;a href=&quot;#三完整部署步骤按顺序做&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;一步：Fork 开源项目&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;打开官方项目：&lt;a href=&quot;https://github.com/MarSeventh/CloudFlare-ImgBed&quot; target=&quot;_blank&quot;&gt;CloudFlare ImgBed&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;点右上角 &lt;strong&gt;Fork&lt;/strong&gt; → 选择你的 GitHub 账号 → 等待 Fork 完成。&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;section&gt;&lt;h3&gt;第二步：准备 Cloudflare 资源&lt;a href=&quot;#第二步准备-cloudflare-资源&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;section&gt;&lt;h4&gt;2.1 获取 Account ID + API Token&lt;a href=&quot;#21-获取-account-id--api-token&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ol&gt;
&lt;li&gt;登录 Cloudflare Dashboard&lt;/li&gt;
&lt;li&gt;右上角头像 → &lt;strong&gt;我的个人资料&lt;/strong&gt; → &lt;strong&gt;API 令牌&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;创建令牌&lt;/strong&gt; → 选模板 &lt;strong&gt;编辑 Cloudflare Workers&lt;/strong&gt; → 下一步 → &lt;strong&gt;创建令牌&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;复制并保存生成的 &lt;strong&gt;API Token&lt;/strong&gt;（只出现一次）&lt;/li&gt;
&lt;li&gt;返回 Dashboard 首页，右侧找到并复制 &lt;strong&gt;Account ID&lt;/strong&gt;。&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;2.2 创建数据库（KV 或 D1 二选一）&lt;a href=&quot;#22-创建数据库kv-或-d1-二选一&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;section&gt;&lt;h5&gt;方案 A：KV 数据库（读写更快）&lt;a href=&quot;#方案-akv-数据库读写更快&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h5&gt;&lt;ol&gt;
&lt;li&gt;存储和数据库 → Workers KV → &lt;strong&gt;创建实例&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;名称填 &lt;code&gt;img_url&lt;/code&gt; → 创建&lt;/li&gt;
&lt;li&gt;复制 &lt;strong&gt;命名空间 ID&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h5&gt;方案 B：D1 数据库（免费额度更高）&lt;a href=&quot;#方案-bd1-数据库免费额度更高&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h5&gt;&lt;ol&gt;
&lt;li&gt;存储和数据库 → D1 SQL 数据库 → &lt;strong&gt;创建数据库&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;名称填 &lt;code&gt;img_d1&lt;/code&gt; → 创建&lt;/li&gt;
&lt;li&gt;复制 &lt;strong&gt;数据库 ID&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;进入「控制台」执行项目提供的 &lt;code&gt;init.sql&lt;/code&gt; 初始化语句&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;2.3（可选）创建 R2 存储桶&lt;a href=&quot;#23可选创建-r2-存储桶&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ol&gt;
&lt;li&gt;存储和数据库 → R2 对象存储 → &lt;strong&gt;创建存储桶&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;自定义名称，复制保存 &lt;strong&gt;存储桶名称&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;第三步：配置 GitHub Secrets（关键）&lt;a href=&quot;#第三步配置-github-secrets关键&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;进入你 Fork 的仓库&lt;/li&gt;
&lt;li&gt;Settings → Secrets and variables → Actions → &lt;strong&gt;New repository secret&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;按表添加，&lt;strong&gt;必填项必须填&lt;/strong&gt;，二选一填一个即可&lt;/li&gt;
&lt;/ol&gt;












































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Secret 名称&lt;/th&gt;&lt;th&gt;说明&lt;/th&gt;&lt;th&gt;是否必填&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;CLOUDFLARE_API_TOKEN&lt;/td&gt;&lt;td&gt;Cloudflare API 令牌&lt;/td&gt;&lt;td&gt;✅ 必填&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;CLOUDFLARE_ACCOUNT_ID&lt;/td&gt;&lt;td&gt;Cloudflare 账户 ID&lt;/td&gt;&lt;td&gt;✅ 必填&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;KV_NAMESPACE_ID&lt;/td&gt;&lt;td&gt;KV 命名空间 ID&lt;/td&gt;&lt;td&gt;KV/D1 二选一&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;D1_DATABASE_ID&lt;/td&gt;&lt;td&gt;D1 数据库 ID&lt;/td&gt;&lt;td&gt;KV/D1 二选一&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;R2_BUCKET_NAME&lt;/td&gt;&lt;td&gt;R2 存储桶名&lt;/td&gt;&lt;td&gt;可选&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;WORKER_NAME&lt;/td&gt;&lt;td&gt;Worker 名称（默认 cloudflare-imgbed）&lt;/td&gt;&lt;td&gt;可选&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;WORKER_VARS&lt;/td&gt;&lt;td&gt;业务变量（JSON 格式，如 TG 配置）&lt;/td&gt;&lt;td&gt;可选&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;ul&gt;
&lt;li&gt;安全提醒：一律用 &lt;strong&gt;Secrets&lt;/strong&gt;，不要用 Variables（公开可见）。&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;第四步：运行部署（手动 / 自动二选一）&lt;a href=&quot;#第四步运行部署手动--自动二选一&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;section&gt;&lt;h4&gt;方式 1：手动触发部署&lt;a href=&quot;#方式-1手动触发部署&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ol&gt;
&lt;li&gt;进入仓库 &lt;strong&gt;Actions&lt;/strong&gt; 页面&lt;/li&gt;
&lt;li&gt;左侧选择 &lt;strong&gt;Deploy to Cloudflare Workers&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;点 &lt;strong&gt;Run workflow&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;分支选 main → 直接 &lt;strong&gt;Run workflow&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;等待执行成功（约 1–3 分钟）&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;方式 2：开启自动部署（推荐）&lt;a href=&quot;#方式-2开启自动部署推荐&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ol&gt;
&lt;li&gt;Actions 页面找到 &lt;strong&gt;Upstream Sync&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;点 &lt;strong&gt;Enable workflow&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;以后上游更新 → 自动同步 main → 自动部署，全程不用管&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;四、部署成功 ; 访问使用&lt;a href=&quot;#四部署成功--访问使用&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;访问地址：“&lt;/li&gt;
&lt;li&gt;部署后&lt;strong&gt;必须配置存储渠道&lt;/strong&gt;（R2/Telegram 等）才能上传图片，在后台管理面板配置即可。&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;五、后续更新维护&lt;a href=&quot;#五后续更新维护&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;1. 自动更新（推荐）&lt;a href=&quot;#1-自动更新推荐&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;保持 Upstream Sync 开启，上游更新自动同步并部署。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2. 手动更新&lt;a href=&quot;#2-手动更新&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;仓库点 &lt;strong&gt;Sync fork&lt;/strong&gt; 同步上游&lt;/li&gt;
&lt;li&gt;触发自动部署；或手动再跑一次 Deploy workflow。&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;六、常见问题&lt;a href=&quot;#六常见问题&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;部署失败：检查 Secrets 是否填错、权限是否正确&lt;/li&gt;
&lt;li&gt;无法上传：未配置存储渠道，去后台绑定 R2 或 Telegram&lt;/li&gt;
&lt;li&gt;链接打不开：确认 Worker 已启用、名称与子域名拼写正确&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;七、总结&lt;a href=&quot;#七总结&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;用 Cloudflare Workers 部署图床，&lt;strong&gt;全程免费、无服务器、10 分钟搞定&lt;/strong&gt;，适合个人长期稳定使用。按本文步骤：Fork → 拿 Cloudflare 信息 → 配 GitHub Secrets → 一键部署，即可拥有专属高速图床。&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>上天会一直出同一道题给你，直到你做出改变</title><link>https://zuelhhb.top/posts/mrbin/2026-05-04-245/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2026-05-04-245/</guid><description>旧 WordPress 文章正文为空，已保留原始标题、分类、日期和封面。</description><pubDate>Sun, 03 May 2026 17:43:01 GMT</pubDate><content:encoded>&lt;blockquote&gt;&lt;p&gt;原 WordPress 正文为空，已保留原始标题、日期、分类和封面。&lt;/p&gt;&lt;/blockquote&gt;</content:encoded></item><item><title>Cloudflare IP优选</title><link>https://zuelhhb.top/posts/blog/ip/</link><guid isPermaLink="true">https://zuelhhb.top/posts/blog/ip/</guid><description>Cloudflare IP优选</description><pubDate>Sun, 03 May 2026 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h2&gt;一、Cloudflare IP优选&lt;a href=&quot;#一cloudflare-ip优选&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;步骤1：添加路由规则&lt;a href=&quot;#步骤1添加路由规则&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;登录Cloudflare账号，进入你绑定的Astro博客域名控制台（左侧导航栏选择对应域名）。&lt;/li&gt;
&lt;li&gt;找到左侧导航栏的&lt;strong&gt;路由（Rules）&lt;/strong&gt;，点击进入后选择「转换规则」或「路由」（按当前Cloudflare界面显示为准）。&lt;/li&gt;
&lt;li&gt;点击「添加路由」，进入路由配置页面。&lt;/li&gt;
&lt;li&gt;路由地址填写：&lt;code&gt;你的Astro域名/*&lt;/code&gt;（示例：&lt;code&gt;blog.xxx.com/*&lt;/code&gt;），含义是匹配Astro博客的所有页面（包括文章、静态资源），统一走优选节点。&lt;/li&gt;
&lt;li&gt;无需额外添加规则，直接保存并确认路由配置。&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;步骤2：配置DNS解析（关键步骤）&lt;a href=&quot;#步骤2配置dns解析关键步骤&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;在Cloudflare域名控制台，找到左侧导航栏的&lt;strong&gt;DNS → 记录&lt;/strong&gt;，点击进入。&lt;/li&gt;
&lt;li&gt;点击「添加记录」，开始配置优选解析。&lt;/li&gt;
&lt;li&gt;记录类型：选择「A记录」或「CNAME」均可。&lt;/li&gt;
&lt;li&gt;名称：可自定义前缀（如cdn、speed、ip），用于标识优选节点（示例：&lt;code&gt;speed.xxx.com&lt;/code&gt;）。&lt;/li&gt;
&lt;li&gt;目标：填写UP主提供的Cloudflare优选节点/地址（格式：任意文字或字母.cf.090227.xyz，直接复制粘贴，确保地址正确）。&lt;/li&gt;
&lt;li&gt;代理状态：&lt;strong&gt;必须关闭云朵图标（即关闭Cloudflare代理）&lt;/strong&gt;，否则优选无效。&lt;/li&gt;
&lt;li&gt;点击「保存」，完成优选解析记录添加。&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;步骤3：绑定Astro主域名到优选节点&lt;a href=&quot;#步骤3绑定astro主域名到优选节点&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;再次点击「添加记录」，配置Astro主域名的解析。&lt;/li&gt;
&lt;li&gt;记录类型：与上一步一致（A记录/CNAME）。&lt;/li&gt;
&lt;li&gt;名称：填写Astro主域名前缀（如blog，即&lt;code&gt;blog.xxx.com&lt;/code&gt;，若为根域名则填写&lt;code&gt;@&lt;/code&gt;）。&lt;/li&gt;
&lt;li&gt;目标：填写上一步创建的优选记录名称（示例：&lt;code&gt;speed.xxx.com&lt;/code&gt;），将主域名指向优选节点。&lt;/li&gt;
&lt;li&gt;代理状态：保持关闭（与上一步一致）。&lt;/li&gt;
&lt;li&gt;点击「保存」，等待1-3分钟解析生效，刷新Astro博客即可感受到访问速度提升。&lt;/li&gt;
&lt;/ol&gt;&lt;blockquote&gt;&lt;p&gt;原理：Astro博客主域名 → Cloudflare优选地址 → Cloudflare最优节点，自动选择国内延迟最低的IP，减少静态资源（Astro生成的HTML、CSS、图片）加载耗时。&lt;/p&gt;&lt;/blockquote&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;二、Astro博客Markdown文章编写与发布&lt;a href=&quot;#二astro博客markdown文章编写与发布&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Astro博客的文章均以Markdown格式编写，核心需遵循Astro的Frontmatter元数据规范，以下步骤完全适配Astro框架，新手可直接复刻。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;1. 文章存放位置（Astro固定路径）&lt;a href=&quot;#1-文章存放位置astro固定路径&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;所有Markdown文章，需放在Astro项目源码的 &lt;code&gt;src/content/posts/&lt;/code&gt; 文件夹下（若没有posts文件夹，可手动创建，Astro默认读取该路径下的文章）。&lt;/li&gt;
&lt;li&gt;文章格式：必须是&lt;strong&gt;纯Markdown文件（后缀为.md）&lt;/strong&gt;，文件名建议用英文/拼音（如&lt;code&gt;astro-blog-guide.md&lt;/code&gt;），避免中文乱码。&lt;/li&gt;
&lt;li&gt;图片、附件等资源：统一放在 &lt;code&gt;src/content/posts/images/&lt;/code&gt; 或 &lt;code&gt;src/assets/&lt;/code&gt; 文件夹下（推荐前者，方便管理），引用时使用相对路径。&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2. 文章必备元数据（Astro Frontmatter规范）&lt;a href=&quot;#2-文章必备元数据astro-frontmatter规范&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;每篇Markdown文章顶部，必须编写固定格式的Frontmatter元数据（用---包裹），适配Astro的文章渲染逻辑，示例如下（可直接复制修改）：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;文章标题（如：Astro博客部署全流程指南）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;date&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2026-05-03 19:00:00&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;description&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;文章简短描述（100字内，用于SEO和文章列表展示）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;cover&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;/src/content/posts/images/cover.jpg&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;tags&lt;/span&gt;&lt;span&gt;: [&lt;/span&gt;&lt;span&gt;Astro&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;静态博客&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;部署&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;categories&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;技术教程&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;draft&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;false&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;author&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;作者名&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;pubDate&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2026-05-03 19:00:00&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;元数据字段说明&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;title：文章标题，必填，将作为博客文章的标题展示。&lt;/li&gt;
&lt;li&gt;date：文章发布时间，格式为YYYY-MM-DD HH:MM，适配Astro时间渲染。&lt;/li&gt;
&lt;li&gt;description：文章简短描述，控制在100字内，用于SEO优化和博客文章列表展示。&lt;/li&gt;
&lt;li&gt;cover：文章封面图路径，可填写本地相对路径（需对应资源存放位置）或网络图片链接。&lt;/li&gt;
&lt;li&gt;tags：文章标签，用英文逗号分隔并包裹在中括号内，适配Astro标签功能，方便分类检索。&lt;/li&gt;
&lt;li&gt;categories：文章分类，可自定义，用于博客文章分类展示。&lt;/li&gt;
&lt;li&gt;draft：草稿状态，true为草稿（不显示在博客），false为正式发布（必填）。&lt;/li&gt;
&lt;li&gt;author：作者名，可选，适配Astro作者展示功能。&lt;/li&gt;
&lt;li&gt;pubDate：可选，与date一致即可，部分Astro主题需配置以正常显示发布时间。&lt;/li&gt;
&lt;/ul&gt;&lt;ol&gt;
&lt;li&gt;Astro支持的Markdown功能（适配文章编写）
Astro完全支持标准Markdown语法，可正常使用标题（# ~ ######）、段落、列表（有序/无序）、代码块（```包裹）、链接、图片、引用（&amp;gt;）等功能，同时支持GFM扩展语法（如表格、任务列表），可满足日常文章编写需求，无需额外配置。&lt;/li&gt;
&lt;li&gt;推荐编辑器（适配Astro，二选一）&lt;/li&gt;
&lt;li&gt;VS Code（推荐，适配Astro开发）：原生支持Astro项目结构，可安装Markdown预览插件，实现语法高亮、实时预览，同时可编辑Astro项目代码，适合兼顾开发与写作的用户。&lt;/li&gt;
&lt;li&gt;Obsidian（OC，适合纯写作）：可视化编辑，实时预览Markdown效果，无需记忆语法，适合不想接触代码的新手；可将Obsidian的文章文件夹，与Astro项目的src/content/posts/文件夹关联，编写完成后直接同步，无需手动复制。&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>Firefly 博客搭建教程</title><link>https://zuelhhb.top/posts/firefly-set/windows-firefly/</link><guid isPermaLink="true">https://zuelhhb.top/posts/firefly-set/windows-firefly/</guid><description>前置准备｜Windows 搭建 Firefly 必备环境全套安装</description><pubDate>Wed, 29 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;Firefly 博客部署教程&lt;a href=&quot;#firefly-博客部署教程&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt; &lt;ul&gt;
&lt;li&gt;根据Firefly 官方文档，涵盖全流程操作，代码可直接复制，小白可按步完成，附关键避坑提示。
&lt;strong&gt;说明&lt;/strong&gt;：基于 Windows 系统；命令可直接执行。&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;第一篇：前置准备｜安装必备环境&lt;a href=&quot;#第一篇前置准备安装必备环境&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;一、前言&lt;a href=&quot;#一前言&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Firefly 是 Astro 静态博客主题，本文是作者的搭建笔记，为以后回溯搭建过程，为后续操作筑牢基础。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;二、必备软件清单&lt;a href=&quot;#二必备软件清单&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://nodejs.org/&quot; target=&quot;_blank&quot;&gt;Node.js&lt;/a&gt;：核心环境，&lt;strong&gt;版本 ≥22&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;pnpm&lt;/li&gt;
&lt;li&gt;Git：用于拉取源码、提交代码&lt;/li&gt;
&lt;li&gt;VS Code：推荐编辑器，用于修改配置、写文章&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;三、分步安装教程&lt;a href=&quot;#三分步安装教程&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;1. 安装 Node.js&lt;a href=&quot;#1-安装-nodejs&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;访问 &lt;a href=&quot;https://nodejs.org/&quot; target=&quot;_blank&quot;&gt;https://nodejs.org/&lt;/a&gt;，下载 &lt;strong&gt;LTS 版&lt;/strong&gt;。&lt;/li&gt;
&lt;li&gt;&lt;figure&gt;&lt;img src=&quot;https://tu.fqzlr.com/file/blog/wenzhang/1777551551531_image.png&quot; alt=&quot;&quot; /&gt;&lt;figcaption&gt;image.png|528&lt;/figcaption&gt;&lt;/figure&gt;&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://tu.fqzlr.com/file/blog/wenzhang/1777551944095_image.png&quot; alt=&quot;&quot; /&gt;&lt;figcaption&gt;image.png|534&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;终端执行 &lt;code&gt;node -v&lt;/code&gt;、&lt;code&gt;npm -v&lt;/code&gt;，输出版本号即成功。
&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://tu.fqzlr.com/file/blog/wenzhang/1777696257686_image.png&quot; alt=&quot;&quot; /&gt;&lt;figcaption&gt;image.png&lt;/figcaption&gt;&lt;/figure&gt;
&lt;strong&gt;注意&lt;/strong&gt;：安装后重启终端，无效则重启电脑。&lt;p&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2. 安装 pnpm&lt;a href=&quot;#2-安装-pnpm&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;终端执行：&lt;code&gt;npm install -g pnpm&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;执行 &lt;code&gt;pnpm -v&lt;/code&gt; 输出版本号即成功，权限不足用管理员终端。&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://tu.fqzlr.com/file/blog/wenzhang/1777696287079_image.png&quot; alt=&quot;&quot; /&gt;&lt;figcaption&gt;image.png&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;注意&lt;/strong&gt;：网络超时切换手机热点。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;3. 安装 Git&lt;a href=&quot;#3-安装-git&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;1.访问 &lt;a href=&quot;https://git-scm.com/download/win&quot; target=&quot;_blank&quot;&gt;https://git-scm.com/download/win&lt;/a&gt;，下载最新版并默认安装。
&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://tu.fqzlr.com/file/blog/wenzhang/1777696402220_image.png&quot; alt=&quot;&quot; /&gt;&lt;figcaption&gt;image.png&lt;/figcaption&gt;&lt;/figure&gt;
2. 一直下一步就行了，全程默认安装。&lt;p&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;4. 安装 VS Code（可选）&lt;a href=&quot;#4-安装-vs-code可选&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;1.访问 &lt;a href=&quot;https://code.visualstudio.com/&quot; target=&quot;_blank&quot;&gt;https://code.visualstudio.com/&lt;/a&gt;，下载并安装，勾选“创建桌面快捷方式”和“将 Code 加入 PATH”。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://tu.fqzlr.com/file/blog/wenzhang/1777696460697_image.png&quot; alt=&quot;&quot; /&gt;&lt;figcaption&gt;image.png&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;推荐安装中文插件。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://tu.fqzlr.com/file/blog/wenzhang/1777696528164_image.png&quot; alt=&quot;&quot; /&gt;&lt;figcaption&gt;image.png&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;四、常见环境问题排查&lt;a href=&quot;#四常见环境问题排查&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;node 命令无效 → 重新安装并勾选“Add to PATH”，重启终端/电脑。&lt;/li&gt;
&lt;li&gt;pnpm 权限不足 → 用管理员终端执行命令。&lt;/li&gt;
&lt;li&gt;git 无反应 → 重启电脑，无效则重装。&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;第二篇：源码托管｜Fork Firefly 官方仓库&lt;a href=&quot;#第二篇源码托管fork-firefly-官方仓库&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;一、前言&lt;a href=&quot;#一前言-1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;通过Fork官方仓库，获得自己的独立仓库，可自由修改内容、同步官方更新，后续推送代码到该仓库，Cloudflare会自动触发构建部署。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;二、前置准备&lt;a href=&quot;#二前置准备&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;已完成第一篇环境安装（Node ≥22、pnpm、Git、VS Code）&lt;/li&gt;
&lt;li&gt;已注册并登录 &lt;a href=&quot;%5Bhttps://github.com/&quot;&gt;&lt;strong&gt;GitHub 账号&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;三、Fork 操作步骤（1分钟完成）&lt;a href=&quot;#三fork-操作步骤1分钟完成&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;打开Firefly官方仓库：&lt;a href=&quot;https://github.com/CuteLeaf/Firefly&quot; target=&quot;_blank&quot;&gt;https://github.com/CuteLeaf/Firefly&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;点击页面右上角的「Fork」按钮（绿色/灰色，位置显眼）。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;等待3-5秒，页面自动跳转，此时你已拥有「自己的Firefly仓库」（仓库地址：&lt;a href=&quot;https://github.com/%E4%BD%A0%E7%9A%84GitHub%E7%94%A8%E6%88%B7%E5%90%8D/Firefly%EF%BC%89%E3%80%82&quot; target=&quot;_blank&quot;&gt;https://github.com/你的GitHub用户名/Firefly）。&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;&lt;strong&gt;关键说明&lt;/strong&gt;：Fork后的仓库归你所有，修改内容不会影响官方仓库，后续可一键同步官方更新，适合长期维护。&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;第三篇：本地搭建｜克隆仓库 + 本地预览调试&lt;a href=&quot;#第三篇本地搭建克隆仓库--本地预览调试&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;一、前言&lt;a href=&quot;#一前言-2&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;将你Fork后的仓库克隆到本地，安装依赖后启动本地服务，用于预览修改效果（仅本地查看，无需打包，推送代码后Cloudflare自动部署）。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;二、前置准备&lt;a href=&quot;#二前置准备-1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;已完成前两篇操作（环境安装、Fork仓库）&lt;/li&gt;
&lt;li&gt;新建空文件夹：路径&lt;strong&gt;无中文、无空格、无特殊字符&lt;/strong&gt;（示例：D:\blog）&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;三、分步操作教程&lt;a href=&quot;#三分步操作教程&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;四、克隆你自己的仓库到本地&lt;a href=&quot;#四克隆你自己的仓库到本地&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;进入 &lt;strong&gt;你的 Fork 仓库&lt;/strong&gt; 页面&lt;/li&gt;
&lt;li&gt;点击 &lt;strong&gt;Code&lt;/strong&gt; → 复制 &lt;strong&gt;HTTPS 地址&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;执行克隆（把地址换成你自己的）：
运行&lt;/li&gt;
&lt;/ol&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git clone https://github.com/你的用户名/Firefly.git&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;ol&gt;
&lt;li&gt;进入项目目录：&lt;/li&gt;
&lt;/ol&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;cd Firefly&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;section&gt;&lt;h3&gt;2. 安装本地依赖（仅用于本地预览）&lt;a href=&quot;#2-安装本地依赖仅用于本地预览&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;安装依赖（用 pnpm）
运行&lt;/li&gt;
&lt;/ol&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;pnpm install&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;3. 启动本地预览服务&lt;a href=&quot;#3-启动本地预览服务&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;pnpm dev&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;等待10-30秒，终端显示访问地址：    &lt;a href=&quot;http://localhost:4321&quot; target=&quot;_blank&quot;&gt;http://localhost:4321&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;打开浏览器输入该地址，看到Firefly默认首页，即本地搭建成功。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;4. 本地简单调试&lt;a href=&quot;#4-本地简单调试&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;修改配置 / 文章 → &lt;strong&gt;保存自动刷新&lt;/strong&gt;&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;在项目根目录创建&lt;code&gt;wrangler.toml&lt;/code&gt;：  Cloudflare Workers部署需要&lt;/li&gt;
&lt;/ol&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;name = &quot;firefly&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;compatibility_date = &quot;YYYY-MM-DD&quot; # 更为今日&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[assets]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;directory = &quot;./dist&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[vars]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;NODE_VERSION = &quot;22&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;2.简单修改站点信息。&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;停止服务：&lt;code&gt;Ctrl + C&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;重新启动：&lt;code&gt;pnpm dev&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;本地仅用于预览，无需执行任何打包命令（Cloudflare会自动打包）。&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;5. 本地开发完成后&lt;a href=&quot;#5-本地开发完成后&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;1.先配置本地 Git 身份&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;打开电脑的&lt;strong&gt;终端（Mac/Linux）&lt;/strong&gt; 或 &lt;strong&gt;Git Bash/CMD（Windows）&lt;/strong&gt;，执行 2 条命令：&lt;/li&gt;
&lt;/ul&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 1. 设置你的GitHub用户名（就是你GitHub主页的用户名）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git config --global user.name &quot;你的GitHub用户名&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 2. 设置你的GitHub绑定邮箱（就是你注册GitHub用的邮箱）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git config --global user.email &quot;你的GitHub邮箱&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;ul&gt;
&lt;li&gt;检测是否成功&lt;/li&gt;
&lt;/ul&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git config --global user.name&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git config --global user.email&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;能显示出你填的信息，就说明绑定好了。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;2. 推送到 GitHub：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git add .&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git commit -m &quot;更新内容&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git push&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;第四篇：部署配置｜Cloudflare 关联GitHub自动构建&lt;a href=&quot;#第四篇部署配置cloudflare-关联github自动构建&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;一、前言&lt;a href=&quot;#一前言-3&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这是核心部署步骤，关联你的GitHub仓库后，后续只要推送代码到GitHub，Cloudflare会自动执行「安装依赖→打包→上线」，全程无需手动操作。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;二、前置准备&lt;a href=&quot;#二前置准备-2&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;已完成前几篇操作（环境安装、Fork仓库、本地搭建，简单修改，上传到github）&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;已注册并登录Cloudflare账号（无账号可注册：&lt;a href=&quot;https://dash.cloudflare.com/&quot; target=&quot;_blank&quot;&gt;https://dash.cloudflare.com/&lt;/a&gt;）&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;你的GitHub仓库已包含完整Firefly源码&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;三、分步配置教程&lt;a href=&quot;#三分步配置教程&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;1. 新建 Cloudflare Worker 应用&lt;a href=&quot;#1-新建-cloudflare-worker-应用&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;登录 Cloudflare 控制台&lt;/strong&gt; 打开浏览器访问官方控制台：&lt;a href=&quot;https://dash.cloudflare.com/&quot; target=&quot;_blank&quot;&gt;https://dash.cloudflare.com/&lt;/a&gt;，输入账号密码完成登录。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;进入 Workers &amp;amp; Pages 页面&lt;/strong&gt; 登录后，在左侧菜单栏找到并点击 &lt;strong&gt;Workers 和 Pages&lt;/strong&gt;（英文对应：Workers &amp;amp; Pages），进入应用管理页面。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;创建应用程序&lt;/strong&gt; 在页面右上角，点击 &lt;strong&gt;创建应用程序&lt;/strong&gt;（英文对应：Create application），进入应用创建流程。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;关联 GitHub 代码仓库&lt;/strong&gt; 在创建页面中，选择 &lt;strong&gt;连接到 Git（Connect Git）&lt;/strong&gt;，然后选中 &lt;strong&gt;GitHub&lt;/strong&gt;，按照页面提示完成授权，允许 Cloudflare 访问你的 GitHub 账号。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;选择目标仓库&lt;/strong&gt; 授权完成后，系统会列出你的 GitHub 所有仓库，从中选中需要部署到 Cloudflare Worker 的代码仓库（如 Firefly 仓库）。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;配置构建设置&lt;/strong&gt; ：&lt;/li&gt;
&lt;/ol&gt;&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Build command&lt;/strong&gt;: &lt;code&gt;pnpm build&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Deploy command&lt;/strong&gt;: &lt;code&gt;npx wrangler deploy&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;发起首次部署&lt;/strong&gt; 配置完成后，点击页面底部的 &lt;strong&gt;部署（Deploy）&lt;/strong&gt;，启动首次自动部署流程。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;等待自动构建完成&lt;/strong&gt; Cloudflare 会自动执行三个操作：拉取 GitHub 仓库代码 → 执行构建命令 → 将项目部署至 Workers 服务器，耐心等待即可。。&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2. 验证自动部署是否成功&lt;a href=&quot;#2-验证自动部署是否成功&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;当构建状态显示“成功”后，点击 Worker 项目顶部的 &lt;strong&gt;临时域名&lt;/strong&gt;（格式为：&lt;code&gt;xxx.workers.dev&lt;/code&gt;）。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;打开浏览器访问该临时域名，若页面展示效果与本地预览的博客首页完全一致，说明 Cloudflare Worker 与 GitHub 自动部署配置成功。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第五篇：绑定域名（Spaceship 平台域名适配）&lt;a href=&quot;#第五篇绑定域名spaceship-平台域名适配&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;完成 Cloudflare Worker 自动部署后，默认使用 &lt;code&gt;xxx.workers.dev&lt;/code&gt; 临时域名访问，为了提升专业性和记忆性，我们将你在 &lt;a href=&quot;https://www.spaceship.com/zh/auth/?returnUrl=/launchpad/&quot; target=&quot;_blank&quot;&gt;Spaceship 平台&lt;/a&gt; 注册的域名，绑定到 Worker 应用，全程适配博客框架，步骤清晰无冗余。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;一、绑定前准备（必做）&lt;a href=&quot;#一绑定前准备必做&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;确认域名状态&lt;/strong&gt;：登录 &lt;a href=&quot;https://www.spaceship.com/zh/auth/?returnUrl=/launchpad/&quot; target=&quot;_blank&quot;&gt;Spaceship 控制台&lt;/a&gt;，确认你的域名状态为“正常”，未被锁定、未过期，且已完成实名认证（若有要求），避免因域名异常导致绑定失败。&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;二、Step 1：在 Cloudflare 中添加自定义域名&lt;a href=&quot;#二step-1在-cloudflare-中添加自定义域名&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;登录 Cloudflare 控制台，进入之前创建的 Worker 项目主页（可通过左侧「Workers 和 Pages」找到对应项目）。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;在项目主页左侧导航栏，点击 &lt;strong&gt;触发器&lt;/strong&gt;（英文：Triggers）选项卡，找到「自定义域」模块，点击 &lt;strong&gt;添加自定义域&lt;/strong&gt;。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;在弹出的输入框中，填写你在 Spaceship 平台的域名（如 &lt;code&gt;yourdomain.com&lt;/code&gt; 或 &lt;code&gt;www.yourdomain.com&lt;/code&gt;），点击 &lt;strong&gt;添加&lt;/strong&gt;。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;添加后，Cloudflare 会自动生成对应的 DNS 解析记录（CNAME 记录），记录下该 CNAME 记录的「目标值」（通常为你的 Worker 临时域名），后续需在 Spaceship 平台配置该解析。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;三、Step 2：在 Spaceship 平台配置 DNS 解析（核心步骤）&lt;a href=&quot;#三step-2在-spaceship-平台配置-dns-解析核心步骤&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;这一步是关键，需在你的域名所在平台（Spaceship）修改 DNS 解析，将域名指向 Cloudflare Worker，具体操作如下：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;登录 Spaceship 控制台&lt;/strong&gt;：打开浏览器，访问 &lt;a href=&quot;https://www.spaceship.com/zh/auth/?returnUrl=/launchpad/&quot; target=&quot;_blank&quot;&gt;https://www.spaceship.com/zh/auth/?returnUrl=%2Flaunchpad%2F&lt;/a&gt;，输入你的账号密码完成登录（若已登录可直接进入）。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;进入域名管理页面&lt;/strong&gt;：登录后，点击顶部「Launchpad」（控制台），找到「Domain Manager」（域名管理）模块，在域名列表中找到你要绑定的域名，点击该域名进入详情页。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;进入 DNS 解析设置&lt;/strong&gt;：在域名详情页中，找到「DNS」选项（或「DNS 解析」「解析设置」），点击进入 DNS 解析配置页面，删除当前无关的解析记录（避免冲突）。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;添加 CNAME 解析记录&lt;/strong&gt;：点击「添加记录」（或「新增解析」），按以下参数填写（适配 Cloudflare Worker 绑定）：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;记录类型：选择 &lt;strong&gt;CNAME&lt;/strong&gt;（核心类型，用于将域名指向 Worker 临时域名，适配 IP 动态变化场景）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;主机记录：填写 &lt;code&gt;@&lt;/code&gt;（代表主域名，如 &lt;code&gt;yourdomain.com&lt;/code&gt;）或 &lt;code&gt;www&lt;/code&gt;（代表带 www 前缀的域名，如 &lt;code&gt;www.yourdomain.com&lt;/code&gt;，建议两者都添加）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;记录值：粘贴 Step 1 中 Cloudflare 生成的 CNAME 目标值（即 Worker 临时域名，如&lt;code&gt;xxx.workers.dev&lt;/code&gt;），确保填写无误；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;TTL（缓存时间）：设置为 10~60 分钟（数值越小，解析生效越快，新手可直接默认）；&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;点击「保存」，完成 DNS 解析配置，此时 Spaceship 平台的域名解析已指向 Cloudflare Worker。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;四、Step 4：验证域名绑定是否成功&lt;a href=&quot;#四step-4验证域名绑定是否成功&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;DNS 解析生效时间通常为 10 分钟~24 小时（新域名生效较快，老域名可能需等待更久），可通过以下两种方式验证绑定结果：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;浏览器直接访问&lt;/strong&gt;：打开浏览器，输入你绑定的域名（如 &lt;code&gt;yourdomain.com&lt;/code&gt;），若能正常显示博客首页，且地址栏有 HTTPS 小锁标志，说明绑定成功；若提示“无法访问”，请耐心等待解析生效，或检查解析记录填写是否正确。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;在线工具查询&lt;/strong&gt;：使用 DNS 解析查询工具（如 DNSChecker.org），输入你的域名，查询 CNAME 记录，若查询结果与你配置的 Worker 临时域名一致，说明解析已生效，绑定成功。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;###五、域名绑定常见问题排查&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;解析配置后无法访问&lt;/strong&gt;：检查 Spaceship 平台的 CNAME 记录值是否与 Cloudflare 生成的目标值一致，TTL 设置是否过小，若无误，耐心等待解析生效（最长 24 小时）；同时确认 Cloudflare 中自定义域已添加成功。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;浏览器提示“不安全”&lt;/strong&gt;：检查 Cloudflare 的 SSL/TLS 加密模式是否设置正确，证书是否已生效，若未生效，等待几分钟后刷新页面重试。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;提示“域名已被占用”&lt;/strong&gt;：确认该域名未被其他 Cloudflare 项目绑定，若已绑定，先删除原有绑定，再重新添加。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;DNS 解析修改无效&lt;/strong&gt;：检查 Spaceship 平台的域名 DNS 服务器是否为默认服务器，若已修改为第三方 DNS，需先改回默认或同步解析记录至对应 DNS 服务器。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>Git 使用教程  测试</title><link>https://zuelhhb.top/posts/blog/git-use/</link><guid isPermaLink="true">https://zuelhhb.top/posts/blog/git-use/</guid><description>git 使用教程及常用命令，自用</description><pubDate>Tue, 28 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;Git 详细使用教程（命令行版，附命令作用解释）&lt;a href=&quot;#git-详细使用教程命令行版附命令作用解释&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;Git 是目前最流行的分布式版本控制系统，核心作用是&lt;strong&gt;跟踪文件变化、管理代码版本&lt;/strong&gt;，支持多人协作开发，可随时回滚到历史版本，避免代码丢失或冲突。本教程全程使用命令行操作（Windows 用 Git Bash、Mac/Linux 用终端），从基础配置到高级用法，逐一讲解命令作用和实操场景，新手可直接跟着步骤练习。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;一、Git 前期准备（必做）&lt;a href=&quot;#一git-前期准备必做&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;1. 安装 Git&lt;a href=&quot;#1-安装-git&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;先在本地安装 Git，安装完成后，打开命令行，输入以下命令验证是否安装成功：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--version&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用：查看当前 Git 版本，若输出类似&lt;code&gt;git version 2\.43\.0&lt;/code&gt;，说明安装成功；若提示“命令不存在”，需重新安装 Git。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;2. 初始配置（绑定身份，关键步骤）&lt;a href=&quot;#2-初始配置绑定身份关键步骤&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Git 每次提交代码时，会记录提交者的身份（用户名和邮箱），用于区分不同开发者，必须配置后才能正常提交代码。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 配置用户名（建议和 GitHub/GitLab 用户名一致）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;config&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--global&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;user.name&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;你的用户名&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 配置邮箱（建议和 GitHub/GitLab 绑定邮箱一致）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;config&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--global&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;user.email&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;你的邮箱地址&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用详解：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git config&lt;/code&gt;：Git 的配置命令，用于设置 Git 相关参数；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;\-\-global&lt;/code&gt;：全局参数，意味着该配置在当前电脑所有 Git 项目中生效（若只想针对单个项目配置，去掉该参数，进入项目后再执行）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;user\.name&lt;/code&gt;/&lt;code&gt;user\.email&lt;/code&gt;：配置提交者的用户名和邮箱，后续所有提交记录都会显示该信息。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;验证配置是否成功：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;config&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--list&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用：查看当前 Git 的所有配置，若能看到刚才设置的用户名和邮箱，即为配置成功。&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;二、Git 核心概念（先理解，再操作）&lt;a href=&quot;#二git-核心概念先理解再操作&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;在使用命令前，先明确 3 个核心工作区域，避免操作混乱：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;工作区（Working Directory）&lt;/strong&gt;：就是你本地电脑上的项目文件夹，你直接修改的文件都在这个区域；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;暂存区（Stage/Index）&lt;/strong&gt;：临时存放你修改的文件，相当于“缓存区”，用于确认哪些修改需要提交到版本库；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;版本库（Repository）&lt;/strong&gt;：Git 真正保存版本的地方，存放所有提交记录，可随时回滚到任意历史版本（分为本地版本库和远程版本库，如 GitHub）。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;核心流程：工作区修改 → 提交到暂存区 → 提交到本地版本库 → 推送到远程版本库（如 GitHub）。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;三、本地仓库操作（最基础，必练）&lt;a href=&quot;#三本地仓库操作最基础必练&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;本地仓库是 Git 操作的基础，无需联网，可独立完成版本管理，适合个人开发或离线工作。&lt;/p&gt;&lt;section&gt;&lt;h2&gt;1. 初始化本地仓库（创建新项目）&lt;a href=&quot;#1-初始化本地仓库创建新项目&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;适用于：新建一个项目，想要用 Git 管理版本（比如本地新建的文件夹，需要变成 Git 仓库）。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 1. 进入你要管理的项目文件夹（先切换到目标路径）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;cd&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;你的项目文件夹路径（如：cd&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;/Users/xxx/Documents/MyProject）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 2. 初始化 Git 仓库&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;init&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用详解：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;cd&lt;/code&gt;：切换目录命令，用于进入你要操作的项目文件夹（若路径错误，会提示“没有该文件或目录”）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git init&lt;/code&gt;：初始化 Git 仓库，执行后会在项目文件夹中生成一个隐藏的 &lt;code&gt;\.git&lt;/code&gt; 文件夹（该文件夹是 Git 版本库的核心，不要删除），此时项目就被 Git 管理起来了。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;注意：每个项目只需初始化一次，初始化后，该文件夹就是 Git 仓库了。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;2. 查看工作区状态（高频命令）&lt;a href=&quot;#2-查看工作区状态高频命令&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;无论做什么操作，建议先查看工作区状态，确认当前文件的修改情况，避免误操作。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;status&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用：查看工作区、暂存区的文件状态，常见输出场景：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;未修改：提示 &lt;code&gt;nothing to commit, working tree clean&lt;/code&gt;（工作区干净，没有任何修改）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;已修改但未提交到暂存区：文件名称显示为 &lt;code&gt;modified&lt;/code&gt;（红色）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;已提交到暂存区但未提交到版本库：文件名称显示为 &lt;code&gt;staged&lt;/code&gt;（绿色）。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;3. 将修改的文件提交到暂存区&lt;a href=&quot;#3-将修改的文件提交到暂存区&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;适用于：你在工作区修改了文件（如新增、修改、删除文件），需要先提交到暂存区，再准备提交到版本库。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式1：提交所有修改的文件（最常用）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;add&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式2：提交指定文件（适用于只提交部分修改）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;add&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;文件名（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;add&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;index.html）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式3：提交指定文件夹下的所有文件&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;add&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;文件夹名（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;add&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;src/）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;命令作用详解：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git add&lt;/code&gt;：将工作区的修改“暂存”起来，告诉 Git“这些修改我要提交到版本库，请先记录下来”；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;\.&lt;/code&gt;：表示当前目录下所有修改的文件（包括新增、修改、删除），简化操作，无需逐个指定文件；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;提交后，再执行&lt;code&gt;git status&lt;/code&gt;，会看到文件变成绿色，提示“changes to be committed”（暂存区有等待提交的内容）。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;4. 将暂存区的文件提交到本地版本库&lt;a href=&quot;#4-将暂存区的文件提交到本地版本库&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这是 Git 版本管理的核心步骤，提交后，修改会被永久保存到本地版本库，生成一条新的版本记录。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;commit&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-m&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;提交说明&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用详解：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git commit&lt;/code&gt;：将暂存区的内容提交到本地版本库，完成一次版本更新；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;\-m \&amp;amp;\#34;提交说明\&amp;amp;\#34;&lt;/code&gt;：必填参数，用于描述本次提交的内容（如“新增登录页面”“修复首页轮播bug”），建议说明清晰，方便后续查看历史记录时，快速知道该版本做了什么修改；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;提交成功后，会提示类似 &lt;code&gt;1 file changed, 2 insertions\(\+\)&lt;/code&gt; 的信息，表示“1个文件被修改，新增了2行内容”。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;注意：必须先执行 &lt;code&gt;git add&lt;/code&gt;，再执行 &lt;code&gt;git commit&lt;/code&gt;，否则会提示“没有可提交的内容”。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;5. 查看提交历史记录&lt;a href=&quot;#5-查看提交历史记录&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;适用于：查看之前的提交记录，包括提交者、提交时间、提交说明、版本号（用于回滚版本）。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式1：查看完整历史记录（详细）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式2：查看简洁历史记录（只显示版本号和提交说明，推荐）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--oneline&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式3：查看所有提交记录（包括回滚的记录）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;reflog&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;命令作用详解：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git log&lt;/code&gt;：显示所有提交记录，每条记录包含版本号（40位哈希值）、提交者、提交时间、提交说明；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;\-\-oneline&lt;/code&gt;：简化输出，每条记录只显示前7位版本号和提交说明，更易查看；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git reflog&lt;/code&gt;：比 &lt;code&gt;git log&lt;/code&gt; 更全面，会记录所有操作（包括回滚、撤销提交），常用于找回误删的版本。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;6. 版本回滚（恢复到历史版本）&lt;a href=&quot;#6-版本回滚恢复到历史版本&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;适用于：修改出错、代码丢失，需要恢复到之前的某个稳定版本（核心操作，务必掌握）。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 第一步：查看历史版本，获取要回滚的版本号（前7位即可）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--oneline&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 第二步：回滚到指定版本（两种常用方式）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式1：彻底回滚，删除回滚版本之后的所有提交记录（谨慎使用，适合个人开发）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;reset&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--hard&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;版本号（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;reset&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--hard&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;a1b2c3d）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式2：安全回滚，保留回滚版本之后的修改（推荐，适合多人协作）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;revert&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;版本号（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;revert&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;a1b2c3d）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;命令作用详解：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git reset \-\-hard 版本号&lt;/code&gt;：强制回滚到指定版本，工作区、暂存区的内容都会同步到该版本，之后的提交记录会被删除（无法恢复，谨慎使用）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git revert 版本号&lt;/code&gt;：不会删除任何提交记录，而是生成一条新的提交记录，将代码恢复到指定版本，后续的修改仍然保留（安全，多人协作时优先使用）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;版本号：通过 &lt;code&gt;git log \-\-oneline&lt;/code&gt; 获取，如 &lt;code&gt;a1b2c3d&lt;/code&gt;（前7位即可，Git 会自动识别）。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;7. 撤销工作区的修改（未提交到暂存区）&lt;a href=&quot;#7-撤销工作区的修改未提交到暂存区&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;适用于：在工作区修改了文件，但还没执行 &lt;code&gt;git add&lt;/code&gt;，想放弃修改，恢复到上一次提交后的状态。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 撤销单个文件的修改&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;文件名（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;index.html）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 撤销所有工作区的修改（未 add 的）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用：放弃工作区的所有未暂存修改，将文件恢复到最近一次 &lt;code&gt;git commit&lt;/code&gt; 或 &lt;code&gt;git add&lt;/code&gt; 后的状态（注意：撤销后，修改会彻底丢失，无法恢复）。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;8. 撤销暂存区的修改（已 add 但未 commit）&lt;a href=&quot;#8-撤销暂存区的修改已-add-但未-commit&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;适用于：执行了 &lt;code&gt;git add&lt;/code&gt;，将修改提交到了暂存区，但还没执行 &lt;code&gt;git commit&lt;/code&gt;，想撤销暂存，重新修改。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;reset&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;HEAD&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;文件名（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;reset&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;HEAD&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;index.html）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 撤销所有暂存区的修改&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;reset&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;HEAD&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用：将暂存区的修改撤销回工作区，此时文件状态会从“绿色（staged）”变回“红色（modified）”，之后可以重新修改、重新 add。&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;四、远程仓库操作（多人协作必备）&lt;a href=&quot;#四远程仓库操作多人协作必备&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;远程仓库（如 GitHub、GitLab、Gitee）是用于多人共享代码的服务器，本地仓库的代码可以推送到远程，也可以从远程拉取别人的代码，实现协作开发。&lt;/p&gt;&lt;p&gt;前提：你已经有一个远程仓库（如在 GitHub 上创建了仓库），且本地 Git 已配置好远程仓库地址。&lt;/p&gt;&lt;section&gt;&lt;h2&gt;1. 关联远程仓库（第一次绑定）&lt;a href=&quot;#1-关联远程仓库第一次绑定&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;适用于：本地已有 Git 仓库，想要和远程仓库绑定，实现代码同步。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;remote&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;add&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;远程仓库地址&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用详解：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git remote&lt;/code&gt;：用于管理远程仓库的命令（如添加、删除、查看远程仓库）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;add&lt;/code&gt;：添加远程仓库；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;origin&lt;/code&gt;：远程仓库的别名（默认用 origin，可自定义，如 git remote add github 远程地址），后续操作远程仓库时，用别名即可，无需输入完整地址；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;远程仓库地址：从 GitHub/GitLab 复制，一般分为 HTTPS 和 SSH 两种（HTTPS 无需配置密钥，直接输入账号密码即可；SSH 需要配置密钥，无需每次输入账号密码，推荐长期使用）。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;查看已关联的远程仓库：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;remote&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-v&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用：查看当前本地仓库关联的所有远程仓库，输出会显示远程仓库的别名、地址，以及可进行的操作（fetch：拉取，push：推送）。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;2. 从远程仓库拉取代码（同步别人的修改）&lt;a href=&quot;#2-从远程仓库拉取代码同步别人的修改&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;适用于：多人协作时，别人将代码推送到了远程仓库，你需要将远程的最新代码拉取到本地，保持本地和远程同步。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式1：拉取远程默认分支（如 main/master）的最新代码（最常用）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;pull&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;main（或&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;master，取决于远程仓库的默认分支名）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式2：拉取远程指定分支的代码&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;pull&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;分支名（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;pull&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;develop）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用详解：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git pull&lt;/code&gt;：等价于 &lt;code&gt;git fetch \+ git merge&lt;/code&gt;，即先从远程拉取最新代码到本地临时区域，再自动合并到当前本地分支；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;origin&lt;/code&gt;：远程仓库别名；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;main/master&lt;/code&gt;：远程仓库的默认分支（GitHub 现在默认分支是 main，旧版本是 master）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;注意：拉取代码前，建议先执行 &lt;code&gt;git commit&lt;/code&gt;，将本地的修改提交到本地版本库，避免拉取时出现代码冲突。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;3. 将本地代码推送到远程仓库（分享自己的修改）&lt;a href=&quot;#3-将本地代码推送到远程仓库分享自己的修改&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;适用于：你在本地完成了代码修改（已 commit 到本地版本库），想要将修改推送到远程仓库，让别人看到你的代码。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式1：推送本地默认分支到远程默认分支（第一次推送需加 -u）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 第一次推送（绑定本地分支和远程分支，后续可直接用 git push）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-u&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;main（或&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;master）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 后续推送（已绑定分支，无需加 -u）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;main（或&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;master）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 方式2：推送本地指定分支到远程指定分支&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;本地分支名:远程分支名（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;develop:develop）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;命令作用详解：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git push&lt;/code&gt;：将本地版本库的提交记录推送到远程仓库；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;\-u&lt;/code&gt;：第一次推送时使用，用于绑定本地分支和远程分支（如本地 main 分支绑定远程 main 分支），后续推送时，直接输入 &lt;code&gt;git push&lt;/code&gt; 即可，无需指定别名和分支；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;推送失败常见原因：① 本地代码不是最新的（需先 &lt;code&gt;git pull&lt;/code&gt; 拉取远程最新代码，解决冲突后再推送）；② 没有远程仓库的权限（检查账号密码或 SSH 密钥配置）。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;4. 克隆远程仓库到本地（第一次下载）&lt;a href=&quot;#4-克隆远程仓库到本地第一次下载&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;适用于：本地没有该项目，直接从远程仓库下载完整的项目代码（包括所有版本记录）。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;clone&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;远程仓库地址&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用详解：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git clone&lt;/code&gt;：将远程仓库的所有内容（包括代码、版本记录、分支）完整下载到本地，自动创建项目文件夹，并初始化 Git 仓库；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;执行后，本地会自动关联该远程仓库（别名默认是 origin），无需再执行 &lt;code&gt;git remote add&lt;/code&gt;；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;示例：&lt;code&gt;git clone https://github\.com/用户名/项目名\.git&lt;/code&gt;（HTTPS 地址），或 &lt;code&gt;git clone git@github\.com:用户名/项目名\.git&lt;/code&gt;（SSH 地址）。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;5. 查看远程分支&lt;a href=&quot;#5-查看远程分支&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 查看本地所有分支&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;branch&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 查看远程所有分支&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;branch&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-r&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 查看本地和远程所有分支&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;branch&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-a&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;命令作用：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git branch&lt;/code&gt;：查看本地已有的分支，当前所在分支会用 &lt;code&gt;\*&lt;/code&gt; 标记；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;\-r&lt;/code&gt;：查看远程仓库的所有分支；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;\-a&lt;/code&gt;：查看本地和远程的所有分支（远程分支会显示为 &lt;code&gt;remotes/origin/分支名&lt;/code&gt;）。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;6. 切换/创建分支（多人协作核心）&lt;a href=&quot;#6-切换创建分支多人协作核心&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;多人协作时，建议每人在自己的分支上开发，避免直接修改默认分支（main/master），开发完成后再合并到默认分支。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 1. 创建新分支（并切换到该分支，最常用）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-b&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;分支名（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-b&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;develop）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 等价于以下两条命令：&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# git branch 分支名（创建分支）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# git checkout 分支名（切换到该分支）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 2. 切换到已有的本地分支&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;分支名（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;main）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 3. 切换到远程分支（并创建本地对应分支）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-b&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;本地分支名&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin/远程分支名（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-b&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;develop&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin/develop）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;命令作用详解：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git checkout \-b 分支名&lt;/code&gt;：一次性完成“创建分支+切换分支”，高效便捷；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;分支命名建议：按功能命名（如 &lt;code&gt;feature/login&lt;/code&gt;，表示登录功能分支）、按bug修复命名（如 &lt;code&gt;fix/banner\-bug&lt;/code&gt;），便于区分。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;7. 合并分支（将开发分支的代码合并到默认分支）&lt;a href=&quot;#7-合并分支将开发分支的代码合并到默认分支&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;适用于：在开发分支（如 develop）完成开发后，将代码合并到默认分支（如 main），让修改生效。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 1. 先切换到要合并到的目标分支（如 main 分支）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;main&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 2. 合并开发分支（如 develop 分支）到当前分支（main）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;merge&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;develop&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;命令作用：将指定分支（如 develop）的所有修改，合并到当前所在的分支（如 main），合并后，main 分支就包含了 develop 分支的所有代码。&lt;/p&gt;&lt;p&gt;注意：合并时可能会出现&lt;strong&gt;代码冲突&lt;/strong&gt;（如两个人同时修改了同一个文件的同一行），此时需要手动解决冲突：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;执行 &lt;code&gt;git merge&lt;/code&gt; 后，Git 会提示“冲突文件”；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;打开冲突文件，找到标记冲突的地方（用 &lt;code&gt;\&amp;amp;lt;\&amp;amp;lt;\&amp;amp;lt;\&amp;amp;lt;\&amp;amp;lt;\&amp;amp;lt;\&amp;amp;lt;&lt;/code&gt;、&lt;code&gt;=======&lt;/code&gt;、&lt;code&gt;\&amp;amp;gt;\&amp;amp;gt;\&amp;amp;gt;\&amp;amp;gt;\&amp;amp;gt;\&amp;amp;gt;\&amp;amp;gt;&lt;/code&gt; 标记）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;修改冲突内容（保留需要的代码，删除冲突标记）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;执行 &lt;code&gt;git add \.&lt;/code&gt; 和 &lt;code&gt;git commit \-m \&amp;amp;\#34;解决合并冲突\&amp;amp;\#34;&lt;/code&gt;，完成合并。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;8. 删除分支（分支开发完成后）&lt;a href=&quot;#8-删除分支分支开发完成后&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 删除本地分支（分支已合并到主分支，可安全删除）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;branch&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-d&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;分支名（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;branch&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-d&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;develop）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 强制删除本地分支（分支未合并，强行删除，谨慎使用）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;branch&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-D&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;分支名&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 删除远程分支&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--delete&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;分支名（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--delete&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;develop）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;命令作用：删除无用的分支，保持分支结构清晰，避免混乱。&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;五、常用补充命令（高频实用）&lt;a href=&quot;#五常用补充命令高频实用&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 1. 查看当前分支的提交差异（对比工作区和暂存区）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;diff&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 2. 查看暂存区和本地版本库的差异&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;diff&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--cached&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 3. 查看两个分支之间的差异&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;diff&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;分支1&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;分支2（如：git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;diff&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;main&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;develop）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 4. 暂存当前修改，切换到其他分支（临时切换分支，不提交当前修改）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;stash&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt; #&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;暂存当前修改&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;stash&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;pop&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt; #&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;恢复暂存的修改（恢复后，暂存记录删除）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;25&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;stash&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;list&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt; #&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;查看所有暂存记录&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;26&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;27&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;28&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;29&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 5. 重命名本地分支&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;30&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;31&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;branch&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-m&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;旧分支名&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;新分支名&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;32&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;33&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;34&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;35&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 6. 更新远程分支列表（远程删除了分支，本地同步）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;36&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;37&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;fetch&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--prune&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;每个命令的作用简要说明：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git diff&lt;/code&gt;：快速查看修改的具体内容（哪一行被修改、新增/删除了什么）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git stash&lt;/code&gt;：临时保存未提交的修改，常用于“正在开发一个功能，突然需要切换到其他分支修复bug”的场景；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git fetch \-\-prune&lt;/code&gt;：同步远程分支的删除操作，避免本地显示已删除的远程分支。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;六、常见问题解决（新手必看）&lt;a href=&quot;#六常见问题解决新手必看&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;1. 拉取/推送代码时，提示“权限不足”&lt;a href=&quot;#1-拉取推送代码时提示权限不足&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;原因：未配置正确的账号密码或 SSH 密钥。&lt;/p&gt;&lt;p&gt;解决方法：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;若用 HTTPS 地址：重新输入正确的 GitHub/GitLab 账号密码；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;若用 SSH 地址：配置 SSH 密钥（网上搜索“GitHub SSH 密钥配置”，按步骤操作即可，配置一次终身可用）。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;2. 合并分支时出现代码冲突&lt;a href=&quot;#2-合并分支时出现代码冲突&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;解决方法：按前面“合并分支”部分的步骤，手动修改冲突文件，删除冲突标记，保留需要的代码，再提交即可。&lt;/p&gt;&lt;p&gt;注意：冲突解决后，一定要仔细检查代码，确保没有误删有用的内容。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;3. 误删本地代码/误回滚版本，如何恢复？&lt;a href=&quot;#3-误删本地代码误回滚版本如何恢复&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;解决方法：执行 &lt;code&gt;git reflog&lt;/code&gt;，查看所有操作记录，找到误删/误回滚前的版本号，再执行&lt;code&gt;git reset \-\-hard 版本号&lt;/code&gt;，即可恢复到该版本。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;4. 推送代码时，提示“本地版本落后于远程版本”&lt;a href=&quot;#4-推送代码时提示本地版本落后于远程版本&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;原因：远程仓库有别人推送的最新代码，你的本地代码不是最新的，无法直接推送。&lt;/p&gt;&lt;p&gt;解决方法：先执行 &lt;code&gt;git pull&lt;/code&gt; 拉取远程最新代码，解决冲突后，再执行 &lt;code&gt;git push&lt;/code&gt;。&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;七、总结（核心流程梳理）&lt;a href=&quot;#七总结核心流程梳理&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;Git 的核心操作围绕“本地仓库”和“远程仓库”展开，新手记住以下流程即可快速上手：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;前期准备：安装 Git → 配置用户名和邮箱；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;本地开发：初始化仓库（git init）→ 修改文件 → 提交到暂存区（git add .）→ 提交到本地版本库（git commit -m &amp;amp;#34;说明&amp;amp;#34;）；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;多人协作：克隆远程仓库（git clone）→ 拉取远程更新（git pull）→ 创建分支开发 → 推送分支到远程（git push）→ 合并分支；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;问题处理：版本回滚（git reset/git revert）、解决冲突、恢复误删代码（git reflog）。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;Git 命令看似多，但常用的只有十几个，多练习几次（比如新建一个测试项目，反复执行 add、commit、push、pull 等操作），就能熟练掌握。记住：所有命令的核心都是“跟踪版本、同步代码”，理解每个命令的作用，比死记硬背更重要。&lt;/p&gt;&lt;/section&gt;</content:encoded></item><item><title>Firefly 友链自助申请按钮添加</title><link>https://zuelhhb.top/posts/blog/firefly-link-button/</link><guid isPermaLink="true">https://zuelhhb.top/posts/blog/firefly-link-button/</guid><description>一步到位给 Firefly 主题添加两种友链自助申请入口：右上角申请按钮 + 友链页面文字超链接，复制即用。</description><pubDate>Mon, 27 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;Firefly 友链自助申请按钮添加&lt;a href=&quot;#firefly-友链自助申请按钮添加&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;本篇教程适用于 &lt;strong&gt;Firefly Astro 主题&lt;/strong&gt;，不破坏原有布局、不影响任何功能，只修改两处代码，实现两种友链申请入口。&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;右上角「自助申请友链」按钮&lt;/li&gt;
&lt;li&gt;友链页面内「自助申请友链」文字链接&lt;/li&gt;
&lt;/ul&gt;&lt;section&gt;&lt;h2&gt;一、准备工作&lt;a href=&quot;#一准备工作&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;打开你的 Firefly 项目&lt;/li&gt;
&lt;li&gt;准备好你的 GitHub 友链申请地址&lt;/li&gt;
&lt;/ol&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;https://github.com/fqzlr/Firefly/issues/new?template=friend-request.yml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;全程只需要修改 &lt;strong&gt;2 个文件&lt;/strong&gt;，复制粘贴即可完成。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;二、添加右上角「自助申请友链」按钮&lt;a href=&quot;#二添加右上角自助申请友链按钮&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;修改文件&lt;a href=&quot;#修改文件&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;src/pages/friends.astro&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;步骤 1：添加申请链接&lt;a href=&quot;#步骤-1添加申请链接&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;在文件顶部的变量区域加入：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;const friendApplyUrl = &quot;https://github.com/fqzlr/Firefly/issues/new?template=friend-request.yml&quot;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;步骤 2：替换标题区域布局&lt;a href=&quot;#步骤-2替换标题区域布局&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;找到页面标题部分，替换成以下布局：&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;flex flex-col gap-4 md:flex-row md:items-end md:justify-between&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;flex items-center gap-3 mb-3&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;h-8 w-8 rounded-lg bg-(--primary) flex items-center justify-center text-white&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;Icon&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;name&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;material-symbols:group&quot;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;text-[1.5rem]&quot;&lt;/span&gt;&lt;span&gt; /&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;text-3xl font-bold text-neutral-900 dark:text-neutral-100&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;&lt;span&gt;description&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt;&lt;span&gt; (&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;p&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;text-base text-neutral-600 dark:text-neutral-400 leading-relaxed&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;description&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;p&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;&amp;lt;!-- 自助申请友链按钮 --&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;flex shrink-0 flex-col items-start gap-2 md:items-end&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;      &lt;/span&gt;&lt;span&gt;href&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;friendApplyUrl&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;      &lt;/span&gt;&lt;span&gt;target&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;_blank&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;      &lt;/span&gt;&lt;span&gt;rel&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;noopener noreferrer&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;      &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;inline-flex items-center gap-2 rounded-lg bg-(--primary) px-4 py-2.5 text-sm font-medium text-white transition-all hover:opacity-90 hover:scale-[1.02] active:scale-[0.98]&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;25&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;26&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;Icon&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;name&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;material-symbols:add-link-rounded&quot;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;text-lg&quot;&lt;/span&gt;&lt;span&gt; /&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;27&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;span&lt;/span&gt;&lt;span&gt;&amp;gt;自助申请友链&amp;lt;/&lt;/span&gt;&lt;span&gt;span&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;28&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;29&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;p&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;text-xs text-neutral-500 dark:text-neutral-400 md:text-right&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;30&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;通过 GitHub Issue 提交，系统会自动校验回链并同步收录&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;31&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;p&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;32&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;33&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;完成效果&lt;a href=&quot;#完成效果&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;✅ 右上角出现美观的申请按钮&lt;br /&gt;
✅ 适配明暗主题&lt;br /&gt;
✅ 点击直接跳转到友链申请表单&lt;br /&gt;
✅ 不破坏任何原有布局&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;三、添加友链页面内文字超链接&lt;a href=&quot;#三添加友链页面内文字超链接&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;修改文件&lt;a href=&quot;#修改文件-1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;src/content/spec/friends.mdx&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;找到 Step 2 里的：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;p&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;font-semibold text-sm mb-1&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;自助申请友链&amp;lt;/&lt;/span&gt;&lt;span&gt;p&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;替换成 &lt;strong&gt;文字超链接样式&lt;/strong&gt;：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;href&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;https://github.com/fqzlr/Firefly/issues/new?template=friend-request.yml&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;   &lt;/span&gt;&lt;span&gt;target&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;_blank&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;   &lt;/span&gt;&lt;span&gt;class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;font-semibold text-sm mb-1 inline-block text-(--primary) hover:underline&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;自助申请友链&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;完成效果&lt;a href=&quot;#完成效果-1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;✅ 保持布局完全不变&lt;br /&gt;
✅ 文字变为主题色超链接&lt;br /&gt;
✅ 鼠标悬浮自动加下划线&lt;br /&gt;
✅ 点击即可跳转申请&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;四、最终效果&lt;a href=&quot;#四最终效果&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;你的友链页面现在拥有：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;右上角申请按钮&lt;/strong&gt;（醒目、直观）&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;步骤中的文字链接&lt;/strong&gt;（流程清晰、体验友好）&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;两者配合，访客可以非常方便地提交友链申请。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;五、常见问题&lt;a href=&quot;#五常见问题&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;1. 按钮文字看不见&lt;a href=&quot;#1-按钮文字看不见&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;这是 CSS 变量问题，可使用固定色值：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;class=&quot;... bg-blue-500 text-white ...&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2. 跳转 404&lt;a href=&quot;#2-跳转-404&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;检查用户名、仓库名、yml 模板文件名是否正确。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;3. 样式错位&lt;a href=&quot;#3-样式错位&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;只替换教程里对应的代码块，不要改动其他结构。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;六、总结&lt;a href=&quot;#六总结&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;只需修改 2 个文件：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;src/pages/friends.astro&lt;/code&gt; → 右上角按钮&lt;/li&gt;
&lt;li&gt;&lt;code&gt;src/content/spec/friends.mdx&lt;/code&gt; → 文字链接&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>Firefly 友链自助申请自动化</title><link>https://zuelhhb.top/posts/blog/friend-link-auto-apply-guide/</link><guid isPermaLink="true">https://zuelhhb.top/posts/blog/friend-link-auto-apply-guide/</guid><description>从 Issue 表单、GitHub Actions、Playwright 校验，到自动写入 friendsConfig.ts、格式化、提交与回评，这篇文章完整拆解 Firefly 友链自助申请的实现原理、关键代码和落地步骤。</description><pubDate>Mon, 27 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;Firefly 友链自助申请自动化&lt;a href=&quot;#firefly-友链自助申请自动化&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;Tip&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;p&gt;原教程来自upxuu
&lt;a href=&quot;https://upxuu.com/posts/friend-link-system&quot; target=&quot;_blank&quot;&gt;https://upxuu.com/posts/friend-link-system&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;这篇文章把我这次在 Firefly 里落地的“友链自助申请”方案完整拆开讲一遍。&lt;/p&gt;&lt;p&gt;目标很简单：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;访客不需要私聊站长，直接在 GitHub 仓库里点一个 Issue 模板。&lt;/li&gt;
&lt;li&gt;填完网站名称、网站链接、友链页面 URL 等信息后，GitHub Actions 自动开始校验。&lt;/li&gt;
&lt;li&gt;系统会自动检查对方站点是否真的加了本站友链。&lt;/li&gt;
&lt;li&gt;校验通过后，自动把友链写入 &lt;code&gt;src/config/friendsConfig.ts&lt;/code&gt;。&lt;/li&gt;
&lt;li&gt;自动格式化、自动提交、自动推送，并在 Issue 里回评结果。&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;如果你也想在自己的博客里做一套类似的“自助申请友链”系统，这篇文章可以直接照着抄。&lt;/p&gt;&lt;hr /&gt;&lt;section&gt;&lt;h2&gt;一、最终效果是什么&lt;a href=&quot;#一最终效果是什么&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这套方案上线后，整个流程会变成这样：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;用户打开 GitHub 仓库里的“申请友链” Issue 模板。&lt;/li&gt;
&lt;li&gt;填写以下信息：
&lt;ul&gt;
&lt;li&gt;网站名称&lt;/li&gt;
&lt;li&gt;网站链接&lt;/li&gt;
&lt;li&gt;友链页面 URL&lt;/li&gt;
&lt;li&gt;网站描述&lt;/li&gt;
&lt;li&gt;网站头像 URL&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;用户提交 Issue。&lt;/li&gt;
&lt;li&gt;GitHub Actions 监听到 &lt;code&gt;issues.opened&lt;/code&gt; 事件后自动运行。&lt;/li&gt;
&lt;li&gt;工作流先给 Issue 打上“验证中”标签。&lt;/li&gt;
&lt;li&gt;脚本使用 Playwright 访问对方填写的友链页面。&lt;/li&gt;
&lt;li&gt;校验两件事：
&lt;ul&gt;
&lt;li&gt;这个页面能不能正常打开&lt;/li&gt;
&lt;li&gt;页面里有没有本站的回链&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;如果校验失败：
&lt;ul&gt;
&lt;li&gt;在 Issue 里自动评论失败原因&lt;/li&gt;
&lt;li&gt;给 Issue 打上 &lt;code&gt;needs-update&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;如果校验成功：
&lt;ul&gt;
&lt;li&gt;自动更新 &lt;code&gt;src/config/friendsConfig.ts&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;自动运行 Biome 格式化&lt;/li&gt;
&lt;li&gt;自动提交到仓库&lt;/li&gt;
&lt;li&gt;自动推送到默认分支&lt;/li&gt;
&lt;li&gt;在 Issue 里评论“已添加成功”&lt;/li&gt;
&lt;li&gt;自动关闭 Issue&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;评论重新验证也支持：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;如果申请者后来修好了友链页面，只需要回复这个 Issue。&lt;/li&gt;
&lt;li&gt;Workflow 会监听 &lt;code&gt;issue_comment.created&lt;/code&gt;。&lt;/li&gt;
&lt;li&gt;但只有 &lt;strong&gt;Issue 作者本人&lt;/strong&gt; 的评论才会触发重新验证，避免别人乱刷。&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;二、这套系统的核心原理&lt;a href=&quot;#二这套系统的核心原理&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这套自动化其实不是“一个脚本干完所有事”，而是四层拼起来的：&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;1. GitHub Issue 模板负责收集表单&lt;a href=&quot;#1-github-issue-模板负责收集表单&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;你不需要自己写前端表单，也不需要数据库。&lt;/p&gt;&lt;p&gt;GitHub 自带的 Issue Forms 就能帮你把申请信息收上来。&lt;br /&gt;
用户填完表单后，GitHub 会把内容渲染成一段结构化文本，放进 Issue body。&lt;/p&gt;&lt;p&gt;我们后面的脚本做的事情，本质上就是：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;读取 &lt;code&gt;context.payload.issue.body&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;从里面解析出“网站名称 / 网站链接 / 友链页面 URL / 描述 / 头像”&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;所以第一层原理很朴素：&lt;/p&gt;&lt;blockquote&gt;&lt;p&gt;GitHub Issue 不是单纯的“提问题”，它也可以被当成一个零后端表单系统。&lt;/p&gt;&lt;/blockquote&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;2. GitHub Actions 负责事件驱动&lt;a href=&quot;#2-github-actions-负责事件驱动&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;第二层是 GitHub Actions。&lt;/p&gt;&lt;p&gt;它的职责不是写业务逻辑，而是：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;监听事件&lt;/li&gt;
&lt;li&gt;准备运行环境&lt;/li&gt;
&lt;li&gt;安装依赖&lt;/li&gt;
&lt;li&gt;调用真正的处理脚本&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;这里我们监听两个事件：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;on&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;issues&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;types&lt;/span&gt;&lt;span&gt;: [&lt;/span&gt;&lt;span&gt;opened&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;reopened&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;issue_comment&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;types&lt;/span&gt;&lt;span&gt;: [&lt;/span&gt;&lt;span&gt;created&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这意味着：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;新建 Issue 时自动跑一次&lt;/li&gt;
&lt;li&gt;重新打开 Issue 时自动跑一次&lt;/li&gt;
&lt;li&gt;在 Issue 下面评论时也会跑一次&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;但后面脚本里会再做一层筛选，只允许作者自己的评论触发重新验证。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;3. &lt;code&gt;actions/github-script&lt;/code&gt; 负责把 GitHub 上下文交给本地脚本&lt;a href=&quot;#3-actionsgithub-script-负责把-github-上下文交给本地脚本&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;很多人会把全部逻辑都塞进 YAML 里的 &lt;code&gt;script: |&lt;/code&gt;，但这样很容易炸：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;YAML 缩进难维护&lt;/li&gt;
&lt;li&gt;JS 代码太长可读性差&lt;/li&gt;
&lt;li&gt;混入 &lt;code&gt;#&lt;/code&gt; 注释时容易直接变成语法错误&lt;/li&gt;
&lt;li&gt;编码和引号很容易出坑&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;所以这次的做法是：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;Workflow 里只保留一个很短的入口。&lt;/li&gt;
&lt;li&gt;真实逻辑放到独立文件 &lt;code&gt;.github/scripts/process-friend-request.cjs&lt;/code&gt;。&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;现在入口只有这一小段：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;- &lt;/span&gt;&lt;span&gt;name&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;Process friend request&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;uses&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;actions/github-script@v7&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;with&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;github-token&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;${{ secrets.GITHUB_TOKEN }}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;script&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;|&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;const path = require(&apos;node:path&apos;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;const handler = require(path.join(process.env.GITHUB_WORKSPACE, &apos;.github/scripts/process-friend-request.cjs&apos;));&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;await handler({ github, context, core });&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这段代码只做一件事：&lt;/p&gt;&lt;blockquote&gt;&lt;p&gt;把 &lt;code&gt;github&lt;/code&gt;、&lt;code&gt;context&lt;/code&gt; 这些 GitHub Runtime 对象传给仓库里的本地脚本。&lt;/p&gt;&lt;/blockquote&gt;&lt;p&gt;于是业务逻辑就从“YAML 内联脚本”变成了“普通 Node.js 文件”，维护体验会好很多。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;4. Playwright 负责做浏览器级校验&lt;a href=&quot;#4-playwright-负责做浏览器级校验&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;为什么不用 &lt;code&gt;fetch&lt;/code&gt; 直接请求页面？&lt;/p&gt;&lt;p&gt;因为友链页面场景更适合浏览器级校验：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;有些站点会跳转&lt;/li&gt;
&lt;li&gt;有些内容是客户端渲染出来的&lt;/li&gt;
&lt;li&gt;有些友链列表在真实 DOM 渲染后才出现&lt;/li&gt;
&lt;li&gt;只看 HTML 源码不一定能确认页面最终长什么样&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;所以这里用了 Playwright：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; { &lt;/span&gt;&lt;span&gt;chromium&lt;/span&gt;&lt;span&gt; } &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;require&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&quot;playwright&quot;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;校验逻辑分成两步：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;用浏览器打开对方提供的友链页面&lt;/li&gt;
&lt;li&gt;检查页面内容和页面上的所有链接里，是否出现本站域名或本站名称&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;也就是说它不是纯字符串比较，而是近似模拟了一个真实用户打开页面之后看到的结果。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;三、当前实现依赖哪些文件&lt;a href=&quot;#三当前实现依赖哪些文件&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;如果你要在自己的项目里复刻这套系统，主要会改下面这些文件。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;1. &lt;code&gt;.github/ISSUE_TEMPLATE/friend-request.yml&lt;/code&gt;&lt;a href=&quot;#1-githubissue_templatefriend-requestyml&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;作用：定义“申请友链”表单。&lt;/p&gt;&lt;p&gt;这个文件负责告诉 GitHub：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;模板标题是什么&lt;/li&gt;
&lt;li&gt;默认标签是什么&lt;/li&gt;
&lt;li&gt;需要用户填写哪些字段&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;你至少要保留这些字段：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;网站名称&lt;/li&gt;
&lt;li&gt;网站链接&lt;/li&gt;
&lt;li&gt;友链页面 URL&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;描述和头像可以设为可选。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;2. &lt;code&gt;.github/workflows/friend-link-checker.yml&lt;/code&gt;&lt;a href=&quot;#2-githubworkflowsfriend-link-checkeryml&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;作用：定义自动化工作流。&lt;/p&gt;&lt;p&gt;它主要负责：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;监听 Issue / 评论事件&lt;/li&gt;
&lt;li&gt;安装 Node.js&lt;/li&gt;
&lt;li&gt;安装 pnpm&lt;/li&gt;
&lt;li&gt;安装项目依赖&lt;/li&gt;
&lt;li&gt;安装 Playwright Chromium&lt;/li&gt;
&lt;li&gt;调用处理脚本&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;这个文件是系统的“总开关”。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;3. &lt;code&gt;.github/scripts/process-friend-request.cjs&lt;/code&gt;&lt;a href=&quot;#3-githubscriptsprocess-friend-requestcjs&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;作用：真正的核心业务逻辑。&lt;/p&gt;&lt;p&gt;它做了几乎所有关键工作：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;解析 Issue 内容&lt;/li&gt;
&lt;li&gt;校验 URL&lt;/li&gt;
&lt;li&gt;使用 Playwright 检查友链页&lt;/li&gt;
&lt;li&gt;解析现有 &lt;code&gt;friendsConfig.ts&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;生成新的友链对象&lt;/li&gt;
&lt;li&gt;写回配置文件&lt;/li&gt;
&lt;li&gt;运行 Biome 格式化&lt;/li&gt;
&lt;li&gt;Git 提交与推送&lt;/li&gt;
&lt;li&gt;在 Issue 里评论成功/失败&lt;/li&gt;
&lt;li&gt;打标签和关闭 Issue&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;可以把它理解成这套系统的“应用层”。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;4. &lt;code&gt;src/config/friendsConfig.ts&lt;/code&gt;&lt;a href=&quot;#4-srcconfigfriendsconfigts&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;作用：真正保存友链数据。&lt;/p&gt;&lt;p&gt;这个仓库不是写入 JSON，而是直接更新 TypeScript 配置文件里的数组：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;friendsConfig&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;FriendLink&lt;/span&gt;&lt;span&gt;[] &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;站点名&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;imgurl&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;头像地址&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;desc&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;描述&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;siteurl&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;https://example.com/&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;tags&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span&gt;&quot;Blog&quot;&lt;/span&gt;&lt;span&gt;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;weight&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;10&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;enabled&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;issue_id&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;123&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;];&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;所以自动化脚本必须知道这个文件的格式，并按它的结构生成内容。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;5. &lt;code&gt;.github/workflows/biome.yml&lt;/code&gt;&lt;a href=&quot;#5-githubworkflowsbiomeyml&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;作用：保证自动写入后的文件仍然符合代码格式规范。&lt;/p&gt;&lt;p&gt;这一步非常重要，因为如果脚本写入的内容格式不稳定，CI 会红，自动化虽然成功写入了数据，但 PR / 提交质量检查会挂掉。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;四、完整执行链路&lt;a href=&quot;#四完整执行链路&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这里按一次“用户申请友链”的真实时间顺序讲。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 1 步：用户提交申请&lt;a href=&quot;#第-1-步用户提交申请&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;用户点击 GitHub Issue 模板，生成一条“友链申请” Issue。&lt;/p&gt;&lt;p&gt;Issue body 里会包含类似下面的结构：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;### 网站名称&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;My Blog&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;### 网站链接&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;https://example.com&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;### 友链页面 URL&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;https://example.com/friends&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;### 网站描述&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;记录技术与生活&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;### 网站头像 URL&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;https://example.com/avatar.png&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这一步不需要额外后端，GitHub 自己就帮你把数据存下来了。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 2 步：Workflow 被触发&lt;a href=&quot;#第-2-步workflow-被触发&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;code&gt;.github/workflows/friend-link-checker.yml&lt;/code&gt; 被触发。&lt;/p&gt;&lt;p&gt;它会在 Ubuntu Runner 上做这些准备工作：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;- &lt;/span&gt;&lt;span&gt;uses&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;actions/checkout@v4&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;- &lt;/span&gt;&lt;span&gt;uses&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;actions/setup-node@v4&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;- &lt;/span&gt;&lt;span&gt;uses&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;pnpm/action-setup@v4&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;- &lt;/span&gt;&lt;span&gt;run&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;pnpm install --frozen-lockfile&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;- &lt;/span&gt;&lt;span&gt;run&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;pnpm exec playwright install --with-deps chromium&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这几步分别解决：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;拉代码&lt;/li&gt;
&lt;li&gt;提供 Node 环境&lt;/li&gt;
&lt;li&gt;提供 pnpm&lt;/li&gt;
&lt;li&gt;安装仓库依赖&lt;/li&gt;
&lt;li&gt;安装 Playwright 所需浏览器&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 3 步：脚本判断这是不是友链申请&lt;a href=&quot;#第-3-步脚本判断这是不是友链申请&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;在 &lt;code&gt;process-friend-request.cjs&lt;/code&gt; 里，脚本首先读取：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;context.eventName&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;context.payload.action&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;context.payload.issue.body&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;然后判断：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;isFriendRequest&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;body&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;includes&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&quot;### 网站名称&quot;&lt;/span&gt;&lt;span&gt;) &lt;/span&gt;&lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;body&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;includes&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&quot;### 网站链接&quot;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;如果不是友链申请，直接跳过。&lt;/p&gt;&lt;p&gt;这样做的好处是：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;这个 workflow 可以挂在 &lt;code&gt;issues&lt;/code&gt; 事件上&lt;/li&gt;
&lt;li&gt;但不会误处理其他普通 Issue&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 4 步：打“验证中”标签&lt;a href=&quot;#第-4-步打验证中标签&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;如果是新建或重新打开的 Issue，先打一个标签：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;await&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;github&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;rest&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;issues&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;addLabels&lt;/span&gt;&lt;span&gt;({&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;owner&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;repo&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;issue_number&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;issueNumber&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;labels&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span&gt;&quot;验证中&quot;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;});&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这一步主要是用户体验优化。&lt;/p&gt;&lt;p&gt;访客一看标签，就知道系统已经开始处理，不需要站长人工回复“我看到了”。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 5 步：解析 Issue 表单&lt;a href=&quot;#第-5-步解析-issue-表单&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;解析逻辑在 &lt;code&gt;parseIssueBody(body)&lt;/code&gt;。&lt;/p&gt;&lt;p&gt;这个函数做了两件事：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;按 Markdown 标题识别字段&lt;/li&gt;
&lt;li&gt;容忍一些不同写法&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;它会兼容这些字段名称：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;网站名称 / 名称 / 站点名称&lt;/li&gt;
&lt;li&gt;网站链接 / 站点链接 / 链接 / 网址 / 地址&lt;/li&gt;
&lt;li&gt;友链页面 / 友链地址&lt;/li&gt;
&lt;li&gt;网站描述 / 描述 / 简介&lt;/li&gt;
&lt;li&gt;网站头像 / 头像 / 图标&lt;/li&gt;
&lt;li&gt;网站标签 / 标签 / 分类&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;这样做的意义是：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;模板稍微改字，不至于整套系统失效&lt;/li&gt;
&lt;li&gt;用户手动编辑 Issue 内容时，也更不容易把解析搞崩&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;解析结束后会得到一个统一结构：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;site_name&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;site_url&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;friend_page_url&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;site_desc&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;site_avatar&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;site_tag&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 6 步：先校验 URL 合法性&lt;a href=&quot;#第-6-步先校验-url-合法性&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;在真正访问网站前，脚本先用 &lt;code&gt;new URL()&lt;/code&gt; 规范化地址：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;normalizeUrl&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;value&lt;/span&gt;&lt;span&gt;) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;try&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;new&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;URL&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;value&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;trim&lt;/span&gt;&lt;span&gt;()).&lt;/span&gt;&lt;span&gt;toString&lt;/span&gt;&lt;span&gt;();&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;} &lt;/span&gt;&lt;span&gt;catch&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;&quot;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;如果用户填了无效 URL，就直接回评，不继续往后跑。&lt;/p&gt;&lt;p&gt;这样能省掉很多无意义的浏览器启动和网络请求。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 7 步：用 Playwright 校验友链页面&lt;a href=&quot;#第-7-步用-playwright-校验友链页面&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;code&gt;validateFriendPage(pageUrl)&lt;/code&gt; 是整个流程最关键的函数之一。&lt;/p&gt;&lt;p&gt;它主要做四件事：&lt;/p&gt;&lt;section&gt;&lt;h3&gt;1. 启动无头 Chromium&lt;a href=&quot;#1-启动无头-chromium&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;browser&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;await&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;chromium&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;launch&lt;/span&gt;&lt;span&gt;({&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;headless&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;args&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span&gt;&quot;--no-sandbox&quot;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;});&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2. 打开用户提供的友链页&lt;a href=&quot;#2-打开用户提供的友链页&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;response&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;await&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;page&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;goto&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;pageUrl&lt;/span&gt;&lt;span&gt;, {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;waitUntil&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;domcontentloaded&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;timeout&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;12000&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;});&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;3. 做失败重试&lt;a href=&quot;#3-做失败重试&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;脚本不是只试一次，而是会重试 3 次，中间等待 2 秒。&lt;/p&gt;&lt;p&gt;这样能降低这类波动造成的误判：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;短时网络抖动&lt;/li&gt;
&lt;li&gt;对方站点首包慢&lt;/li&gt;
&lt;li&gt;CDN 临时超时&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;4. 检查是否存在本站回链&lt;a href=&quot;#4-检查是否存在本站回链&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;脚本会同时抓：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;页面 HTML 内容&lt;/li&gt;
&lt;li&gt;页面所有 &lt;code&gt;a[href]&lt;/code&gt; 链接&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;然后统一转成小写，检查其中是否包含：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;本站域名&lt;/li&gt;
&lt;li&gt;本站名称&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;当前配置里是：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;SITE_INFO&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;name&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;fqzlr&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;url&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;https://fqzlr.com/&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;avatar&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;...&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;desc&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;...&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;};&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;于是脚本会重点寻找：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;fqzlr.com&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;fqzlr&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;如果没找到，就说明“对方站点没有把你的友链真正挂上去”，申请不会通过。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 8 步：失败时怎么处理&lt;a href=&quot;#第-8-步失败时怎么处理&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;如果友链页打不开，或者没找到本站回链，脚本不会静默失败，而是自动在 Issue 里评论。&lt;/p&gt;&lt;p&gt;失败时会分成两类文案：&lt;/p&gt;&lt;section&gt;&lt;h3&gt;页面不可访问&lt;a href=&quot;#页面不可访问&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;会提示：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;用户填写的友链页 URL&lt;/li&gt;
&lt;li&gt;实际访问后的 URL&lt;/li&gt;
&lt;li&gt;HTTP 状态码&lt;/li&gt;
&lt;li&gt;错误信息&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;页面可访问，但没找到本站友链&lt;a href=&quot;#页面可访问但没找到本站友链&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;会提示：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;没找到友链&lt;/li&gt;
&lt;li&gt;请先在对方站点添加本站信息&lt;/li&gt;
&lt;li&gt;附上本站名称、链接、头像、描述&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;同时还会给 Issue 打上：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;needs-update&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这样用户只要修完，再回评论，就能重新触发验证。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 9 步：通过后如何写入 &lt;code&gt;friendsConfig.ts&lt;/code&gt;&lt;a href=&quot;#第-9-步通过后如何写入-friendsconfigts&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;通过验证后，系统会进入“写配置”阶段。&lt;/p&gt;&lt;p&gt;这一步主要由三个函数完成：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;parseFriendsConfig(content)&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;renderFriend(friend, indent)&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;updateFriendsConfig(repoRoot, data, issueId)&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;section&gt;&lt;h3&gt;为什么不是直接 &lt;code&gt;JSON.parse&lt;/code&gt;&lt;a href=&quot;#为什么不是直接-jsonparse&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;因为这个文件是 TypeScript，不是纯 JSON。&lt;/p&gt;&lt;p&gt;它长这样：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;friendsConfig&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;FriendLink&lt;/span&gt;&lt;span&gt;[] &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;xxx&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;imgurl&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;xxx&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;desc&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;xxx&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;siteurl&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;xxx&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;tags&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span&gt;&quot;Blog&quot;&lt;/span&gt;&lt;span&gt;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;weight&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;10&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;enabled&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;issue_id&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;];&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;注意几点：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;属性名没加引号&lt;/li&gt;
&lt;li&gt;带类型标注&lt;/li&gt;
&lt;li&gt;可能带注释&lt;/li&gt;
&lt;li&gt;不是合法 JSON&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;所以脚本不能这样写：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;JSON&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;parse&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;match&lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;]);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这也是之前自动化里一个会继续引发报错的坑。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;当前实现怎么做&lt;a href=&quot;#当前实现怎么做&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;现在的实现是：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;用正则先截出 &lt;code&gt;friendsConfig&lt;/code&gt; 数组主体&lt;/li&gt;
&lt;li&gt;再把每个对象块拆出来&lt;/li&gt;
&lt;li&gt;分别抽取：
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;title&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;imgurl&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;desc&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;siteurl&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;tags&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;weight&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;enabled&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;issue_id&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;构造成 JS 对象数组&lt;/li&gt;
&lt;li&gt;再渲染回 TypeScript 字面量&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;这是一种“结构感知但不依赖 TS AST”的轻量实现。&lt;/p&gt;&lt;p&gt;优点是简单、无额外编译依赖。&lt;br /&gt;
缺点是如果你未来把 &lt;code&gt;friendsConfig.ts&lt;/code&gt; 改成完全不同的格式，正则也得跟着改。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 10 步：新增还是覆盖，怎么判断&lt;a href=&quot;#第-10-步新增还是覆盖怎么判断&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;脚本会根据 &lt;code&gt;siteurl&lt;/code&gt; 判断这是不是已存在的友链：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;existingIndex&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;friends&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;findIndex&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;friend&lt;/span&gt;&lt;span&gt;) &lt;/span&gt;&lt;span&gt;=&amp;gt;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;trimTrailingSlash&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;friend&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;siteurl&lt;/span&gt;&lt;span&gt;) &lt;/span&gt;&lt;span&gt;===&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;normalizedUrl&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这里做了去尾斜杠处理：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;https://example.com&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;https://example.com/&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;会被视为同一个站点。&lt;/p&gt;&lt;p&gt;如果已存在：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;覆盖旧项&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;如果不存在：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;push 新项&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;这样可以避免重复添加同一个网站。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 11 步：为什么写完后还要再跑 Biome&lt;a href=&quot;#第-11-步为什么写完后还要再跑-biome&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这是这次修复里非常关键的一步。&lt;/p&gt;&lt;p&gt;自动脚本虽然能写出结构正确的 TS，但不一定和仓库的 Biome 格式完全一致。&lt;br /&gt;
结果就是：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;友链添加成功了&lt;/li&gt;
&lt;li&gt;但 &lt;code&gt;biome ci ./src&lt;/code&gt; 报 &lt;code&gt;File content differs from formatting output&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;为了解决这个问题，我在脚本里加了一层：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;formatFriendsConfig&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;repoRoot&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;它会调用仓库自己的 Biome 可执行文件：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;node_modules&lt;/span&gt;&lt;span&gt;/&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;bin&lt;/span&gt;&lt;span&gt;/&lt;/span&gt;&lt;span&gt;biome&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;然后执行：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;biome&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;format&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--write&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;src/config/friendsConfig.ts&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这样自动生成的提交就会和仓库 CI 的格式要求一致。&lt;/p&gt;&lt;p&gt;这是把“写入成功”升级成“写入成功且能过 CI”的关键。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 12 步：自动提交与推送&lt;a href=&quot;#第-12-步自动提交与推送&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;通过验证并写入配置后，脚本会自动执行 Git 流程：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;config&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;user&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;name&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;github-actions[bot]&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;config&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;user&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;email&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;github-actions[bot]@users.noreply.github.com&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;add&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;src&lt;/span&gt;&lt;/span&gt;&lt;span&gt;/&lt;/span&gt;&lt;span&gt;config&lt;/span&gt;&lt;span&gt;/&lt;/span&gt;&lt;span&gt;&lt;span&gt;friendsConfig&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;ts&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;commit&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&lt;span&gt;m&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;🤝 更新友链: 站点名&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;pull&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--&lt;/span&gt;&lt;span&gt;&lt;span&gt;rebase&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;default&lt;/span&gt;&lt;span&gt;-&lt;/span&gt;&lt;span&gt;branch&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;HEAD&lt;/span&gt;&lt;span&gt;:&amp;lt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;default-branch&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这里有两个值得注意的点。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;1. 为什么先 &lt;code&gt;pull --rebase&lt;/code&gt;&lt;a href=&quot;#1-为什么先-pull---rebase&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;因为仓库有可能在 workflow 运行期间又被其他人提交了新内容。&lt;br /&gt;
如果直接 push，很容易出现：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;! [rejected] master -&amp;gt; master (fetch first)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;先 &lt;code&gt;pull --rebase&lt;/code&gt; 可以降低这种失败概率。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2. 为什么不是强推&lt;a href=&quot;#2-为什么不是强推&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;自动化流程里不应该默认 &lt;code&gt;--force&lt;/code&gt;。&lt;br /&gt;
因为它是服务流程，不是人工兜底流程。强推会增加误覆盖风险。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 13 步：评论成功结果并关闭 Issue&lt;a href=&quot;#第-13-步评论成功结果并关闭-issue&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;自动提交成功后，脚本还会回到 GitHub 上收尾：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;评论“已成功添加友链”&lt;/li&gt;
&lt;li&gt;移除“验证中”&lt;/li&gt;
&lt;li&gt;移除 &lt;code&gt;needs-update&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;关闭 Issue&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;关闭时使用的是：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;await&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;github&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;rest&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;issues&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;update&lt;/span&gt;&lt;span&gt;({&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;owner&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;repo&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;issue_number&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;issueNumber&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;state&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;closed&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;state_reason&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;completed&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;});&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这里要注意：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;state&lt;/code&gt; 必须是 &lt;code&gt;&quot;closed&quot;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;不能写成 &lt;code&gt;&quot;completed&quot;&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;code&gt;completed&lt;/code&gt; 是 &lt;code&gt;state_reason&lt;/code&gt;，不是 &lt;code&gt;state&lt;/code&gt;&lt;/p&gt;&lt;p&gt;这也是这次修复里顺手纠正的一个 API 用法问题。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;五、这次真正需要改哪些代码&lt;a href=&quot;#五这次真正需要改哪些代码&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;如果你也要照着搭一套，最少要改下面这些地方。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;1. 修改 Issue 模板&lt;a href=&quot;#1-修改-issue-模板&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;文件：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;.github/ISSUE_TEMPLATE/friend-request.yml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;你要根据自己的站点信息调整：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;模板标题&lt;/li&gt;
&lt;li&gt;默认标签&lt;/li&gt;
&lt;li&gt;表单字段&lt;/li&gt;
&lt;li&gt;“请先添加本站友链”的提示文案&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;如果你站点不是博客，还可以加更多字段，比如：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;RSS 链接&lt;/li&gt;
&lt;li&gt;站点分类&lt;/li&gt;
&lt;li&gt;站长昵称&lt;/li&gt;
&lt;li&gt;是否接受头像热链&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;2. 修改站点常量&lt;a href=&quot;#2-修改站点常量&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;文件：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;.github/scripts/process-friend-request.cjs&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;重点修改这里：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;SITE_INFO&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;name&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;fqzlr&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;url&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;https://fqzlr.com/&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;avatar&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;https://q1.qlogo.cn/g?b=qq&amp;amp;nk=20447289&amp;amp;s=640&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;desc&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;坐而言不如起而行.&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;};&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这是整个校验逻辑里“本站信息”的唯一可信来源。&lt;/p&gt;&lt;p&gt;它会影响：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;是否判断回链存在&lt;/li&gt;
&lt;li&gt;失败时给用户展示的本站友链信息&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;3. 修改友链数据文件路径&lt;a href=&quot;#3-修改友链数据文件路径&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;如果你的友链配置不在当前路径，需要改这里：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;FRIENDS_CONFIG_RELATIVE_PATH&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;src/config/friendsConfig.ts&quot;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;如果你用的是：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;friends.json&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;data/friends.ts&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;src/content/friends.yaml&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;那解析和写入逻辑也要跟着改。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;4. 修改配置文件字段映射&lt;a href=&quot;#4-修改配置文件字段映射&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;当前脚本写入的是这个结构：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;imgurl&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;desc&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;siteurl&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;tags&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;weight&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;enabled&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;issue_id&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;如果你的项目使用的是别的字段，比如：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;name&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;url&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;avatar&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;description&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;那就要同步调整：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;parseFriendsConfig&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;renderFriend&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;updateFriendsConfig&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;这三个函数。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;5. 修改 Workflow 权限&lt;a href=&quot;#5-修改-workflow-权限&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;当前 workflow 需要：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;permissions&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;contents&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;write&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;issues&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;write&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;原因是：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;contents: write&lt;/code&gt; 用来提交代码&lt;/li&gt;
&lt;li&gt;&lt;code&gt;issues: write&lt;/code&gt; 用来评论、打标签、关闭 Issue&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;如果权限不够，会表现成：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;能跑脚本&lt;/li&gt;
&lt;li&gt;但不能回评&lt;/li&gt;
&lt;li&gt;或者不能 push&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;6. 确保依赖安装方式和仓库一致&lt;a href=&quot;#6-确保依赖安装方式和仓库一致&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这次还修了一组很典型的 CI 坑。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;&lt;code&gt;pnpm/action-setup&lt;/code&gt; 版本冲突&lt;a href=&quot;#pnpmaction-setup-版本冲突&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;如果你的 &lt;code&gt;package.json&lt;/code&gt; 已经有：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;packageManager&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;pnpm@9.14.4&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;那么 workflow 里不要再写：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;with&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;version&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;9&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;否则会出现：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Multiple versions of pnpm specified&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;Biome 命令找不到&lt;a href=&quot;#biome-命令找不到&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;不要依赖“全局有 biome 命令”。&lt;/p&gt;&lt;p&gt;更稳的方式是：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;pnpm install --frozen-lockfile&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;pnpm exec biome ci ./src --reporter=github&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这样 CI 使用的一定是仓库锁定的 Biome 版本。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;六、为什么我把长逻辑挪出了 YAML&lt;a href=&quot;#六为什么我把长逻辑挪出了-yaml&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这是这次改动里最值得保留的一个经验。&lt;/p&gt;&lt;p&gt;一开始如果把全部逻辑都写在：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;script&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;|&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;里面，会有这些真实问题：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;代码太长，维护困难&lt;/li&gt;
&lt;li&gt;YAML 和 JS 的双层语法混在一起，调试痛苦&lt;/li&gt;
&lt;li&gt;混入 &lt;code&gt;#&lt;/code&gt; 注释时会直接触发 &lt;code&gt;SyntaxError&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;编码、引号、缩进很容易造成“看起来没问题，运行就炸”&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;所以我最后采用的是：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;Workflow 里只保留短入口&lt;/li&gt;
&lt;li&gt;真正逻辑写进 &lt;code&gt;.cjs&lt;/code&gt; 文件&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;这也是我给所有 GitHub Actions 复杂逻辑的建议：&lt;/p&gt;&lt;blockquote&gt;&lt;p&gt;YAML 负责调度，脚本文件负责业务。&lt;/p&gt;&lt;/blockquote&gt;&lt;p&gt;不要让 YAML 同时承担“编排器”和“应用层代码容器”的职责。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;七、这一套方案有哪些限制&lt;a href=&quot;#七这一套方案有哪些限制&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这套实现已经够实用，但它不是没有边界。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;1. &lt;code&gt;friendsConfig.ts&lt;/code&gt; 解析依赖当前格式&lt;a href=&quot;#1-friendsconfigts-解析依赖当前格式&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;现在是用正则和对象块拆分来处理 TS 配置。&lt;/p&gt;&lt;p&gt;所以如果你未来把友链配置改成：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;嵌套更深&lt;/li&gt;
&lt;li&gt;动态表达式更多&lt;/li&gt;
&lt;li&gt;多行模板字符串&lt;/li&gt;
&lt;li&gt;复杂注释结构&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;那解析函数需要一起升级。&lt;/p&gt;&lt;p&gt;更稳的长期方案有两个：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;改成单独的 JSON / YAML 数据文件&lt;/li&gt;
&lt;li&gt;用 TypeScript AST 或 Babel AST 解析&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;2. Playwright 校验是“近似真实浏览器”，但不是 100% 万能&lt;a href=&quot;#2-playwright-校验是近似真实浏览器但不是-100-万能&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;比如：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;站点有地区限制&lt;/li&gt;
&lt;li&gt;站点会拦 GitHub Actions Runner IP&lt;/li&gt;
&lt;li&gt;页面需要登录&lt;/li&gt;
&lt;li&gt;友链列表要滚动或点击后才出现&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;这些情况下仍可能误判。&lt;/p&gt;&lt;p&gt;如果你的网站遇到这种场景，可以进一步增强：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;增加自定义等待策略&lt;/li&gt;
&lt;li&gt;支持指定 CSS 选择器&lt;/li&gt;
&lt;li&gt;支持截图附件&lt;/li&gt;
&lt;li&gt;把失败截图上传到 Issue 评论&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;3. 自动 push 依赖仓库分支策略&lt;a href=&quot;#3-自动-push-依赖仓库分支策略&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;如果你的默认分支启用了非常严格的限制，比如：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;不允许 GitHub Actions 写入&lt;/li&gt;
&lt;li&gt;必须走 PR 合并&lt;/li&gt;
&lt;li&gt;强制签名提交&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;那么脚本里的“直接提交并推送”就需要改造。&lt;/p&gt;&lt;p&gt;你可以改成：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;自动创建分支&lt;/li&gt;
&lt;li&gt;自动提交到新分支&lt;/li&gt;
&lt;li&gt;自动开 PR&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;这样会更适合协作型仓库。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;八、如果你要从零搭建，推荐照这个顺序做&lt;a href=&quot;#八如果你要从零搭建推荐照这个顺序做&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;如果你不是在改现有项目，而是从零上手，我推荐按下面顺序来。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 1 步：先确定友链数据存储格式&lt;a href=&quot;#第-1-步先确定友链数据存储格式&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;先决定你最终要写入哪里：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;JSON&lt;/li&gt;
&lt;li&gt;YAML&lt;/li&gt;
&lt;li&gt;TS 配置文件&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;这一步会直接决定后面脚本复杂度。&lt;/p&gt;&lt;p&gt;如果想最省事，我建议优先 JSON 或 YAML。&lt;br /&gt;
如果你已经有成熟的 TS 配置结构，也可以像 Firefly 这样继续沿用。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 2 步：先把 Issue 模板做好&lt;a href=&quot;#第-2-步先把-issue-模板做好&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;不要一上来就写脚本。&lt;br /&gt;
先确保用户提交的内容结构稳定。&lt;/p&gt;&lt;p&gt;因为自动化流程的第一输入，其实就是 Issue body。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 3 步：先做“只解析不写入”&lt;a href=&quot;#第-3-步先做只解析不写入&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;先写一个最小脚本，只做：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;读取 Issue 内容&lt;/li&gt;
&lt;li&gt;解析字段&lt;/li&gt;
&lt;li&gt;在日志里打印结果&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;这样先确认字段提取没问题，再往后接浏览器校验和写文件。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 4 步：接入 Playwright 校验&lt;a href=&quot;#第-4-步接入-playwright-校验&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;等字段解析稳定后，再加：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;URL 检查&lt;/li&gt;
&lt;li&gt;页面是否可访问&lt;/li&gt;
&lt;li&gt;页面里是否包含本站回链&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;不要一开始把所有事情混在一块写，不然后期很难排错。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;第 5 步：最后再接 Git 提交&lt;a href=&quot;#第-5-步最后再接-git-提交&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;真正危险的是自动提交阶段。&lt;br /&gt;
我建议把“解析”和“校验”完全确认稳定后，再开放：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;写文件&lt;/li&gt;
&lt;li&gt;git add&lt;/li&gt;
&lt;li&gt;git commit&lt;/li&gt;
&lt;li&gt;git push&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;否则一开始就自动 push，调试时很容易把仓库历史搞脏。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;九、这次踩过的坑，顺手给你避掉&lt;a href=&quot;#九这次踩过的坑顺手给你避掉&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这里把这次实际遇到的问题总结一下。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;1. &lt;code&gt;actions/github-script&lt;/code&gt; 里的 JS 不是 Shell&lt;a href=&quot;#1-actionsgithub-script-里的-js-不是-shell&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;code&gt;script: |&lt;/code&gt; 里面只能写 JS，不能混进：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 注释&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这种 Shell 风格注释。&lt;br /&gt;
否则会直接触发：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;SyntaxError: Invalid or unexpected token&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;2. TS 配置文件不能直接 &lt;code&gt;JSON.parse&lt;/code&gt;&lt;a href=&quot;#2-ts-配置文件不能直接-jsonparse&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;code&gt;friendsConfig.ts&lt;/code&gt; 是 TypeScript 对象字面量，不是 JSON。&lt;/p&gt;&lt;p&gt;只要你文件里有：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;类型标注&lt;/li&gt;
&lt;li&gt;非引号属性名&lt;/li&gt;
&lt;li&gt;注释&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;它就不可能直接被 &lt;code&gt;JSON.parse&lt;/code&gt;。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;3. 自动写入后的文件必须再格式化&lt;a href=&quot;#3-自动写入后的文件必须再格式化&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;脚本“能写进去”不等于“能过 CI”。&lt;/p&gt;&lt;p&gt;格式化是必须的，不是锦上添花。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;4. &lt;code&gt;pnpm/action-setup&lt;/code&gt; 和 &lt;code&gt;packageManager&lt;/code&gt; 不能双重声明版本&lt;a href=&quot;#4-pnpmaction-setup-和-packagemanager-不能双重声明版本&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;如果 &lt;code&gt;package.json&lt;/code&gt; 已经写了：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;packageManager&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;pnpm@9.14.4&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;workflow 里就不要重复写 &lt;code&gt;version&lt;/code&gt;。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;5. Cloudflare 机器人会检查 &lt;code&gt;wrangler.jsonc&lt;/code&gt; 的 Worker 名称&lt;a href=&quot;#5-cloudflare-机器人会检查-wranglerjsonc-的-worker-名称&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;如果你的项目名已经改成 &lt;code&gt;firefly&lt;/code&gt;，但 &lt;code&gt;wrangler.jsonc&lt;/code&gt; 里还是：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;name&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;fuwari&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;Cloudflare 的机器人 PR 会持续提醒你更新。&lt;/p&gt;&lt;p&gt;所以这次也顺手把：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;name&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;fuwari&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;改成了：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;name&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;firefly&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;十、我对这套方案的建议&lt;a href=&quot;#十我对这套方案的建议&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;如果你只是个人博客，这套方案已经够用，而且很优雅：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;没有数据库&lt;/li&gt;
&lt;li&gt;没有后端服务&lt;/li&gt;
&lt;li&gt;没有额外部署成本&lt;/li&gt;
&lt;li&gt;审核门槛低&lt;/li&gt;
&lt;li&gt;自动化程度高&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;它利用的其实都是 GitHub 现成能力：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;Issue Forms&lt;/li&gt;
&lt;li&gt;Actions&lt;/li&gt;
&lt;li&gt;&lt;code&gt;github-script&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;仓库写权限&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;再加上一个 Playwright，就能拼出相当完整的业务闭环。&lt;/p&gt;&lt;p&gt;如果你以后还想继续增强，我建议优先加这几项：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;失败时自动截图并贴到评论&lt;/li&gt;
&lt;li&gt;自动创建 PR，而不是直接推默认分支&lt;/li&gt;
&lt;li&gt;将友链数据迁移到单独的 JSON / YAML 文件&lt;/li&gt;
&lt;li&gt;支持白名单域名 / 黑名单域名&lt;/li&gt;
&lt;li&gt;支持自动去重、自动排序、自动补充默认头像&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;十一、本文对应的关键文件清单&lt;a href=&quot;#十一本文对应的关键文件清单&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;方便你对照仓库直接看：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;.github/ISSUE_TEMPLATE/friend-request.yml&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;.github/workflows/friend-link-checker.yml&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;.github/scripts/process-friend-request.cjs&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;src/config/friendsConfig.ts&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;.github/workflows/biome.yml&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;wrangler.jsonc&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;十二、结语&lt;a href=&quot;#十二结语&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这套“友链自助申请”方案本质上是把 GitHub 当成了一个轻量业务平台来用：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;用 Issue 表单承接输入&lt;/li&gt;
&lt;li&gt;用 Actions 承接流程&lt;/li&gt;
&lt;li&gt;用脚本承接业务判断&lt;/li&gt;
&lt;li&gt;用仓库文件承接数据落地&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;没有后端，也能把流程做完整。&lt;br /&gt;
对个人博客和轻量站点来说，这种思路非常值。&lt;/p&gt;&lt;p&gt;如果你正在做自己的博客系统，或者想把原本人工处理的流程逐步自动化，我很推荐从这种“基于 Git 仓库自身能力”的方案开始搭。&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>怎么使用obsidian 来编写 astro 博客</title><link>https://zuelhhb.top/posts/blog/obsidian-astro/</link><guid isPermaLink="true">https://zuelhhb.top/posts/blog/obsidian-astro/</guid><description>本教程专为「Obsidian 撰写笔记」+「Astro Composer 插件转换笔记为 Astro 博客内容」+「Git 插件同步到 GitHub」的 workflow 设计，全程无需复杂命令行，纯 Obsidian 内操作（少量 GitHub 后台配置），适合新手快速上手，解决“Obsidian 写文→Astro 发布→GitHub 托管”的全流程同步问题。</description><pubDate>Sat, 18 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Obsidian + Astro Composer + Git 插件 同步 Astro 博客到 GitHub 完整教程&lt;/p&gt;
&lt;p&gt;前置前提（必做）：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;已安装 Obsidian 客户端，且启用「第三方插件」（设置 → 第三方插件 → 关闭“安全模式”）。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;已创建 Astro 博客项目（本地需有 Astro 项目文件夹，可通过 &lt;code&gt;pnpm create astro@latest&lt;/code&gt; 快速创建，选择 blog 模板即可），并熟悉 Astro 项目的 &lt;code&gt;src/content&lt;/code&gt; 目录（用于存放博客文章）。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;已注册 GitHub 账号，且创建了用于托管 Astro 博客的仓库（建议仓库名与 Astro 博客项目名一致，若要部署 GitHub Pages，仓库名可设为 &lt;code&gt;用户名.github.io&lt;/code&gt;）。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;已安装所需插件：Astro Composer（Obsidian 插件）、Git（Obsidian 插件，常用 Obsidian Git 或 Git Vault/Folder Sync，本教程以 Obsidian Git 为例，适配多数用户需求）。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;section&gt;&lt;h2&gt;第一步：安装并配置 Astro Composer 插件（核心：Obsidian 笔记转 Astro 内容）&lt;a href=&quot;#第一步安装并配置-astro-composer-插件核心obsidian-笔记转-astro-内容&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Astro Composer 是 Obsidian 与 Astro 博客无缝衔接的关键插件，可自动将 Obsidian 笔记转换为 Astro 支持的 Markdown 格式（含自动处理链接、标准化属性、管理草稿等），目前该插件暂未上架 Obsidian 社区插件库，需通过 BRAT 插件安装或手动安装，推荐 BRAT 安装（更便捷，支持自动更新）。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;1.1 安装 Astro Composer 插件&lt;a href=&quot;#11-安装-astro-composer-插件&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;先安装 BRAT 插件：Obsidian 内 → 设置 → 第三方插件 → 浏览社区插件 → 搜索「BRAT」→ 安装并启用。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;启用 BRAT 后，打开 BRAT 设置 → 点击「Add a beta plugin」→ 输入 Astro Composer 插件仓库地址（&lt;code&gt;https://github.com/astro-modular/astro-composer&lt;/code&gt;）→ 点击「Add Plugin」，等待安装完成后启用插件。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;1.2 配置 Astro Composer 插件&lt;a href=&quot;#12-配置-astro-composer-插件&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;配置核心目的：让插件知道「Obsidian 笔记存放位置」和「Astro 项目的内容目录位置」，实现笔记自动转换后同步到 Astro 项目中。&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;打开 Obsidian 设置 → 找到「Astro Composer」插件，进入配置页面。
&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://tu.682000.xyz/file/blog/wenzhang/1776517996753_image.png&quot; alt=&quot;&quot; /&gt;&lt;figcaption&gt;image.png&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure&gt;&lt;img src=&quot;https://tu.682000.xyz/file/blog/wenzhang/1776518008379_image.png&quot; alt=&quot;&quot; /&gt;&lt;figcaption&gt;image.png&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure&gt;&lt;img src=&quot;https://tu.682000.xyz/file/blog/wenzhang/1776518031103_image.png&quot; alt=&quot;&quot; /&gt;&lt;figcaption&gt;image.png&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;核心配置项（必设）：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Posts Folder：设置 Obsidian 中用于存放博客文章的文件夹（例如 &lt;code&gt;Blog/Posts&lt;/code&gt;），后续所有要发布的笔记都放在这个文件夹下。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Astro Content Path：设置本地 Astro 项目的&lt;code&gt;src/content&lt;/code&gt; 目录路径（例如 &lt;code&gt;D:/MyBlog/astro-blog/src/content&lt;/code&gt;），插件会自动将转换后的笔记同步到这个目录。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Link Base Path：设置链接基准路径，填写 Astro 博客的文章访问路径（例如 &lt;code&gt;/blog&lt;/code&gt;），插件会自动将 Obsidian 内部链接（ wikilinks 或 Markdown 内部链接）转换为 Astro 友好的链接格式，避免发布后链接失效。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Creation Mode：选择文章存储结构，推荐「Folder-based with index.md」（每个文章对应一个文件夹，内部包含 index.md 文件），适配多数 Astro 博客模板。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Draft Management：启用「Underscore Prefix」，插件会为草稿笔记添加下划线前缀（例如 &lt;code&gt;_my-draft.md&lt;/code&gt;），Astro 会自动隐藏这些草稿，避免误发布。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;可选配置（优化体验）：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Property Standardization：设置笔记属性模板（例如标题、日期、标签等），启用「Standardize Properties」命令，可自动为笔记添加缺失的属性，保持 Astro 文章格式统一。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Rename Post Command：启用后，修改笔记的「title」属性，插件会自动将笔记文件名/文件夹名更新为 kebab-case 格式（例如“我的第一篇博客”→「my-first-blog」），适配 Astro 的路由规则。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;配置完成后，点击「Save Settings」，重启插件（Obsidian 重启或禁用再启用），确保配置生效。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>终于！！！EI会议接收！！！</title><link>https://zuelhhb.top/posts/mrbin/2026-03-17-238/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2026-03-17-238/</guid><description>草，拿下！！！</description><pubDate>Tue, 17 Mar 2026 08:20:43 GMT</pubDate><content:encoded>&lt;figure&gt;&lt;img src=&quot;/assets/mrbin/uploads/post-238-01.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;p&gt;草，拿下！！！&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;</content:encoded></item><item><title>恭喜T1六冠</title><link>https://zuelhhb.top/posts/mrbin/2025-11-09-230/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2025-11-09-230/</guid><description>有一个近乎完美的对手应当是人生的一件幸事，他会让你被动的时刻反思自己，逐渐进步</description><pubDate>Sun, 09 Nov 2025 15:47:01 GMT</pubDate><content:encoded>&lt;p&gt;&lt;strong&gt;有一个近乎完美的对手应当是人生的一件幸事，他会让你被动的时刻反思自己，逐渐进步&lt;/strong&gt;&lt;/p&gt;
&lt;figure&gt;
&lt;figure&gt;&lt;img src=&quot;/assets/mrbin/uploads/post-230-01.jpg&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/figure&gt;</content:encoded></item><item><title>论当代NTR题材的失格</title><link>https://zuelhhb.top/posts/mrbin/2025-07-23-225/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2025-07-23-225/</guid><description>从几个游戏来论述当代NTR题材（有兴趣的可以去玩一下---------除灵猎人:第零羔羊, 那个江湖,贫民窟向导,炼金幻想R~少女的炼金炉~,源初之心等rpg游戏）本质就是出轨，没有NTR的过程，只有嘿嘿嘿和没有性格的女主，以及当代社会下的浪漫主义名存实亡的现实。 首先，我直接称</description><pubDate>Wed, 23 Jul 2025 01:51:02 GMT</pubDate><content:encoded>&lt;div&gt;从几个游戏来论述当代NTR题材（有兴趣的可以去玩一下---------除灵猎人:第零羔羊, 那个江湖,贫民窟向导,炼金幻想R~少女的炼金炉~,源初之心等rpg游戏）本质就是出轨，没有NTR的过程，只有嘿嘿嘿和没有性格的女主，以及当代社会下的浪漫主义名存实亡的现实。&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;首先，我直接称述我的观点，在目前市面上的NTR作品中，大部分作品只是表面的NTR，没有深度去探讨这个领域的思想与内涵，只是单纯为了嘿嘿嘿和色图，往往只是单纯完成了整个游戏内容的开发，却丢失了最为重要的部分，为什么会有NTR的存在或者说，为什么会有女主角&lt;strong&gt;自愿被上&lt;/strong&gt;的内容，核心观点就是在夺得女性肉体上的“爱意”之前，先得到女方的心。&lt;/p&gt;
&lt;p&gt;我们来看这样的一张图（泛式的图）&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.zfsya.moe/wp-content/uploads/2024/12/92e5d925e9bb21661dffbaa7e492fe8f.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https://www.zfsya.moe/wp-content/uploads/2024/12/92e5d925e9bb21661dffbaa7e492fe8f.jpg&quot; alt=&quot;130e7d14-d5b5-4fd6-99b2-b851affe0a05&quot; width=&quot;2037&quot; height=&quot;975&quot; /&gt;&lt;/a&gt;
我们可以清楚的看到，NTR是建立在爱意上的，单纯的嘿嘿嘿并不算是NTR，只是单纯的出轨，而在这里面也诞生出了催眠和直接上床后就离不开这个人的所谓之爱，这些都是作者为了能够进一步压缩整个故事的刻画，节省开发的行为，而正是这些行为直接摧毁了NTR，可以这样说，男女主之间本来就不在存在所谓的爱情，只是女主角被动的因为故事要求，和小处男（短小细）冠以一个男女朋友的头衔，然后出轨高富帅（大黑粗）的故事，这里面既没有纯爱的刻画，也没有两情相悦的感动，更多的就是单纯的头衔关系罢了。&lt;/p&gt;
&lt;p&gt;那么正经的NTR作品应该是什么样的呢？我们可以参看下面这4个步奏，也就是要有这4个部分才能来组成整个NTR的情节。首先，得要正经的刻画，细致的描写纯爱，表现出男女主的两情相悦，具体可以参考哪些废萌作品（回家之前的棉花糖, RIDDLE JOKER，千恋*万花，见习恋人等），在完成这个的基础上再进行下一步，也就是胁迫，这个胁迫内容非常重要，将会直接影响后续的所有行为的合理性。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.zfsya.moe/wp-content/uploads/2024/12/797eeaddcce13a124f038458c8125ac7.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https://www.zfsya.moe/wp-content/uploads/2024/12/797eeaddcce13a124f038458c8125ac7.jpg&quot; alt=&quot;278cb41b-f7f5-4b4e-b551-85cc01975e35&quot; width=&quot;1264&quot; height=&quot;209&quot; /&gt;&lt;/a&gt;
在日常生活中，我们面对胁迫的正确行为是什么呢？答案是报警，对没错，只要你遇到有任何人要挟你，你需要的只是单纯报警说黄毛勒索你万事了，再加上现代社会女性的权力远远大于男性，一篇合理正经的小作文可以轻松让黄毛下半辈子都不得翻身。那么回到游戏，因为游戏内的剧情是架空世界，可以是异世界，可以是现代世界，也可以是基于现代世界的幻想架构，那么这个胁迫就可以变得合理，变得有说服力，比如：黄毛知道女主角是什么邪物转世，或者魅魔，或者单纯用男主的安全做要挟，这些都是非常合理的。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.zfsya.moe/wp-content/uploads/2024/12/8eb1c47b65b86042def08c4422628cd4.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https://www.zfsya.moe/wp-content/uploads/2024/12/8eb1c47b65b86042def08c4422628cd4.jpg&quot; alt=&quot;37df64da-e1bd-45df-bbd1-56b5a1a53770.png&quot; width=&quot;1561&quot; height=&quot;1026&quot; /&gt;&lt;/a&gt;
但是，往往不少作品在这个过程中，忽略了女主角的内心变化，可以这样说，这类作品往往之前没有一点铺垫的话，后续内容就是完全的降智，女主角在对男主有着明确设定的好感和喜欢甚至是男女朋友的关系时，没有任何体现内心纠结和挣扎的过程，没有各种暗示男主，没有那种相视无语的沉默，甚至在重复之前纯爱篇的日常行为，我不禁想问，女主角是木头嘛，还是飞机杯，就单纯除了被上就没有更多的表现了，除了色色环节的各种嘿嘿发言，没有一点自己的思想变化，就是单纯的被操爽了，所以就喜欢上黄毛了，苦主就直接像条狗一样，踢到一边就完事了，这既不符合人设的转变，也不符合一个正常角色的变化，用通俗的话就是，女主角突然就傻了，只认得性器官了，没有一点点情感，那么你怎么说这个是NTR呢？整个作品表现出来的就是女主角本来就不怎么喜欢男主角，突然出现一个自己更喜欢的就马上喜欢上了，然后就出轨了，没有挣扎，放到现实世界里面就是，你喜欢的女生突然之间告诉你，我们分手吧，我被黄毛操爽了，你自己滚一边去吧。我都不敢想象这样的话被爆出来，女方还能正常生活下去嘛，无论是从感性还是理性分析，你都会得出，女生是&lt;strong&gt;TM弱智，这个世界有问题&lt;/strong&gt;。所以在胁迫篇里面，必须要详细的刻画女主角的内心变化，以及内心的纠结，最重要的是把前面纯爱的内容进行毁灭，用来和胁迫篇的内容进行强烈的对比，用来扭曲女主角的观念，从深爱男主角到舍不得男主角，最后到抉择到底要和谁过下一生的过程，也就是说，胁迫篇要深刻的描写女主角的纠结，描写肉体上的欢愉但是精神上是厌恶的，是憎恨黄毛的，是内心的忏悔和痛苦的面对男主对她的好的。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.zfsya.moe/wp-content/uploads/2024/12/efe7a18bf7449fc0389180c1f0867736.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https://www.zfsya.moe/wp-content/uploads/2024/12/efe7a18bf7449fc0389180c1f0867736.jpg&quot; alt=&quot;4331c949-0b10-42db-a35c-efa18316c4a3&quot; width=&quot;2199&quot; height=&quot;818&quot; /&gt;&lt;/a&gt;
所以，我们来看两个样例——恶魔五天榨汁机和除灵猎人:第零羔羊，同样是BBQ的作品，为什么我会说这一部会好过他的除灵猎人:第零羔羊，很简单，至少这一部作品还稍微刻画了女主角的痛苦以及迁怒男主的不作为（你tm什么都不说，男主是tm神仙什么都知道是吧），而除灵猎人:第零羔羊就完全没有，女主角从头到位都是&lt;strong&gt;存粹的傻逼&lt;/strong&gt;，在明确和男主角是对象，自己被胁迫的时候，没有任何的作为，无论是反抗还是象征性的抱怨，都没有，黄毛各种肆意妄为，男主角需要24小时拼命保护女主角，女主角没有一点意识，没有感激男主或者主动配合男主的行为，女主角就像是傻逼一样，只要被胁迫就乖乖被威胁，被上，这个过程中，也没有对男主有什么不舍，也没有什么愧疚，她只是单纯的抱着这样的想法——黄毛好坏，妹妹我好爱的过程，但凡她真正意义上反抗过，这个故事第一幕就完结了，不会有后续，整个故事的发展需要建立在女主角降智的大背景下，才能逻辑自洽，但正是这样的逻辑自洽毁掉了NTR的本质——&lt;strong&gt;摧毁美好的事物给人们看&lt;/strong&gt;。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.zfsya.moe/wp-content/uploads/2024/12/09cb2de5936361777066117a58d9f961.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https://www.zfsya.moe/wp-content/uploads/2024/12/09cb2de5936361777066117a58d9f961.jpg&quot; alt=&quot;97e58cdb-73e7-4081-a61b-bf002b9fea9f&quot; width=&quot;1308&quot; height=&quot;347&quot; /&gt;&lt;/a&gt;
最后，我们来到结尾篇，这一篇章往往有着非常重要的意义，是整个作品真正值得探讨的，及人的精神是否能够被肉体所支配，人所谓的精神自由独立是否从始至终都是一个笑话，再往前延展就是物质基础决定上层社会的逻辑是否也是能够用在人类从古至今一直传颂的“爱”上面，人们一直在各种科幻作品中提到的爱情让人独一无二是否本身就是一个悖论，是经不起推敲的，人们不可避免的要面对乌托邦世界里面的“任务配偶”，这是否是必然发生的，都是值得探讨的。而作品如何表现就是通过女主角的行为，是告知男主角一切后的被男主救赎——&lt;strong&gt;原谅&lt;/strong&gt;，这里的原谅并非是现在广为笑话的“原谅”女方的无底线行为，而是具有救赎意义的理解对方，包容对方，并愿意用余生保护女主脆弱的灵魂（代表作品Fate stay night：Heaven’s Feel），使得女方能够找到一个精神的寄托，真正意义上体现了爱情的伟大，是包容和理解，是无私的奉献，是一生的默默的守候，而不是随口一说的“诺言”。同样，也可以是女主彻底的放弃，彻底的&lt;strong&gt;堕落&lt;/strong&gt;，承认肉体支配精神，精神永远不是自由的，灵魂是局限的，我们不是加缪书中所写的快乐的西西弗，我们只是痛苦束缚的西西弗。这其实也论证了，人生来就是和动物一样，所谓的爱情只是古老的传说，是文艺复兴的额外产物罢了，乌托邦世界的“任务配偶”才是真正的归宿，正因为人是局限的动物，所以只有这样才能保证人类社会的发展，维持文明的延续。（某种意义上，也进一步证明了人和现在的所谓AI——深度学习模型，没有太多的差异，因为本质就是对动物的模拟，人的所谓感情就是纯纯的笑话）&lt;/p&gt;
&lt;p&gt;至此，本文论述了NTR存在的意义，它并不是单纯的色色内容，相反，在这里可以深刻的探讨人的行为，人的灵魂，爱情的定义，以及社会发展是否本身反作用于人本身并摧毁人的灵魂，古往今来，多少外国文学著作谈到的爱情往往是出轨和情妇，这是有一定原因和合理之处的，简单的鄙夷这个东西只是说明了现在人的思想文化不如文艺复兴时的自由浪漫罢了，&lt;strong&gt;浪漫主义已死&lt;/strong&gt;，不仅仅体现在生活中，也体现在文化发展中。&lt;/p&gt;
&lt;/div&gt;</content:encoded></item><item><title>长大之后越来越明白一件事</title><link>https://zuelhhb.top/posts/mrbin/2025-07-01-219/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2025-07-01-219/</guid><description>一千个人心中有一千个哈姆雷特，我怎么想的不重要，你觉得我怎么想的也不重要，我不告诉你我到底怎么想的，很重要。</description><pubDate>Tue, 01 Jul 2025 05:35:40 GMT</pubDate><content:encoded>&lt;p&gt;一千个人心中有一千个哈姆雷特，我怎么想的不重要，你觉得我怎么想的也不重要，我不告诉你我到底怎么想的，很重要。&lt;/p&gt;</content:encoded></item><item><title>论为什么关注度很高的高考作文其实是很无聊的一个东西</title><link>https://zuelhhb.top/posts/mrbin/2025-06-11-214/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2025-06-11-214/</guid><description>喜欢创作的朋友们应该都明白，写作最重要的无非就是两个因素，一个是叙事逻辑，一个就是情感加持。 然而现在高考作文喜欢什么文体？是议论文，传统记叙文几乎快要灭绝了。 出题者喜欢让考生读一些抽象的素材，指引学生往宏大叙事上靠。 与此同时，文章一味强调结构，修辞，技巧。这种文章还要让考生</description><pubDate>Wed, 11 Jun 2025 02:44:40 GMT</pubDate><content:encoded>&lt;p&gt;喜欢创作的朋友们应该都明白，写作最重要的无非就是两个因素，一个是叙事逻辑，一个就是情感加持。
然而现在高考作文喜欢什么文体？是议论文，传统记叙文几乎快要灭绝了。
出题者喜欢让考生读一些抽象的素材，指引学生往宏大叙事上靠。
与此同时，文章一味强调结构，修辞，技巧。这种文章还要让考生写出感情，这无异于在马桶上雕花。
这样写出来的文章，没有任何感情与灵魂，只有假大空，反手就扔进了垃圾桶。
所以你能看到，网络上有很多连话都说不明白的人，简单一件小事能说个七七八八，毫无逻辑可言。
抖音上也总有人喜欢发些高深的抒情文案，仔细一品，不过也是把一堆乱七八糟的网络流行假文艺语句缝合成一个四不像。
意义不明的意象，物象，一堆八竿子打不着的东西被缝在一起，不是用力过猛就是记流水账，让人看了只觉得空洞混乱。
擅长写高考作文的，其实不是作家，而是在办公室里面给领导写材料的那帮人，他们可太会公式化创作了。
应用类文章，不需要积累，只需要套模板即可。
而且语文教育的阅读理解分数占比很大，学生却很少有机会去读完一本课外名著，导致学生的写作与阅读能力更弱了。
写作需要知识积累与生活阅历。而十七八的学生，几乎都没有。
我不清楚为什么这么多人喜欢痴迷于每年讨论高考作文，或许这可能是被他们神圣化的高考里，唯一一件能插上几句嘴的东西。毕竟文无第一嘛，公说公有理，婆说婆有理。
我甚至能想象出他们眼里公认的高分作文：
&lt;strong&gt;以吹嘘宏大之物为基本点，举出各种名人案例加以佐证，辅以华丽少见的修辞，加上不知道从哪个短视频偷来的少见的古文名句与西洋哲学黑话。把文章的语言搞得讳莫如深，云里雾里，最后加上令人亢奋的结尾。&lt;/strong&gt;
恭喜你，这就是一篇50+作文。
真的想发表一个暴论：做一个晚自习语文题甚至不如花一晚上读一本名著有用。
只是做试卷上那些琐碎的公式化阅读题，反而会降低你对文字感知能力。也导致很多人极其讨厌语文课，上课不是讲话就是睡觉，反正语文嘛，再怎么也不会考太低。
身边统计学显示，那些爱看闲书的小说痴子，语文成绩都还挺好。
语文本来是一门略带艺术性的学科，而如今却如此肤浅与冰冷。尤其是写作，本该是最能抒发思想与情感的方式，但如今考生们只能戴着镣铐跳舞，被逼着写一篇连自己都觉得虚假的现代八股文。
所以每年的六月，看到那些各路人马，热衷于讨论那些歌颂宏大的高考作文题目多么多么难的时候，我都会感觉到厌恶。
一群没读过几本书，连字都扣不明白的人，这时却热衷于讨论该如何写一篇看似深奥的文章。
或许他们不是想展示他们多有文采，而是只想表达他们有多么会做题。&lt;/p&gt;</content:encoded></item><item><title>关于＂性压抑＂</title><link>https://zuelhhb.top/posts/mrbin/2025-04-23-211/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2025-04-23-211/</guid><description>什么是性压抑不确定，但什么不是性压抑，齐泽克举过一个很有想象力的例子，《面具与真相》第三章《烽火赤焰万里情》的例子，那里的描述和性压抑截然相反，如果我们把性压抑定义为干某件事情时心里还想着性（比如那个经典梗，男的给女的讲哲就是想上她），那么齐泽克对《烽火赤焰万里情》的解读是截然相</description><pubDate>Wed, 23 Apr 2025 03:11:18 GMT</pubDate><content:encoded>&lt;p&gt;什么是性压抑不确定，但什么不是性压抑，齐泽克举过一个很有想象力的例子，《面具与真相》第三章《烽火赤焰万里情》的例子，那里的描述和性压抑截然相反，如果我们把性压抑定义为干某件事情时心里还想着性（比如那个经典梗，男的给女的讲哲就是想上她），那么齐泽克对《烽火赤焰万里情》的解读是截然相反。&lt;/p&gt;
&lt;p&gt;在拉康—齐泽克的视野中，“性压抑”并非我们日常所说的“心里老想着性就叫压抑”，而是指那股超越快感原则本身、又带来痛苦与过量的“享乐”（jouissance）被象征秩序所冻结、转向与否定的过程。早在婴儿对母亲的原初依恋中，就注入了象征的大他者：语言、法律、社会规范如同无形的“否定”，告诉我们某些冲动不可触碰、某些快感必须被埋藏。正是因为这种否定的力量，真正的性欲望才不断在潜意识里蠢动，透过梦境、口误或症状反复现身——压抑不是欲望的消散，而是它在层层表象之下的隐秘滋长。&lt;/p&gt;
&lt;p&gt;在《面具与真相》第三章中，齐泽克选取《烽火赤焰万里情》这一革命爱情故事，为我们呈现了一个与性压抑截然相反的场景。战火硝烟里，两位革命战士在被集体使命与生存危机包围之时，所有的纪律约束和社会耻感被瞬间悬置：他们不在暗室里低声细语，也不在宾馆里挑灯夜战，而是在炮声稍歇的前沿阵地，把血与汗、尘土与欲望混为一体，毫无遮掩地投入一次狂野的联合狂欢。这一刻，他们并不将性视为需要掩藏或提升为“更高”文化活动的冲动，更无需借助“工作”“艺术”“爱国主义”等外衣来转化那股暴烈的能量。&lt;/p&gt;
&lt;p&gt;正因为没有象征法则的介入与否定机制的运行，这场当下的性爱才成为了纯粹的、过量的 jouissance。齐泽克提醒我们，平日里那些被冠以“健康”“文明”的性爱，其实都是经过重重筛选、被迫戴上了理智与规范的面具；而在烽火中被剥离的那种无需羞耻与掩饰的快感，才是真正打破压抑、直抵欲望核心的现象。这并非“越野生越好”，而是让我们看清了压抑的本质：它并非单纯的“否定欲望”，而是欲望在否定之下日益强烈的反抗。&lt;/p&gt;
&lt;p&gt;此外，这种“非压抑”状态本身也带有强烈的意识形态色彩——革命理想在此时化作保护伞，使两人的自我羞耻与社会耻感彻底失效，性与政治激情融为一体。与那些通过“科教”“加强体质”“爱情至上”等借口把性能量压平再利用的现代话语相对，这场性爱反而将性与更高的集体目标并置，展现出一种“积极的享乐主义”，让我们看到：性压抑与性释放并不是简单的黑白对立，释放本身也可能是另一种强制，一旦置于某种共同体的需求之中，它就会被赋予新的意义和功能。&lt;/p&gt;
&lt;p&gt;从齐泽克对《烽火赤焰万里情》的解读可见，真正的压抑恰恰在于那种“不能说”“不能做”之下的长期隐忍与掩藏——越是刻意隐藏，越在裂缝中积聚能量；而当象征秩序的“否定”被暂停，欲望就以最原始的姿态爆发，带来既痛苦又狂喜的极端体验。理解这一点，才能避免把“做某件事时顺便性幻想”当作压抑，更能看清各种文化与政治话语如何借用、转向或强化性欲望背后的那股“危险的真实”。&lt;/p&gt;</content:encoded></item><item><title>浮生梦</title><link>https://zuelhhb.top/posts/mrbin/2025-03-08-208/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2025-03-08-208/</guid><description>蝴蝶隔着玻璃振翅 每一粒齿轮都在咬住 溺亡的黎明 有人用银匙舀起我颅骨里 褪色的萤火 鸢尾倒悬成第七阶 正在腐烂的紫色泪水 潮水褪下盐粒时露出 正在结痂的伤口 所有倒影都陷进深蓝的溃疡 锈蚀的锚长出珊瑚的骨刺 候鸟喉咙里卡着 永不融化的冰层 当褪色的星群溶化成 最后一粒止痛片 候</description><pubDate>Sat, 08 Mar 2025 07:22:55 GMT</pubDate><content:encoded>&lt;p&gt;蝴蝶隔着玻璃振翅
每一粒齿轮都在咬住
溺亡的黎明
有人用银匙舀起我颅骨里
褪色的萤火&lt;/p&gt;
&lt;p&gt;鸢尾倒悬成第七阶
正在腐烂的紫色泪水
潮水褪下盐粒时露出
正在结痂的伤口
所有倒影都陷进深蓝的溃疡
锈蚀的锚长出珊瑚的骨刺&lt;/p&gt;
&lt;p&gt;候鸟喉咙里卡着
永不融化的冰层
当褪色的星群溶化成
最后一粒止痛片
候车长椅正被风蚀成
蜷缩的灰烬&lt;/p&gt;
&lt;p&gt;月光漂白指纹的沟壑
我们的名字正在被蚀空
有人在逆流的时针背面
缝补着褪色的胎记
有人用冻僵的手指
弹奏铁锈的喉咙&lt;/p&gt;
&lt;p&gt;直到所有隐喻都渗出盐晶
直到蝴蝶翅膀的震颤
让所有碑文都开始风化
结痂、结痂、结痂&lt;/p&gt;</content:encoded></item><item><title>因此，我们离开</title><link>https://zuelhhb.top/posts/mrbin/2025-02-26-206/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2025-02-26-206/</guid><description>候鸟的舌尖最先尝到迁徙的苦味 我们在黄昏时清算行李 把长满苔藓的誓言 和未拆封的地址 一同锁进铁盒 潮水褪去时 沙滩上尽是盐粒结晶的骸骨 有人弯腰捡拾贝壳的空腔 却听见 多年前的对话仍以漩涡的形态 在耳道深处轰鸣 我们曾共用同一具影子 在正午的柏油路上融化彼此 直到暮色像玻璃刀片</description><pubDate>Wed, 26 Feb 2025 06:49:13 GMT</pubDate><content:encoded>&lt;p&gt;候鸟的舌尖最先尝到迁徙的苦味
我们在黄昏时清算行李
把长满苔藓的誓言
和未拆封的地址
一同锁进铁盒&lt;/p&gt;
&lt;p&gt;潮水褪去时
沙滩上尽是盐粒结晶的骸骨
有人弯腰捡拾贝壳的空腔
却听见
多年前的对话仍以漩涡的形态
在耳道深处轰鸣&lt;/p&gt;
&lt;p&gt;我们曾共用同一具影子
在正午的柏油路上融化彼此
直到暮色像玻璃刀片
划开所有重叠的边界
直到月光开始征收
每个孤独的直角&lt;/p&gt;
&lt;p&gt;而候鸟早已飞离字典的封面
它们的翅膀切开季风
切开那些淤积在喉咙里的地名
此刻我们终于学会
如何用沉默丈量距离
用缺席确认存在&lt;/p&gt;
&lt;p&gt;因此，我们离开
成为彼此地图上
永远向北方倾斜的虚线
成为潮水退却后
盐粒在月光下闪烁的
永恒瞬息&lt;/p&gt;</content:encoded></item><item><title>谈谈炒作带来神奇的权威性，与权相同威力的神药</title><link>https://zuelhhb.top/posts/mrbin/2024-12-17-196/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-12-17-196/</guid><description>下面分析炒作的真实目的以及大家为什么讨厌炒作狗 由不知道也根本不重要的某个人正式开启网络大炒作时代之后，网络上的很多人便深受炒作所带来的严重信息骚扰。他们不在乎炒作的对象也不在乎炒作的内容，却不得不面对海量的炒作信息，这些信息有时甚至会越过网络的边界向现实延伸，侵扰大家的现实生活</description><pubDate>Tue, 17 Dec 2024 13:03:32 GMT</pubDate><content:encoded>&lt;p&gt;下面分析炒作的真实目的以及大家为什么讨厌炒作狗
由不知道也根本不重要的某个人正式开启网络大炒作时代之后，网络上的很多人便深受炒作所带来的严重信息骚扰。他们不在乎炒作的对象也不在乎炒作的内容，却不得不面对海量的炒作信息，这些信息有时甚至会越过网络的边界向现实延伸，侵扰大家的现实生活。
那么究竟是什么让这些人或某种事物如此热衷于炒作，让网上铺天盖地充斥着有关他们的事情呢？答案是这些炒作的人都或多或少的意识到热度=权威性，也可以简单理解为名声。
权威性的作用有很多，其中最重要的就是获得不同人的不同程度信任与好感。
就像我没有权威性所以你不会点进我的贴子看我长篇大论，就像我没有权威性所以你会觉得我所谈论的东西都是瞎扯淡，是没有意义的废话，空话。
反之如果我拥有权威性的话，重要的是在你心中有权威性，那不管我说什么你都要听一听，看一看，我的存在时刻吸引着你的目光，明星效应就是这种现象最好的表达。
例子也根本不需要刻意去找，看看吧里或其他地方那些有权威性的人，随便说两句话或分享下日常都能获得一大堆回复，而没有权威性的吧友们说话则大多无人理睬，长篇大论也只有寥寥几个回复。
这时有些人便会意识到并试图去获取权威性，这也就是炒作，也就是吸引大众目光，也就是为了获得关注而做出的种种行为。
去发些大家喜欢的东西，去喷些大家厌恶的东西，去盘点些大家喜欢看的东西。核心要点在于要碰到大众喜好这个关键物品，最终结果是愉悦大众还是惹恼大众就取决于碰得准不准。
获得关注是炒作所结出的硕果之一，这就是为什么马斯克要拿下蓝鸟并在上面没日没夜的到处互动，他之所以深谙炒作的重要意义就是因为他极大的享受到了炒作带来的好处，也是为什么他在发现人们对他逐渐失去兴趣后会立即尝试更换炒作方法以及更积极的去互动炒作。
马斯克是典型到不能再典型的炒作狗例子了，但我还是想以另一位跟他同样在蓝鸟上积极甚至狂热频率发言的人做例子。&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;这个人就是小岛秀夫，我并非是在喷小岛秀夫也是条炒作狗，而是以他为例子更有意义，因为马斯克很聪明的从不在网上提起炒作给他带来的好处，而小岛秀夫提到过。
事情是这样，小岛秀夫离开科乐美后成立自己的工作室做游戏，之后他遇到了资金问题，对资金问题的解决办法是找银行借钱，但所有银行给出的答复都是拒绝，除了一家银行，这家银行的管理人称自己是小岛秀夫的狂热粉丝，于是小岛秀夫得到了银行借钱。
小岛秀夫说过那些银行用来拒绝他的话，虽然小岛先生很有名气，但作为个人却没有实绩。意思是银行们知道小岛秀夫有权威性，也知道这权威性来自制作游戏方面，但他们不了解游戏，银行们关心的是作为企业家的权威性，而小岛秀夫在开办企业这方面没有名声，所以银行们不觉得小岛秀夫制作游戏能成功于是开办企业也能成功，所以他们拒绝借钱。
那为什么这种有理可循的判断到了狂热粉丝所在的那家银行就变了呢？狂热粉丝的判断也理应跟其他的银行相同，然后做出跟其他银行一样的答复。
答案是小岛秀夫的权威性在他心中真正存在并且是高权威性，这种高权威性使得作为银行管理人的狂热粉丝相信小岛秀夫有可能开办好企业，于是同意借钱。
之后小岛秀夫想租个好办公楼的时候也同样是在狂热粉丝的帮助下得以租到。
小岛秀夫这位知名游戏制作人能获得如此大的帮助当然离不开他在游戏制作方面的成就，可如果没有炒作的话，别人又怎么知道他的成就又或者说知道他这个人呢？
新闻的曝光，在游戏社交媒体上频频出现，与各类人士的接触，这些都是小岛秀夫自己主动参与的，说明他也或多或少的意识到炒作能给他带来好处，于是便乐此不疲。
小岛秀夫的原话我正是借助着人与人之间的连接才能开发出自己的游戏。&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;下面再举一例，也是典型到不能再典型的例子，不过并不是一个人而是一款游戏。
赛博朋克2077，这款游戏在发售前疯狂炒作，各种活动，游戏新闻媒体头条，网上博主发视频大吹特吹，目的当然显而易见 ，是为了增加销量。这里谈到2077也是为了解释权威性究竟有多大威力。
权威性就如同词汇里的褒义词，是绝对正向情感的，虽然炒作有红黑炒作之分，但这里只谈红的那一部分。
2077的一切炒作最终所导向的结果都是让全球玩家觉得它是一款好玩的顶级游戏，进而预购它，那么它是怎么做的？因为不想废话太多所以直接给结果，2077尽自己一切可能来营造出一种极端的氛围，即发展到今天被称作造神的氛围，完美二字在这个氛围中体现得淋漓尽致，它，2077这个游戏在这种氛围中被塑造成没有任何缺点的完美游戏，重点是在这种氛围中没有一句不好的声音，怎么做到的？2077的制作公司在宣发的过程中不断向外界抛出这款游戏的优点，正如其他的炒作狗不断向外界抛出自身的优点，闪光点。
而这个过程中观众们连看到游戏缺点的可能都没有，因为这个过程被专门细致打磨抛光，无瑕的光彩在其上闪耀，这也正是所有成功的炒作狗都在干的事。
提到赛博朋克2077的意义此时显现，它的炒作成功了，在没有任何实机演示的情况下2077真的做到让大部分人以为它是一款好游戏，我们再来提一下好游戏的概念，一般来说，好游戏是玩过之后得出的结论，然而2077却在人们玩到它之前，甚至是见都没见过它的情况下得出它是好游戏的结论，就如同LPL全球总决赛决赛还没开打，某队获胜的新闻就已经出现在媒体上，就如同DOTA2TI决赛还没开打，就已经有人说出一觉星来又是个冠军这样的话然后等着庆祝，就如同某个奖还没颁给某个游戏，那游戏就已经提起开好香槟准备发表获奖感言。&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;这样反应不就是高权威性在人们心中植入并让他们相信这种权威性所述说的任何话语吗？
重点不在于是否真的能做到而是让别人以为你能做到。
炒作是获得权威性的一个便捷途径，而权威性是带来信任与好感的便捷途径。因为各种理由诸如没有时间没有精力甚至是没有渠道之类的去细致了解一个人或某种事物，人们便不得不通过其身上的权威性来让自己信服与否，这样的思维逻辑也让一些人意识到，只要让自己获得权威性便可以轻易博取大部分人的好感与信任。
这可不是什么现代才出现的玩意，巧立名目，古代的人们也意识到如果自己没有权威性的话就要通过各种方式来炒作自己赢取名声，进而得到自己想要的东西。
关于炒作的真实目的简单概括到这，下面来说为什么大家会讨厌炒作狗。&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;先提出疑问，如果不炒作的话权威性一般从何而来？
以长辈为例子，孩子在出生后成长到少年期之前，在父母正常养育的情况下，孩子会无条件相信父母，认同父母述说的理念，这个阶段父母是具有权威性的。到了接受教育的阶段，青少年又会相信教育系统教给他的舍会知识，这个阶段教育系统是具有权威性的。
那长大了呢？长大的人一般是以自己一直以来接受到的知识里所定义出的能让他们认同，尊重的人具有权威感。所以炒作狗们通常会有个正向人设。
但问题是有些人对于具有权威性的人有自己独特的定义，所以那些试图炒作出自己权威性的炒作狗在他们眼里就像耍气球的小丑在说自己明天要用气球上太空去殖民卫星。
厌恶炒作狗的虚伪正向人设，厌恶虚伪正向行为，理由有很多，关键在于人们看到了炒作的背后真实本质和真实目的。归根结底是在抵抗这种权威性，不愿意因为炒作狗的热度，炒作狗所炒作的东西就去信任和对炒作狗卝产生好感，甚至最后产生出厌恶。&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;感觉说得已经差不多了，感谢你能够看到这里，可以的话请带着论点直接指出我的不足。还有想再调侃一下以前一直看的一个游戏媒体博主，2077炒作的时候跟着一起疯狂炒作欢呼喝彩精神趋势，结果游戏发售塌房瞬间切割狂喷，让我不得不感慨不愧是做媒体的。&lt;/p&gt;</content:encoded></item><item><title>饿殍：明末千里行</title><link>https://zuelhhb.top/posts/mrbin/2024-12-14-190/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-12-14-190/</guid><description>这款游戏很早就入库了，但一直没有时间去玩，最近终于找到时间通了。依然是熟悉的味道，和我之前玩《葬花·暗黑桃花源》时候的感觉差不多，但是在许多地方都有了很大的改进，整体看来让我感觉欣喜，甚至有一些惊喜的地方。 首先我表明态度：《饿殍：明末千里行》是一款十分优秀的游戏，它在前作《葬花</description><pubDate>Sat, 14 Dec 2024 12:48:05 GMT</pubDate><content:encoded>&lt;p&gt;这款游戏很早就入库了，但一直没有时间去玩，最近终于找到时间通了。依然是熟悉的味道，和我之前玩《葬花·暗黑桃花源》时候的感觉差不多，但是在许多地方都有了很大的改进，整体看来让我感觉欣喜，甚至有一些惊喜的地方。&lt;/p&gt;
&lt;p&gt;首先我表明态度：《饿殍：明末千里行》是一款十分优秀的游戏，它在前作《葬花·暗黑桃花源》的基础上，对短板进行了许多改进，让这部游戏成为了今年我个人认为在制作层面十分“正确”的游戏，我认为游戏的制作风格上已经找到了正确的路子，坚持走下去必然会取得更大的成功。&lt;/p&gt;
&lt;img title=&quot;photo_2024-11-28_00-16-06 (2).jpg&quot; src=&quot;https://img.plumz.me/2024/11/1034884586.jpg&quot; alt=&quot;photo_2024-11-28_00-16-06 (2).jpg&quot; /&gt;
&lt;p&gt;在说这个游戏“正确”的地方之前，不妨来想想目前的所谓“Galgame”市场存在的问题。许多人说 Galgame 已经是夕阳产业了，日本那边算是半死不活了，在手游和轻小说的夹击之下，销量惨淡。而我国也有许多人想要创造自己理想的 Galgame，近年来看到“国Gal”内容也越来越多，但总归是难以掀起什么波澜，甚至至今为止都有许多人对这种“点点鼠标看故事”的游戏嗤之以鼻，不知道乐趣在哪里。&lt;/p&gt;
&lt;p&gt;我玩过的 Gal 也不少，曾经最疯狂的时候一年玩 50 多部，每个月有新作就赶紧去尝试，这种热情持续了有好几年，到了现在开始逐步消退，倒不是说我没时间了，也不是说没热情尝试 Galgame 这种游戏的。更多的问题是我发现这些游戏大多数都“大同小异”且“毫无进步”。&lt;/p&gt;
&lt;p&gt;我来说说这类游戏最大的问题：&lt;/p&gt;
&lt;p&gt;1，叙事又臭又长
一部全价格的 Galgame 的剧情往往有 20-40 小时，而主线故事大概也就 1 个小时就能说清楚，其他的时间全都是所谓的“日常”，你要说日常写的有趣还好，但大多数日常并不有趣，很多都是在玩那些不知道多少年都用烂的俗梗。而且很多所谓“神作”的日常内容不仅不有趣，反而很催眠。许多被“神作”名头吸引来的新玩家都会被这无聊的注水故事所劝退，但总会有“老玩家”充满优越感的告诉你：“这脚本就这样”，“坚持一下，到XXX线就好看了”。在我看来这更像是一种 PUA，既然到了 XXX 线就好看了，那你前面写那么多垃圾给我看干嘛？这种“注水日常”的结构脚本写着痛苦，玩家看着难受，为什么不能进行精简和优化？&lt;/p&gt;
&lt;p&gt;2，可玩性极差
我要说一点，早些年的 Galgame 的系统其实没有现在这么简单，大多数都会装模做样的设计一个“可玩性”的内容，比如即将倒闭的 Alcot，出道作 Clover Hearts 还有收集成就系统。现在的 Galgame 反而越来越素，有的从头走到尾只有一个选项，有的甚至一本道，选项都懒得给你了。从头鼠标点到尾，甚至 Backlog 都不给你做，我觉得这不仅仅算不上是一个“游戏”，甚至作为一个“可视化有声读物”来看都是不合格的。我坚持认为 Galgame 虽然是以看故事为主，但仍然需要增加一点“互动性”，应该给玩家“探索故事篇章”、“解密”、“与角色互动”之类的操作感，这样才会吸引更多人玩下去并找到乐趣。&lt;/p&gt;
&lt;p&gt;3，千篇一律的剧情框架
这个其实玩 Galgame 多的人都能明白，大部分 Gal 都离不开“学生会”和“校园”，那永远无法摆脱的“学院祭”，还有那明明一节课堂没描写过，也非要写出来的教室剧情，就连日本人自己都觉得假的不行。更抽象的是国产 Gal 还非要去模仿，这种“全盘照搬”的感觉更像是当今说唱歌曲无脑学习老黑的匪帮一样，人人都 Gang gang，结果玩具枪都没摸过。脱离校园框架的 Galgame 也有，但最终也都无法逃离那擦边的老一套，Galgame 和 Erogame 之间或许有重叠，但并不是同一种东西，目前“Galgame”这个字眼已经基本跟“色情”这个词汇捆绑在一起了，你说你玩 Galgame，十有八九对方会一副恍然大悟的样子“噢噢噢噢，Galgame吗，就是类似艹猫的那个呗。”&lt;/p&gt;
&lt;p&gt;接下来看看《饿殍：明末千里行》是怎么做的。&lt;/p&gt;
&lt;p&gt;首先，游戏篇幅很精简，很多人说这是缺点，篇幅太短，但在我看来这是最大的优点。一个新玩家基本上半小时就可以切入主线，搞清楚“我是谁”，“我在哪儿”，“我要干啥”，不会给你莫名其妙的又臭又长的所谓“共通线”，更不会让你坐牢一样的看 10 小时不知所云的文字，才会插入一个所谓的 OP 开启正片剧情。这十分有助于玩家快速投入游戏，很快获得剧情上的反馈。&lt;/p&gt;
&lt;img title=&quot;photo_2024-11-28_00-16-05 (2).jpg&quot; src=&quot;https://img.plumz.me/2024/11/2109116759.jpg&quot; alt=&quot;photo_2024-11-28_00-16-05 (2).jpg&quot; /&gt;
&lt;p&gt;其次，游戏有一定的“可玩性”，这一点主要来自游戏里增加的许多 Bad End，在剧情进展过程中出现的一些选项会迫使玩家做出抉择，抉择的失败直接导致剧情的悲剧结束。这些“坏结局”基本和主线没什么关系，但却不仅给游戏增加了一些紧张感，更多的还是“娱乐性”，选对了剧情继续，选错了也有完善的 Flowchart 可以让你快速定位回来。游戏的多结局搭配 Flowchart 可以快速让玩家多周目解锁，而许多锁定的剧情也暗示了条件，让玩家在不断的尝试中有了“探索”的体验。&lt;/p&gt;
&lt;p&gt;虽然这点“游戏性”比起常规的游戏来说只是杯水车薪，但它的确有，而且对于“文字冒险”类来说已经十分充足，也达成了锦上添花的效果。&lt;/p&gt;
&lt;p&gt;最后就是游戏的剧情定位：明末时期，十分接地气的中国本土主题，没有任何日系的元素在里面，更没有什么“二次元味道”的用词和文本。游戏的故事谈不上有什么深度和反转，但是很直接和清晰，用“人吃人”之类的手段来加深对历史残忍的描绘，里面也有一些熟悉的元素，闯王啊之类的，也带了一些或许可以影射现实的讽刺，我觉得这样就足够了。&lt;/p&gt;
&lt;img title=&quot;photo_2024-11-28_00-16-06.jpg&quot; src=&quot;https://img.plumz.me/2024/11/387899417.jpg&quot; alt=&quot;photo_2024-11-28_00-16-06.jpg&quot; /&gt;
&lt;p&gt;总体看来《饿殍：明末千里行》在之前《葬花·暗黑桃花源》的基础上进行了许多改进，用了更为直接甚至贴近历史有一定人文元素的剧情，更为完善的 Flowchart，更清晰的剧情脉络，更好的画面，当然也保留了那些充满地雷的选项来提升游戏性，这一切都让本作变得十分“简单易上手”，可以说《饿殍：明末千里行》极大程度降低了所谓“Galgame”的门槛，哪怕是没有接触过传统日系 Galgame 的玩家，也可以很容易的尝试并享受其中。&lt;/p&gt;
&lt;p&gt;于是我就看到了十分让人忍俊不禁的情况，这个游戏在许多 Galgame 论坛里被类比”原神“。&lt;/p&gt;
&lt;p&gt;我是能理解这群人的想法的，他们依仗着”Galgame“这个小众的品类，以及语言的壁垒和游戏极高的门槛，而产生了独有的优越感。他们一边感慨着业界要完，一边也不在乎 Galgame 是否应该吸引更多人来玩，只是希望维持着自己“众人皆醉我独醒”一般获取信息差一样的优越感。&lt;/p&gt;
&lt;p&gt;所以当《饿殍：明末千里行》这种上手门槛低的作品出现之后，带来了更多的新玩家和讨论度，这些充满优越感的“老家伙”们自然也就坐不住了，开始极尽嘲讽之事，以求维持自己高冷品味的独特。他们喜欢的还是那种系统简陋，剧情充满中二的“哲学类”词汇拼凑，最好是永远不会被汉化的那些“宝藏冷门神作”，不然怎么体现他们尘缘已断金海尽干呢？殊不知所谓 Galgame 的作品早已过了黄金时代，现在的新作剧情说句不好听的没准还真不如原神 3.0 以后呢。&lt;/p&gt;
&lt;p&gt;其实我更欣赏的还是《饿殍：明末千里行》和《葬花·暗黑桃花源》的制作人，我记得多年前他在微博某二次元相亲号上整了个活，也在知乎吐槽过现在的漫展搞起来很抽象，实际上他算是一个十分资深的二次元了，游戏一直坚持找 hanser 配音其实也是他个人的追星行为，我想他应该完全明白那些所谓的“老二次元”理想中的 Galgame 样子。但即使如此，他也在制作游戏的时候保持了极大的克制和清晰的头脑，他十分清楚应该制作怎么样的游戏才能称之为“真正的国产文字冒险作品”。没有做出什么“披着中文皮的日本游戏”，也没有无脑的模仿和拷贝日式 Galgame 的框架。而是选择扎根本土，根据受众和用户群体进行调整产品，做出了门槛更低，更适合大部分玩家的“文字冒险游戏”，也让这个类型的作品出圈，吸引了更多人的关注，实在是难得。&lt;/p&gt;
&lt;p&gt;我十分期待他的下一部，也希望他能获得更大的成功。&lt;/p&gt;</content:encoded></item><item><title>尼玛的终于修好网站了！！！！！！！</title><link>https://zuelhhb.top/posts/mrbin/2024-12-14-183/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-12-14-183/</guid><description>尼玛的自己动手搞了半天，，差点想放弃了 尼玛的还好阿里云帮我备份了云盘，不然真的就say goodbye了~ 结果发现只需要从宝塔面板更新下SSL证书就好了 雷姆QAQ</description><pubDate>Sat, 14 Dec 2024 12:17:28 GMT</pubDate><content:encoded>&lt;p&gt;尼玛的自己动手搞了半天，，差点想放弃了&lt;/p&gt;
&lt;p&gt;尼玛的还好阿里云帮我备份了云盘，不然真的就say goodbye了~&lt;/p&gt;
&lt;p&gt;结果发现只需要从宝塔面板更新下SSL证书就好了&lt;/p&gt;
&lt;p&gt;雷姆QAQ&lt;/p&gt;</content:encoded></item><item><title>Simple Guides for Mizuki</title><link>https://zuelhhb.top/posts/guide/</link><guid isPermaLink="true">https://zuelhhb.top/posts/guide/</guid><description>How to use this blog template.</description><pubDate>Mon, 01 Apr 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;This blog template is built with &lt;a href=&quot;https://astro.build/&quot; target=&quot;_blank&quot;&gt;Astro&lt;/a&gt;. For the things that are not mentioned in this guide, you may find the answers in the &lt;a href=&quot;https://docs.astro.build/&quot; target=&quot;_blank&quot;&gt;Astro Docs&lt;/a&gt;.&lt;/p&gt;
&lt;section&gt;&lt;h2&gt;Front-matter of Posts&lt;a href=&quot;#front-matter-of-posts&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;My First Blog Post&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;published&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2023-09-09&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;description&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;This is the first post of my new Astro blog.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;./cover.webp&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;tags&lt;/span&gt;&lt;span&gt;: [&lt;/span&gt;&lt;span&gt;Foo&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;Bar&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;category&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;Front-end&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;draft&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;false&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;
























































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Attribute&lt;/th&gt;&lt;th&gt;Description&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;title&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The title of the post.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;published&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The date the post was published.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;pinned&lt;/code&gt;&lt;/td&gt;&lt;td&gt;Whether this post is pinned to the top of the post list.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;priority&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The priority of the pinned post. Smaller value means higher priority (0, 1, 2…).&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;description&lt;/code&gt;&lt;/td&gt;&lt;td&gt;A short description of the post. Displayed on index page.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;image&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The cover image path of the post.&lt;br /&gt;1. Start with &lt;code&gt;http://&lt;/code&gt; or &lt;code&gt;https://&lt;/code&gt;: Use web image&lt;br /&gt;2. Start with &lt;code&gt;/&lt;/code&gt;: For image in &lt;code&gt;public&lt;/code&gt; dir&lt;br /&gt;3. With none of the prefixes: Relative to the markdown file&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;tags&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The tags of the post.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;category&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The category of the post.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;licenseName&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The license name for the post content.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;author&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The author of the post.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;sourceLink&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The source link or reference for the post content.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;draft&lt;/code&gt;&lt;/td&gt;&lt;td&gt;If this post is still a draft, which won’t be displayed.&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;Where to Place the Post Files&lt;a href=&quot;#where-to-place-the-post-files&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Your post files should be placed in &lt;code&gt;src/content/posts/&lt;/code&gt; directory. You can also create sub-directories to better organize your posts and assets.&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;src/content/posts/&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── post-1.md&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;└── post-2/&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;├── cover.webp&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;└── index.md&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;</content:encoded></item><item><title>コイバナ恋愛：可攻略与否并不是最重要的问题</title><link>https://zuelhhb.top/posts/mrbin/2024-03-03-146/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-03-03-146/</guid><description>当我听说 Asa Project 的新游戏《コイバナ恋愛》被冠上“地雷”标签的时候，我直接就惊了。 虽然我认为它们的游戏和之前的各种颜艺话题作相比的确是走了下坡路，但怎么想都应该和“地雷”沾不上边吧？ Asa Project 可是一直在做各种“政治不正确”的游戏类型，突出一个“胡</description><pubDate>Sat, 02 Mar 2024 16:16:36 GMT</pubDate><content:encoded>&lt;p&gt;当我听说 Asa Project 的新游戏《コイバナ恋愛》被冠上“地雷”标签的时候，我直接就惊了。&lt;/p&gt;
&lt;p&gt;虽然我认为它们的游戏和之前的各种颜艺话题作相比的确是走了下坡路，但怎么想都应该和“地雷”沾不上边吧？&lt;/p&gt;
&lt;p&gt;Asa Project 可是一直在做各种“政治不正确”的游戏类型，突出一个“胡搞瞎搞”，游戏中不但可以给男孩子强行性转成女孩子，各种搞基结局也是信手拈来，我觉得这个品牌的受众群体本身就是乐子人为主，都对 Asa Project 游戏有一定预期，也有一定的心理承受能力，怎么可能会被它们整的活所破防，然后贴上“地雷”标签呢？&lt;/p&gt;
&lt;p&gt;而且在我印象中，2023 年 Asa Project 的新作《コイバナ恋愛》更像是那种“青春群像剧”的设定，说白了就是一种“男生女生对对碰”之类的剧情，标题也说明了一切，コイバナ指的就是“和恋爱有关的话题”，コイバナ恋愛就有种“恋爱脑大集合”的感觉。你就告诉我这样的剧情怎么可能会有“地雷”？除非是男主角加入了以“青春”为名的乱交换妻俱乐部之类的。&lt;/p&gt;
&lt;p&gt;所以抱着好奇的心态，我就去看了一下这个游戏，初步感受就是本作的确不咋样，我也明白了为啥会有人说这里面有“地雷”了，但造成本作质量不佳的原因却并非是那个“地雷”，而是另有别处。&lt;/p&gt;
&lt;img src=&quot;/assets/mrbin/uploads/post-146-01.jpg&quot; alt=&quot;&quot; width=&quot;520&quot; height=&quot;293&quot; /&gt;
&lt;p&gt;那么就让我们详细展开谈谈吧：&lt;/p&gt;
&lt;p&gt;首先是游戏的剧情十分简单，又是那种写烂的“少子化”+“男女并校”的套路，说的是男生憧憬的女孩和现实不符，反之亦然，进而在并校之后开展的情侣碰撞，只不过加了一个“理想与现实“的外壳。但与众不同的是本作的情侣并非只有男主角一对，而是男主角可攻略四位，剩下的三位女配角则是分给了其他的男配角，最终的结局就是至少会成就四对情侣。&lt;/p&gt;
&lt;p&gt;这个设定就触碰了许多 Galgame 玩家的逆鳞了：老子是高贵的 Gal 男主，游戏里的所有角色无论男女的都应该可以被我攻略，结果你这个游戏反而把女配角许配给其他男主，三个性格迥异的妹子，我身为男主居然不可功能攻略？这完全不能忍受，反而带来了“NTR”的感觉，地雷！妥妥的地雷！&lt;/p&gt;
&lt;img src=&quot;/assets/mrbin/uploads/post-146-02.jpg&quot; alt=&quot;&quot; width=&quot;524&quot; height=&quot;295&quot; /&gt;
&lt;p&gt;然而本人对这种观点一直也是无法理解的，现代大部分 Galgame 中男主角的姓名都已经被确定，即使你扮演第一视角，但故事中的男主也是有自己的性格和名字的，完全无法体现出什么“代入感”，想体会这种感觉的你应该去玩那些可以自定义男主角名字的游戏才对，很显然，Asa Project 并不是这么一款游戏。&lt;/p&gt;
&lt;p&gt;那么是不是证明本作在剧情上没什么硬伤了吗？当然不是，不如说本作在剧情上十分的令人不爽，不爽的地方依然是前面说的那个“配角情侣”部分。&lt;/p&gt;
&lt;p&gt;本作中虽然我们的男主角可以选择四位美少女来进行攻略，但很明显这四位候选人不仅无聊，甚至有一些远离“恋爱“的范畴，比如口口声声说想要“白马王子”讨厌男生但是还天天和男生打得火热的黑毛，还有一个号称是男主的理想型并且让男主一见钟情，但是完全对男主没有什么恋爱感觉只是把男主当玩具的橘毛，还有一个已经用烂不知道多少次的标准青梅竹马模板的黄毛，还有一个超电波系但和之前的各种颜艺角色相比完全没有竞争力的紫毛，而和这四位极度抽象的可攻略角色比起来，三位配角女主就显得有趣得多，有典型的傲娇型的，有闷骚型的，还有笨蛋型的，每一个都是可以带动剧情节奏的存在。&lt;/p&gt;
&lt;img src=&quot;/assets/mrbin/uploads/post-146-03.jpg&quot; alt=&quot;&quot; width=&quot;520&quot; height=&quot;293&quot; /&gt;
&lt;p&gt;所以这就导致这个游戏形成了一个十分奇怪的感觉，配角的恋爱故事比主角好看，比主角精彩，甚至戏份占比都比主角来得多。尤其是剧情中期竞选学生会桥段的故事，基友和那个傲娇いのり之间的恋爱博弈完全抢占了其他所有情侣的戏份，而在普通的日常剧情中，围绕着”看胖次“为主轴的两位闷骚配角的剧情夺走了所有的眼球，这种鲜明的对比让男主角和他的四位备选女友看起来就像是纯纯的小丑。加上那些精彩有趣的配角都已经“名花有主”，所以更加凸显了这种游戏过程的不爽。&lt;/p&gt;
&lt;p&gt;除了在剧情方面的问题，游戏本身的演出方面问题也不少，最大的一点就是“对话混乱”，游戏从一开始就毫无角色引入与介绍的桥段，在玩家还没分清谁是谁的前提下，直接就进入了正片。游戏中存在大量“至少 6 人同时对话”的场景，而游戏没有对这种”你一言我一语”的混乱模式下进行任何优化，加上本作中的 CV 除了秋野花和奏雨之外都没有什么特色，你很难分清楚目前究竟是谁在说话，听着听着你就晕了。哪怕通过不同颜色和类似漫画分镜的方式来辅助演出，都可以很轻松的解决这个问题，但是 Asa Project 并没有这么做。&lt;/p&gt;
&lt;p&gt;除了演出方面的缩水导致的大脑混乱，游戏在素材方面也秉承了一如既往的“能复用就复用”的原则，你不仅可以在本作中看到那个已经用烂的“祖传咖啡厅”背景，还有之前在《一つ飛ばし恋愛》里出现的游泳馆，以及在各种之前作品里出现过的各种场景。游戏在制作成本上的极度省钱甚至导致了许多剧情上的损失，共通线中有大量“打乒乓球”之类的运动对抗桥段，游戏甚至没有对此提供一个专属背景和 CG，仅凭一群人在一个不明所以的背景图片下对着空气挥汗如雨，令人哭笑不得。&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;img src=&quot;/assets/mrbin/uploads/post-146-04.jpg&quot; alt=&quot;&quot; width=&quot;518&quot; height=&quot;292&quot; /&gt;
&lt;p&gt;所以从整体来看，コイバナ恋愛并不是一个多好的游戏，甚至不如之前的那一作以”劈腿“为主题的游戏。但它失败的地方并非是什么”女配角不可攻略“的问题，而是可攻略女主角的内容太过无聊和敷衍，并且远不如配角的戏份占比大和精彩。加上游戏在本身开发成本上的极度缩减，CG的大量复用，各种演出效果的缺失，直接让本作的游戏体验大打折扣，玩起来会让人十分的不爽，也就不难理解为啥会给许多人负面的感受了。&lt;/p&gt;
&lt;p&gt;但还是要强调：原因是游戏本身制作偷工减料没做好的问题，而不是什么“可攻略与否”的问题。&lt;/p&gt;
&lt;img src=&quot;/assets/mrbin/uploads/post-146-05.jpg&quot; alt=&quot;&quot; width=&quot;508&quot; height=&quot;286&quot; /&gt;
&lt;p&gt;换而言之，本作如果能增加可攻略女主角的戏份，认真描写主线剧情，强化演出效果，让对话的中的主体更加明晰，加一些事件 CG，增加玩家的沉浸感，哪怕那些配角依然是不可攻略，本作也会是一个优秀的游戏的。&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;当然本作也有一些颇为虚幻的地方，比如有主角配角一群人去游乐园玩的桥段，每个人都有心仪的情侣，大家成双成对的边走边说笑之类的，这种十分“现充”的生活，对于这个游戏的受众可能过于超前。真正的现实可能是死肥宅孤身一人作为电灯泡跟着一群现充情侣去游乐场之类的，这在大学生活中也许更为常见吧。&lt;/p&gt;
&lt;p&gt;好像我的大学生活就是如此……算了不提了。&lt;/p&gt;</content:encoded></item><item><title>Leetcode 27:移除元素——使用双指针进行查找</title><link>https://zuelhhb.top/posts/mrbin/2024-02-10-142/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-02-10-142/</guid><description>先看题目 给你一个数组 nums 和一个值 val ，你需要 原地 移除所有数值等于 val 的元素，并返回移除后数组的新长度。 不要使用额外的数组空间，你必须仅使用 O(1) 额外空间并 原地 修改输入数组 。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面的元素。 说明</description><pubDate>Sat, 10 Feb 2024 03:53:21 GMT</pubDate><content:encoded>&lt;p&gt;先看题目&lt;/p&gt;
&lt;p&gt;给你一个数组 &lt;code&gt;nums&lt;/code&gt;&lt;em&gt; &lt;/em&gt;和一个值 &lt;code&gt;val&lt;/code&gt;，你需要 &lt;strong&gt;&lt;a href=&quot;https://baike.baidu.com/item/%E5%8E%9F%E5%9C%B0%E7%AE%97%E6%B3%95&quot; target=&quot;_blank&quot;&gt;原地&lt;/a&gt;&lt;/strong&gt; 移除所有数值等于 &lt;code&gt;val&lt;/code&gt;&lt;em&gt; &lt;/em&gt;的元素，并返回移除后数组的新长度。&lt;/p&gt;
&lt;p&gt;不要使用额外的数组空间，你必须仅使用 &lt;code&gt;O(1)&lt;/code&gt; 额外空间并 &lt;strong&gt;&lt;a href=&quot;https://baike.baidu.com/item/%E5%8E%9F%E5%9C%B0%E7%AE%97%E6%B3%95&quot; target=&quot;_blank&quot;&gt;原地 &lt;/a&gt;修改输入数组&lt;/strong&gt;。&lt;/p&gt;
&lt;p&gt;元素的顺序可以改变。你不需要考虑数组中超出新长度后面的元素。&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;说明:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;为什么返回数值是整数，但输出的答案是数组呢?&lt;/p&gt;
&lt;p&gt;请注意，输入数组是以&lt;strong&gt;「引用」&lt;/strong&gt;方式传递的，这意味着在函数里修改输入数组对于调用者是可见的。&lt;/p&gt;
&lt;p&gt;你可以想象内部操作如下:&lt;/p&gt;
&lt;pre&gt;// &lt;strong&gt;nums&lt;/strong&gt; 是以“引用”方式传递的。也就是说，不对实参作任何拷贝
int len = removeElement(nums, val);

// 在函数里修改输入数组对于调用者是可见的。
// 根据你的函数返回的长度, 它会打印出数组中&lt;strong&gt; 该长度范围内&lt;/strong&gt; 的所有元素。
for (int i = 0; i &amp;lt; len; i++) {
    print(nums[i]);
}
&lt;/pre&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;示例 1：&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;strong&gt;输入：&lt;/strong&gt;nums = [3,2,2,3], val = 3
&lt;strong&gt;输出：&lt;/strong&gt;2, nums = [2,2]
&lt;strong&gt;解释：&lt;/strong&gt;函数应该返回新的长度 &lt;strong&gt;&lt;code&gt;2&lt;/code&gt;&lt;/strong&gt;, 并且 nums 中的前两个元素均为 &lt;strong&gt;2&lt;/strong&gt;。你不需要考虑数组中超出新长度后面的元素。例如，函数返回的新长度为 2 ，而 nums = [2,2,3,3] 或 nums = [2,2,0,0]，也会被视作正确答案。&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;示例 2：&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;strong&gt;输入：&lt;/strong&gt;nums = [0,1,2,2,3,0,4,2], val = 2
&lt;strong&gt;输出：&lt;/strong&gt;5, nums = [0,1,3,0,4]
&lt;strong&gt;解释：&lt;/strong&gt;函数应该返回新的长度 &lt;strong&gt;&lt;code&gt;5&lt;/code&gt;&lt;/strong&gt;, 并且 nums 中的前五个元素为 &lt;strong&gt;&lt;code&gt;0&lt;/code&gt;&lt;/strong&gt;, &lt;strong&gt;&lt;code&gt;1&lt;/code&gt;&lt;/strong&gt;, &lt;strong&gt;&lt;code&gt;3&lt;/code&gt;&lt;/strong&gt;, &lt;strong&gt;&lt;code&gt;0&lt;/code&gt;&lt;/strong&gt;, &lt;strong&gt;&lt;code&gt;4&lt;/code&gt;&lt;/strong&gt;。注意这五个元素可为任意顺序。你不需要考虑数组中超出新长度后面的元素。&lt;/pre&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;提示：&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
 	&lt;li&gt;&lt;code&gt;0 &amp;lt;= nums.length &amp;lt;= 100&lt;/code&gt;&lt;/li&gt;
 	&lt;li&gt;&lt;code&gt;0 &amp;lt;= nums[i] &amp;lt;= 50&lt;/code&gt;&lt;/li&gt;
 	&lt;li&gt;&lt;code&gt;0 &amp;lt;= val &amp;lt;= 100&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;解法&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;class Solution {
public:
    int removeElement(vector&amp;lt;int&amp;gt;&amp;amp; nums, int val) {
        int l = 0, r = nums.size() - 1;
        while (l &amp;lt;= r) {
            if (nums[l] == val) {
                int temp = nums[l];
                nums[l] = nums[r];
                nums[r] = temp;
                r--;
            } else {
                l++;
            }
        }
        return r+1;
    }
};&lt;/code&gt;&lt;/pre&gt;
 </content:encoded></item><item><title>Leetcode 2535:数组元素和与数字和的绝对差——一道练习数位求和的好题</title><link>https://zuelhhb.top/posts/mrbin/2024-02-10-140/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-02-10-140/</guid><description>先看题目 给你一个正整数数组 nums 。 元素和 是 nums 中的所有元素相加求和。 数字和 是 nums 中每一个元素的每一数位（重复数位需多次求和）相加求和。 返回 元素和 与 数字和 的绝对差。 注意： 两个整数 x 和 y 的绝对差定义为 |x - y| 。 示例 1</description><pubDate>Sat, 10 Feb 2024 02:32:58 GMT</pubDate><content:encoded>&lt;p&gt;先看题目&lt;/p&gt;
&lt;p&gt;给你一个正整数数组 &lt;code&gt;nums&lt;/code&gt; 。&lt;/p&gt;
&lt;ul&gt;
 	&lt;li&gt;&lt;strong&gt;元素和&lt;/strong&gt; 是 &lt;code&gt;nums&lt;/code&gt; 中的所有元素相加求和。&lt;/li&gt;
 	&lt;li&gt;&lt;strong&gt;数字和&lt;/strong&gt; 是 &lt;code&gt;nums&lt;/code&gt; 中每一个元素的每一数位（重复数位需多次求和）相加求和。&lt;/li&gt;
&lt;/ul&gt;
返回 &lt;strong&gt;元素和&lt;/strong&gt; 与 &lt;strong&gt;数字和&lt;/strong&gt; 的绝对差。
&lt;p&gt;&lt;strong&gt;注意：&lt;/strong&gt;两个整数 &lt;code&gt;x&lt;/code&gt; 和 &lt;code&gt;y&lt;/code&gt; 的绝对差定义为 &lt;code&gt;|x - y|&lt;/code&gt; 。&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;示例 1：&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;strong&gt;输入：&lt;/strong&gt;nums = [1,15,6,3]
&lt;strong&gt;输出：&lt;/strong&gt;9
&lt;strong&gt;解释：&lt;/strong&gt;
nums 的元素和是 1 + 15 + 6 + 3 = 25 。
nums 的数字和是 1 + 1 + 5 + 6 + 3 = 16 。
元素和与数字和的绝对差是 |25 - 16| = 9 。
&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;示例 2：&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;strong&gt;输入：&lt;/strong&gt;nums = [1,2,3,4]
&lt;strong&gt;输出：&lt;/strong&gt;0
&lt;strong&gt;解释：&lt;/strong&gt;
nums 的元素和是 1 + 2 + 3 + 4 = 10 。
nums 的数字和是 1 + 2 + 3 + 4 = 10 。
元素和与数字和的绝对差是 |10 - 10| = 0 。
&lt;/pre&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;提示：&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
 	&lt;li&gt;&lt;code&gt;1 &amp;lt;= nums.length &amp;lt;= 2000&lt;/code&gt;&lt;/li&gt;
 	&lt;li&gt;&lt;code&gt;1 &amp;lt;= nums[i] &amp;lt;= 2000&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;解法&lt;/h2&gt;
直接进行遍历求和，最后返回相减结果。
&lt;pre&gt;&lt;code&gt;class Solution {
public:
    int differenceOfSum(vector&amp;lt;int&amp;gt;&amp;amp; nums) {
        int sum1=0,sum2=0;
        for(auto &amp;amp;i:nums){
            sum1+=i;
            while(i){
                sum2+=i%10;
                i/=10;
            }
        }
        return abs(sum1-sum2);
    }
};&lt;/code&gt;&lt;/pre&gt;
 </content:encoded></item><item><title>Leetcode 2057:值相等的最小索引——论我和大佬的差距（2）</title><link>https://zuelhhb.top/posts/mrbin/2024-02-09-135/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-02-09-135/</guid><description>没啥好说的，感觉回到了高中，仿佛就像你写一道大题用了各种花活，结果别人几行就搞完了，浪费时间（不是） 先看题目 给你一个下标从 0 开始的整数数组 nums ，返回 nums 中满足 i mod 10 == nums[i] 的最小下标 i ；如果不存在这样的下标，返回 -1 。 </description><pubDate>Fri, 09 Feb 2024 12:00:48 GMT</pubDate><content:encoded>&lt;p&gt;没啥好说的，感觉回到了高中，仿佛就像你写一道大题用了各种花活，结果别人几行就搞完了，浪费时间（不是）&lt;/p&gt;
&lt;h2&gt;先看题目&lt;/h2&gt;
给你一个下标从 0 开始的整数数组 &lt;code&gt;nums&lt;/code&gt; ，返回 &lt;code&gt;nums&lt;/code&gt; 中满足&lt;em&gt; &lt;/em&gt;&lt;code&gt;i mod 10 == nums[i]&lt;/code&gt;&lt;em&gt; &lt;/em&gt;的最小下标 &lt;code&gt;i&lt;/code&gt; ；如果不存在这样的下标，返回&lt;em&gt; &lt;/em&gt;&lt;code&gt;-1&lt;/code&gt;&lt;em&gt; &lt;/em&gt;。
&lt;p&gt;&lt;code&gt;x mod y&lt;/code&gt; 表示 &lt;code&gt;x&lt;/code&gt; 除以 &lt;code&gt;y&lt;/code&gt; 的 &lt;strong&gt;余数&lt;/strong&gt; 。&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;示例 1：&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;strong&gt;输入：&lt;/strong&gt;nums = [0,1,2]
&lt;strong&gt;输出：&lt;/strong&gt;0
&lt;strong&gt;解释：&lt;/strong&gt;
i=0: 0 mod 10 = 0 == nums[0].
i=1: 1 mod 10 = 1 == nums[1].
i=2: 2 mod 10 = 2 == nums[2].
所有下标都满足 i mod 10 == nums[i] ，所以返回最小下标 0
&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;示例 2：&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;strong&gt;输入：&lt;/strong&gt;nums = [4,3,2,1]
&lt;strong&gt;输出：&lt;/strong&gt;2
&lt;strong&gt;解释：&lt;/strong&gt;
i=0: 0 mod 10 = 0 != nums[0].
i=1: 1 mod 10 = 1 != nums[1].
i=2: 2 mod 10 = 2 == nums[2].
i=3: 3 mod 10 = 3 != nums[3].
2 唯一一个满足 i mod 10 == nums[i] 的下标
&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;示例 3：&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;strong&gt;输入：&lt;/strong&gt;nums = [1,2,3,4,5,6,7,8,9,0]
&lt;strong&gt;输出：&lt;/strong&gt;-1
&lt;strong&gt;解释：&lt;/strong&gt;不存在满足 i mod 10 == nums[i] 的下标
&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;示例 4：&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;strong&gt;输入：&lt;/strong&gt;nums = [2,1,3,5,2]
&lt;strong&gt;输出：&lt;/strong&gt;1
&lt;strong&gt;解释：&lt;/strong&gt;1 是唯一一个满足 i mod 10 == nums[i] 的下标
&lt;/pre&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;提示：&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
 	&lt;li&gt;&lt;code&gt;1 &amp;lt;= nums.length &amp;lt;= 100&lt;/code&gt;&lt;/li&gt;
 	&lt;li&gt;&lt;code&gt;0 &amp;lt;= nums[i] &amp;lt;= 9&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;我写的&lt;/h2&gt;
我的思路：先创建一个ans数组，再遍历一遍题目给的nums数组，当取到正确的数后，将下表存储在ans数组中，再用三个if语句将结果数组（Tips:求数组中的最小值可用函数*min_element(p, p + n)，就是在p~p+n范围内的最小的数，max类同）
&lt;pre&gt;&lt;code&gt;class Solution {
public:
    int smallestEqual(vector&amp;lt;int&amp;gt;&amp;amp; nums) {
        int count = 0, j = 0;
        vector&amp;lt;int&amp;gt; ans;
        for (int i = 0; i &amp;lt; nums.size(); ++i) {
            if (i % 10 == nums[i]) {
                count++;
                ans.push_back(i);
            }
        }
        if (count == 0)
            return -1;
        if (count == nums.size())
            return 0;
        else
            return *min_element(ans.begin(), ans.end());
    }
};&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;大佬写的&lt;/h2&gt;
思路就不说了，写得很清楚
&lt;pre&gt;&lt;code&gt;class Solution {
public:
    int smallestEqual(vector&amp;lt;int&amp;gt;&amp;amp; nums) 
    {
        int ret = -1;
        for(int i = 0;i &amp;lt; nums.size();++i)
        {
            if(nums[i] == (i % 10))
            {
                ret = i;
                break;
            }
        }
        return ret;
    }
};&lt;/code&gt;&lt;/pre&gt;
还有两个月就是蓝桥杯了，冲刺ing。。。</content:encoded></item><item><title>LCP 06:拿硬币——论我和力扣大佬的区别</title><link>https://zuelhhb.top/posts/mrbin/2024-02-09-129/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-02-09-129/</guid><description>一道在力扣上的简单问题，我写了几十行代码，别人几行就搞定了 虽然时间上没区别，但不得不感叹代码的可读性真的很重要，既简洁又高效的才是好程序~ 先看问题： 桌上有 n 堆力扣币，每堆的数量保存在数组 coins 中。我们每次可以选择任意一堆，拿走其中的一枚或者两枚，求拿完所有力扣币</description><pubDate>Fri, 09 Feb 2024 01:44:17 GMT</pubDate><content:encoded>&lt;p&gt;一道在力扣上的简单问题，我写了几十行代码，别人几行就搞定了&lt;/p&gt;
&lt;p&gt;虽然时间上没区别，但不得不感叹代码的可读性真的很重要，既简洁又高效的才是好程序~&lt;/p&gt;
&lt;p&gt;先看问题：&lt;/p&gt;
&lt;p&gt;桌上有 &lt;code&gt;n&lt;/code&gt; 堆力扣币，每堆的数量保存在数组 &lt;code&gt;coins&lt;/code&gt; 中。我们每次可以选择任意一堆，拿走其中的一枚或者两枚，求拿完所有力扣币的最少次数。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;示例 1：&lt;/strong&gt;&lt;/p&gt;
&lt;blockquote&gt;输入：&lt;code&gt;[4,2,1]&lt;/code&gt;
&lt;p&gt;输出：&lt;code&gt;4&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;解释：第一堆力扣币最少需要拿 2 次，第二堆最少需要拿 1 次，第三堆最少需要拿 1 次，总共 4 次即可拿完。&lt;/p&gt;&lt;/blockquote&gt;
&lt;strong&gt;示例 2：&lt;/strong&gt;&lt;p&gt;&lt;/p&gt;
&lt;blockquote&gt;输入：&lt;code&gt;[2,3,10]&lt;/code&gt;
&lt;p&gt;输出：&lt;code&gt;8&lt;/code&gt;&lt;/p&gt;&lt;/blockquote&gt;
&lt;strong&gt;限制：&lt;/strong&gt;&lt;p&gt;&lt;/p&gt;
&lt;ul&gt;
 	&lt;li&gt;&lt;code&gt;1 &amp;lt;= n &amp;lt;= 4&lt;/code&gt;&lt;/li&gt;
 	&lt;li&gt;&lt;code&gt;1 &amp;lt;= coins[i] &amp;lt;= 10&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
 
&lt;h2&gt;我的方法&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;class Solution {
public:
    int minCount(vector&amp;lt;int&amp;gt;&amp;amp; coins) {
        int ans = 0;
        for (int i = 0; i &amp;lt; coins.size(); ++i) {
            while (coins[i] % 2 == 0) {
                coins[i] -= 2;
                ans++;
                if (coins[i] &amp;lt;= 0)
                    break;
            }
            while (coins[i] != 1 &amp;amp;&amp;amp; coins[i] % 2 == 1) {
                coins[i] -= 2;
                ans++;
            }
            if (coins[i] == 1) {
                ans++;
                continue;
            }
        }
        return ans;
    }
};&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;大佬的方法&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;class Solution {
public:
    int minCount(vector&amp;lt;int&amp;gt;&amp;amp; coins) {
        int cnt = 0;
        for(auto&amp;amp; num : coins) {
            cnt += num / 2 + num % 2;
        }
        return cnt;
    }
};&lt;/code&gt;&lt;/pre&gt;
看来我还有很长一段路要走</content:encoded></item><item><title>Leetcode01:两数之和——使用哈希表进行快速查找</title><link>https://zuelhhb.top/posts/mrbin/2024-02-04-119/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-02-04-119/</guid><description>前言 众所周知，当我们在进行数组查找时，通常会碰到较多的数据，使用普通的遍历可能会使时间复杂度达到0(n²)，处理起来十分麻烦，因此我们在这里引入时间复杂度为o(1)的哈希表。 解释 “哈希”，就是指高维到低维的映射，通常来说就是数据大的空间对数据小的空间的映射,在C++中，我们</description><pubDate>Sun, 04 Feb 2024 05:14:40 GMT</pubDate><content:encoded>&lt;h2&gt;前言&lt;/h2&gt;
众所周知，当我们在进行数组查找时，通常会碰到较多的数据，使用普通的遍历可能会使时间复杂度达到0(n²)，处理起来十分麻烦，因此我们在这里引入时间复杂度为o(1)的哈希表。
&lt;h2&gt;解释&lt;/h2&gt;
“哈希”，就是指高维到低维的映射，通常来说就是数据大的空间对数据小的空间的映射,在C++中，我们使用unordered_map&amp;lt;&amp;gt;来引用。
&lt;h2&gt;应用&lt;/h2&gt;
先来看看题目：
&lt;p&gt;给定一个整数数组 &lt;code&gt;nums&lt;/code&gt; 和一个整数目标值 &lt;code&gt;target&lt;/code&gt;，请你在该数组中找出 &lt;strong&gt;和为目标值 &lt;/strong&gt;&lt;em&gt;&lt;code&gt;target&lt;/code&gt;&lt;/em&gt;  的那 &lt;strong&gt;两个&lt;/strong&gt; 整数，并返回它们的数组下标。&lt;/p&gt;
&lt;p&gt;你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。&lt;/p&gt;
&lt;p&gt;你可以按任意顺序返回答案。&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;示例 1：&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;strong&gt;输入：&lt;/strong&gt;nums = [2,7,11,15], target = 9
&lt;strong&gt;输出：&lt;/strong&gt;[0,1]
&lt;strong&gt;解释：&lt;/strong&gt;因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。
&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;示例 2：&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;strong&gt;输入：&lt;/strong&gt;nums = [3,2,4], target = 6
&lt;strong&gt;输出：&lt;/strong&gt;[1,2]
&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;示例 3：&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;strong&gt;输入：&lt;/strong&gt;nums = [3,3], target = 6
&lt;strong&gt;输出：&lt;/strong&gt;[0,1]
&lt;/pre&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;提示：&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
 	&lt;li&gt;&lt;code&gt;2 &amp;lt;= nums.length &amp;lt;= 10&lt;sup&gt;4&lt;/sup&gt;&lt;/code&gt;&lt;/li&gt;
 	&lt;li&gt;&lt;code&gt;-10&lt;sup&gt;9&lt;/sup&gt; &amp;lt;= nums[i] &amp;lt;= 10&lt;sup&gt;9&lt;/sup&gt;&lt;/code&gt;&lt;/li&gt;
 	&lt;li&gt;&lt;code&gt;-10&lt;sup&gt;9&lt;/sup&gt; &amp;lt;= target &amp;lt;= 10&lt;sup&gt;9&lt;/sup&gt;&lt;/code&gt;&lt;/li&gt;
 	&lt;li&gt;&lt;strong&gt;只会存在一个有效答案&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
 
&lt;p&gt;&lt;strong&gt;进阶：&lt;/strong&gt;你可以想出一个时间复杂度小于 &lt;code&gt;O(n&lt;sup&gt;2&lt;/sup&gt;)&lt;/code&gt; 的算法吗？&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;对于这题，我们很容易想到利用两个for循环来进行查找，但这样的时间复杂度太高&lt;/p&gt;
&lt;h3&gt;For循环(时间复杂度o(n²))&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;class Solution {
public:
    vector&amp;lt;int&amp;gt; twoSum(vector&amp;lt;int&amp;gt;&amp;amp; nums, int target) {
        int n = nums.size();
        for (int i = 0; i &amp;lt; n; ++i) {
            for (int j = i + 1; j &amp;lt; n; ++j) {
                if (nums[i] + nums[j] == target) {
                    return {i, j};
                }
            }
        }
        return {};
    }
};&lt;/code&gt;&lt;/pre&gt;
提交结果：
&lt;img src=&quot;/assets/mrbin/uploads/post-119-01.png&quot; alt=&quot;&quot; width=&quot;297&quot; height=&quot;300&quot; /&gt;
&lt;p&gt;仅仅在前40%&lt;/p&gt;
&lt;p&gt;但当我们使用哈希表时：&lt;/p&gt;
&lt;h2&gt;哈希表(时间复杂度o(1))&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;class Solution {
public:
    vector&amp;lt;int&amp;gt; twoSum(vector&amp;lt;int&amp;gt;&amp;amp; nums, int target) {
        unordered_map&amp;lt;int,int&amp;gt; h;
        vector &amp;lt;int&amp;gt; ret(2);
        for(int i=0,I=nums.size();i&amp;lt;I;++i){
            if(h.find(target-nums[i])!=h.end()){
                ret[0]=h[target-nums[i]];
                ret[1]=i;
                break;
            }
            h[nums[i]]=i;
        }
        return ret;
    }
};&lt;/code&gt;&lt;/pre&gt;
提交结果：
&lt;img src=&quot;/assets/mrbin/uploads/post-119-02.png&quot; alt=&quot;&quot; width=&quot;300&quot; height=&quot;219&quot; /&gt;
&lt;p&gt;可以看到运行速度在前1%&lt;/p&gt;
&lt;p&gt;由此可以看出哈希表的强大之处。&lt;/p&gt;</content:encoded></item><item><title>数据结构：使用C++实现二叉树的遍历和线索化</title><link>https://zuelhhb.top/posts/mrbin/2024-01-28-105/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-01-28-105/</guid><description>#include &lt;iostream&gt; #include &lt;time.h&gt; using namespace std; typedef struct Node{ int key; int ltag,rtag;//1:thread 0:edge Node *lchild, *rchi</description><pubDate>Sun, 28 Jan 2024 00:20:59 GMT</pubDate><content:encoded>&lt;p&gt;&lt;img src=&quot;/assets/mrbin/uploads/post-105-01.png&quot; alt=&quot;&quot; width=&quot;300&quot; height=&quot;171&quot; /&gt;&lt;img src=&quot;/assets/mrbin/uploads/post-105-02.png&quot; alt=&quot;&quot; width=&quot;300&quot; height=&quot;177&quot; /&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;#include &amp;lt;iostream&amp;gt;
#include &amp;lt;time.h&amp;gt;
using namespace std;

typedef struct Node{
	int key;
	int ltag,rtag;//1:thread 0:edge
	Node *lchild, *rchild;
}Node;

Node *GetNewNode(int key)
{
	Node *p=new Node;
	p-&amp;gt;key=key;
	p-&amp;gt;ltag=p-&amp;gt;rtag=0;
	p-&amp;gt;lchild=p-&amp;gt;rchild=NULL;
	return p;
}

Node *insert(Node *root,int key)
{
	if(root==NULL)	return GetNewNode(key);
	if(rand()%2)	root-&amp;gt;lchild=insert(root-&amp;gt;lchild,key);
	else			root-&amp;gt;rchild=insert(root-&amp;gt;rchild,key);
	return root;
}

void clear(Node *root)
{
	if(root==NULL)	return;
	if(root-&amp;gt;ltag==0)	clear(root-&amp;gt;lchild);
	if(root-&amp;gt;rtag==0)	clear(root-&amp;gt;rchild);
	delete root;
	return;
}

void PRE_order(Node *root)
{
	if(root==NULL)	return;
	cout&amp;lt;&amp;lt;root-&amp;gt;key&amp;lt;&amp;lt;&apos; &apos;;
	if(root-&amp;gt;ltag==0)	PRE_order(root-&amp;gt;lchild);
	if(root-&amp;gt;rtag==0)	PRE_order(root-&amp;gt;rchild);
	return;
}

void IN_order(Node *root)
{
	if(root==NULL)	return;
	if(root-&amp;gt;ltag==0)	IN_order(root-&amp;gt;lchild);
	cout&amp;lt;&amp;lt;root-&amp;gt;key&amp;lt;&amp;lt;&apos; &apos;;
	if(root-&amp;gt;rtag==0)	IN_order(root-&amp;gt;rchild);
}

void POST_order(Node *root)
{
	if(root==NULL)	return;
	if(root-&amp;gt;ltag==0)	PRE_order(root-&amp;gt;lchild);
	if(root-&amp;gt;rtag==0)	PRE_order(root-&amp;gt;rchild);
	cout&amp;lt;&amp;lt;root-&amp;gt;key&amp;lt;&amp;lt;&apos; &apos;;
}

Node *pre_node=NULL,*inorder_root = NULL;
void __build_inorder_thread(Node *root) {
    if (root == NULL) return ;
    if (root-&amp;gt;ltag == 0) __build_inorder_thread(root-&amp;gt;lchild);
    if (inorder_root == NULL) inorder_root = root;
    if (root-&amp;gt;lchild == NULL) {
        root-&amp;gt;lchild = pre_node;
        root-&amp;gt;ltag = 1;
    }
    if (pre_node &amp;amp;&amp;amp; pre_node-&amp;gt;rchild == NULL) {
        pre_node-&amp;gt;rchild = root;
        pre_node-&amp;gt;rtag = 1;
    }
    pre_node = root;
    if (root-&amp;gt;rtag == 0) __build_inorder_thread(root-&amp;gt;rchild);
    return ;
}

void build_inorder_thread(Node *root)
{
	__build_inorder_thread(root);
	pre_node-&amp;gt;rchild=NULL;
	pre_node-&amp;gt;rtag=1;
	return;
}

Node *GetNextNode(Node *root)
{
	if(root-&amp;gt;rtag==1)	return root-&amp;gt;rchild;
	root=root-&amp;gt;rchild;
	while(root-&amp;gt;ltag==0&amp;amp;&amp;amp;root-&amp;gt;lchild)	root=root-&amp;gt;lchild;
	return root;
}

int main()
{
	srand(time(0));
	Node *root=NULL;
	#define MAX_NODE 10
	for(int i=0;i&amp;lt;MAX_NODE;++i)
	{
		root=insert(root,rand()%100);
	}
	pre_node = inorder_root = NULL;
	build_inorder_thread(root);
	
	PRE_order(root);cout&amp;lt;&amp;lt;endl;
	IN_order(root);cout&amp;lt;&amp;lt;endl;
	POST_order(root);cout&amp;lt;&amp;lt;endl;
	//Like Linklist
	Node *node=inorder_root;
	while(node){
		cout&amp;lt;&amp;lt;node-&amp;gt;key&amp;lt;&amp;lt;&apos; &apos;;
		node=GetNextNode(node);
	}
	cout&amp;lt;&amp;lt;endl;
	clear(root);
	return 0;
}&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt; &lt;/p&gt;</content:encoded></item><item><title>数据结构：使用C++实现二叉树的深度优先搜索和广度优先搜索</title><link>https://zuelhhb.top/posts/mrbin/2024-01-25-90/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-01-25-90/</guid><description>二叉树的搜索主要依靠队列进行搜索，用头尾进行：先进先出，后进后出的原则 实现代码如下： #include&lt;iostream&gt; #include&lt;time.h&gt; using namespace std; typedef struct Node{ int key; struct No</description><pubDate>Thu, 25 Jan 2024 13:27:46 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span&gt;二叉树的搜索主要依靠队列进行搜索，用头尾进行：先进先出，后进后出的原则&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/assets/mrbin/uploads/post-90-01.png&quot; alt=&quot;&quot; width=&quot;300&quot; height=&quot;171&quot; /&gt;&lt;img src=&quot;/assets/mrbin/uploads/post-90-02.png&quot; alt=&quot;&quot; width=&quot;300&quot; height=&quot;163&quot; /&gt;&lt;img src=&quot;/assets/mrbin/uploads/post-90-03.png&quot; alt=&quot;&quot; width=&quot;300&quot; height=&quot;104&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;实现代码如下：&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;#include&amp;lt;iostream&amp;gt;
#include&amp;lt;time.h&amp;gt;
using namespace std;

typedef struct Node{
	int key;
	struct Node *lchild, *rchild;
}Node;

Node *getnewNode(int key){
	Node *p = new Node;
	p-&amp;gt;key=key;
	p-&amp;gt;lchild=p-&amp;gt;rchild=NULL;
	return p;
}

Node *insert(Node *root,int key){
	if(root==NULL)	return getnewNode(key);
	if(rand()%2)	root-&amp;gt;lchild=insert(root-&amp;gt;lchild,key);
	else			root-&amp;gt;rchild=insert(root-&amp;gt;rchild,key);
	return root;
}

void clear(Node *root)
{
	if(root==NULL)	return;
	clear(root-&amp;gt;lchild);
	clear(root-&amp;gt;rchild);
	free(root);
	return;
}

#define MAX_NODE 10
Node *queue[MAX_NODE+5];
int head,tail;

void bfs(Node *root){
	head=tail=0;
	queue[tail++]=root;
	while(head&amp;lt;tail){
			Node *node=queue[head];
			cout&amp;lt;&amp;lt;endl&amp;lt;&amp;lt;&quot;node: &quot;&amp;lt;&amp;lt;node-&amp;gt;key&amp;lt;&amp;lt;endl;
	if(node-&amp;gt;lchild){
			queue[tail++]=node-&amp;gt;lchild;
			cout&amp;lt;&amp;lt;&apos; &apos;&amp;lt;&amp;lt;node-&amp;gt;key&amp;lt;&amp;lt;&quot;-&amp;gt;&quot;&amp;lt;&amp;lt;node-&amp;gt;lchild-&amp;gt;key&amp;lt;&amp;lt;&quot;(left)&quot;&amp;lt;&amp;lt;endl;
		}
	if(node-&amp;gt;rchild){
			queue[tail++]=node-&amp;gt;rchild;
			cout&amp;lt;&amp;lt;&apos; &apos;&amp;lt;&amp;lt;node-&amp;gt;key&amp;lt;&amp;lt;&quot;-&amp;gt;&quot;&amp;lt;&amp;lt;node-&amp;gt;rchild-&amp;gt;key&amp;lt;&amp;lt;&quot;(right)&quot;&amp;lt;&amp;lt;endl;
		}
		head++;	
	}
	cout&amp;lt;&amp;lt;endl;
	return;
}

int tot=0;
void dfs(Node *root)
{
	if(root==NULL) return;
	int start,end;
	tot+=1;
	start=tot;
	if(root-&amp;gt;lchild)	dfs(root-&amp;gt;lchild);
	if(root-&amp;gt;rchild)	dfs(root-&amp;gt;rchild);
	tot+=1;
	end=tot;
	cout&amp;lt;&amp;lt;root-&amp;gt;key&amp;lt;&amp;lt;&quot; : &quot;&amp;lt;&amp;lt;&quot;[&quot;&amp;lt;&amp;lt;start&amp;lt;&amp;lt;&apos;,&apos;&amp;lt;&amp;lt;end&amp;lt;&amp;lt;&quot;]&quot;&amp;lt;&amp;lt;endl;
	return;
}


int main()
{
	srand(time(0));
	Node *root=NULL;
	for(int i=0;i&amp;lt;MAX_NODE;i++)
	{
		root=insert(root,rand()%100);
	}
	bfs(root);
	dfs(root);
	return 0;
}&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt; &lt;/p&gt;</content:encoded></item><item><title>什么是程序员</title><link>https://zuelhhb.top/posts/mrbin/2024-01-19-86/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2024-01-19-86/</guid><description>虽然不知道为什么这只鸟用头飞了起来，但是总归是实现了功能。 等等，既然反正是用头飞的，那去掉翅膀应该没事。 凭什么去掉翅膀就不能飞了嘛？你TM不是用头飞的嘛？ 凭什么原封不动把翅膀加回去又不能飞了？我啥也没干啊？ 艹！为什么这只鸟会用脚飞行？这是什么原理？我把脚去掉试试！ 绝了！</description><pubDate>Fri, 19 Jan 2024 12:28:12 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span&gt;虽然不知道为什么这只鸟用头飞了起来，但是总归是实现了功能。&lt;/span&gt;
&lt;span&gt;等等，既然反正是用头飞的，那去掉翅膀应该没事。&lt;/span&gt;
&lt;span&gt;凭什么去掉翅膀就不能飞了嘛？你TM不是用头飞的嘛？&lt;/span&gt;
&lt;span&gt;凭什么原封不动把翅膀加回去又不能飞了？我啥也没干啊？&lt;/span&gt;
&lt;span&gt;艹！为什么这只鸟会用脚飞行？这是什么原理？我把脚去掉试试！&lt;/span&gt;
&lt;span&gt;绝了！这鸟能飞了！！还是用翅膀正常飞行！虽然它没有脚不能着陆。&lt;/span&gt;
&lt;span&gt;等等，我上次好像做了一只鹰来着？把那个脚复制过来看看！&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;完美！这只鸽子现在拥有了完善的飞行功能，并且可以正常着陆。虽然脚是用鹰的脚凑合的，但是没问题！能用！我宣布！这个项目完成了！&lt;/span&gt;&lt;/p&gt;</content:encoded></item><item><title>Encrypted Post</title><link>https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/encrypted-post/</link><guid isPermaLink="true">https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/encrypted-post/</guid><description>This is an article for testing the page encryption feature</description><pubDate>Mon, 15 Jan 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;This blog template is built with &lt;a href=&quot;https://astro.build/&quot; target=&quot;_blank&quot;&gt;Astro&lt;/a&gt;. For the things that are not mentioned in this guide, you may find the answers in the &lt;a href=&quot;https://docs.astro.build/&quot; target=&quot;_blank&quot;&gt;Astro Docs&lt;/a&gt;.&lt;/p&gt;
&lt;section&gt;&lt;h2&gt;Front-matter of Posts&lt;a href=&quot;#front-matter-of-posts&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;My First Blog Post&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;published&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2023-09-09&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;description&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;This is the first post of my new Astro blog.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;/src/assets/images/cover.avif&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;tags&lt;/span&gt;&lt;span&gt;: [&lt;/span&gt;&lt;span&gt;Foo&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;Bar&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;category&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;Front-end&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;draft&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;false&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;




































































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Attribute&lt;/th&gt;&lt;th&gt;Description&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;title&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The title of the post.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;published&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The date the post was published.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;pinned&lt;/code&gt;&lt;/td&gt;&lt;td&gt;Whether this post is pinned to the top of the post list.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;description&lt;/code&gt;&lt;/td&gt;&lt;td&gt;A short description of the post. Displayed on index page.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;image&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The cover image path of the post.&lt;br /&gt;1. Start with &lt;code&gt;http://&lt;/code&gt; or &lt;code&gt;https://&lt;/code&gt;: Use web image&lt;br /&gt;2. Start with &lt;code&gt;/&lt;/code&gt;: For image in &lt;code&gt;public&lt;/code&gt; dir&lt;br /&gt;3. With none of the prefixes: Relative to the markdown file&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;tags&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The tags of the post.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;category&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The category of the post.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;alias&lt;/code&gt;&lt;/td&gt;&lt;td&gt;alias for the post. The post will be accessible at &lt;code&gt;/posts/{alias}/&lt;/code&gt;. Example: &lt;code&gt;my-special-article&lt;/code&gt; (will be available at &lt;code&gt;/posts/my-special-article/&lt;/code&gt;)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;licenseName&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The license name for the post content.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;author&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The author of the post.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;sourceLink&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The source link or reference for the post content.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;draft&lt;/code&gt;&lt;/td&gt;&lt;td&gt;If this post is still a draft, which won’t be displayed.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;encrypted&lt;/code&gt;&lt;/td&gt;&lt;td&gt;Whether this post is password protected.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;password&lt;/code&gt;&lt;/td&gt;&lt;td&gt;The password to unlock the encrypted post.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;passwordHint&lt;/code&gt;&lt;/td&gt;&lt;td&gt;A hint to help users remember the password. Displayed below the password input.&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;Where to Place the Post Files&lt;a href=&quot;#where-to-place-the-post-files&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Your post files should be placed in &lt;code&gt;src/content/posts/&lt;/code&gt; directory. You can also create sub-directories to better organize your posts and assets.&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;src/content/posts/&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── post-1.md&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;└── post-2/&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;├── cover.png&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;└── index.md&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;Posts alias&lt;a href=&quot;#posts-alias&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;You can set a alias for any post by adding the &lt;code&gt;alias&lt;/code&gt; field to the front-matter:&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;My Special Article&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;published&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2024-01-15&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;alias&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;my-special-article&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;tags&lt;/span&gt;&lt;span&gt;: [&lt;/span&gt;&lt;span&gt;&quot;Example&quot;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;category&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;Technology&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;When a alias is set:&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;The post will be accessible at the custom URL (e.g., &lt;code&gt;/posts/my-special-article/&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;The default &lt;code&gt;/posts/{slug}/&lt;/code&gt; URL will still work&lt;/li&gt;
&lt;li&gt;RSS/Atom feeds will use the custom alias&lt;/li&gt;
&lt;li&gt;All internal links will automatically use the custom alias&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;strong&gt;Important Notes:&lt;/strong&gt;&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;Alias should NOT include &lt;code&gt;/posts/&lt;/code&gt; prefix (it will be added automatically)&lt;/li&gt;
&lt;li&gt;Avoid special characters and spaces in alias&lt;/li&gt;
&lt;li&gt;Use lowercase letters and hyphens for best SEO practices&lt;/li&gt;
&lt;li&gt;Make sure alias are unique across all posts&lt;/li&gt;
&lt;li&gt;Don’t include leading or trailing slashes&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;How It Works&lt;a href=&quot;#how-it-works&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;graph LR
    A[User Password] --&amp;gt; B[Direct AES Decryption]
    B --&amp;gt; C{Check Prefix?}
    C -- &quot;MIZUKI-VERIFY:&quot; found --&amp;gt; D[Success: Render Content]
    C -- Random/Garbage --&amp;gt; E[Fail: Wrong Password]&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;Page Encryption&lt;a href=&quot;#page-encryption&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;You can password protect any post by setting &lt;code&gt;encrypted: true&lt;/code&gt; and providing a &lt;code&gt;password&lt;/code&gt; in the front-matter:&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;My Private Post&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;published&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2024-01-15&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;encrypted&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;password&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;my-secret-password&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;passwordHint&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;Hint: The password is my dog&apos;s name&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;section&gt;&lt;h3&gt;Fields&lt;a href=&quot;#fields&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;
























&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Field&lt;/th&gt;&lt;th&gt;Required&lt;/th&gt;&lt;th&gt;Description&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;encrypted&lt;/code&gt;&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Set to &lt;code&gt;true&lt;/code&gt; to enable password protection&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;password&lt;/code&gt;&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;The password to unlock the post&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;passwordHint&lt;/code&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;A hint displayed below the password input to help users&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;How the Unlock Box Looks&lt;a href=&quot;#how-the-unlock-box-looks&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;The unlock box displays:&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;A lock icon in the theme’s primary color&lt;/li&gt;
&lt;li&gt;The post title “Password Protected”&lt;/li&gt;
&lt;li&gt;A description asking for the password&lt;/li&gt;
&lt;li&gt;A hint (if &lt;code&gt;passwordHint&lt;/code&gt; is provided)&lt;/li&gt;
&lt;li&gt;A password input field and unlock button&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;After entering the correct password, the content is decrypted and displayed. The password is stored in session storage so users don’t need to re-enter it on subsequent page loads within the same session.&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>闲暇之余写篇文章</title><link>https://zuelhhb.top/posts/mrbin/2023-11-29-58/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2023-11-29-58/</guid><description>额，不知是什么原因，突然就想写篇文章。 想了一下，就从对未来的规划写起吧。学习，生活，以及这个网站。 明年四月份，我要去蓝桥杯试试水，周围很多人都劝我别报，ACM大佬，竞赛的都来这条赛道上了。作为一名零基础，零竞赛的小白想要从中脱颖而出，这个寒假就要开始踏踏实实地学了。 目标C+</description><pubDate>Wed, 29 Nov 2023 05:06:14 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span&gt;额，不知是什么原因，突然就想写篇文章。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;想了一下，就从对未来的规划写起吧。学习，生活，以及这个网站。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;明年四月份，我要去蓝桥杯试试水，周围很多人都劝我别报，ACM大佬，竞赛的都来这条赛道上了。作为一名零基础，零竞赛的小白想要从中脱颖而出，这个寒假就要开始踏踏实实地学了。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;目标C++ A组省三。含金量不高，但对我来说只是想要有一个好的起点。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;不得也没事，就像SHOWMAKER所说的：失败总是贯穿人生始终~&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;对于学习，我总感觉自己提不起劲来，上课总在玩手机，一直走神，还有一个月就要期考了，收收心吧，去图书馆奋斗ing。。。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;这个网站，一开始建其实只是偶然，想要跟跟风，但经历了这一个多月，不断从失败中走出，内心也有了要把这个网站维护好的决心。毕竟这是我的心血啊&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;但我还是没想好这个网站要做什么，是我的一个心灵树洞？是分享资源给大众的一个网站？亦或是改造成做题刷题交流的网站？有太多路可以选择了。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;所以我目前想把它搞成一个综合性网站，什么都有的那种，听上去确实很不现实，走一步看一步吧&lt;/span&gt;&lt;/p&gt;</content:encoded></item><item><title>迟来的祝李哥四冠</title><link>https://zuelhhb.top/posts/mrbin/2023-11-22-48/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2023-11-22-48/</guid><description>2023年11月19日，这是一个值得所有LOLer记住的日子 就在这一天，FAKER达成了他的四冠成就，前无古人，后无来者。 正如赛前宣传片所说的，S6的他，只是为了自己的高度而取得冠军，7年下山之路，让他重新认识了自己。S13的FAKER，要为队友夺下属于他们的冠军。 LPL:</description><pubDate>Wed, 22 Nov 2023 04:50:48 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span&gt;    2023年11月19日，这是一个值得所有LOLer记住的日子&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;    就在这一天，FAKER达成了他的四冠成就，前无古人，后无来者。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;    正如赛前宣传片所说的，S6的他，只是为了自己的高度而取得冠军，7年下山之路，让他重新认识了自己。S13的FAKER，要为队友夺下属于他们的冠军。&lt;/span&gt;&lt;/p&gt;
&lt;img src=&quot;/assets/mrbin/uploads/post-48-01.png&quot; alt=&quot;&quot; width=&quot;300&quot; height=&quot;147&quot; /&gt;
&lt;p&gt;LPL&lt;span&gt;1 1：11 是给你这几年戒骄戒躁，砥砺前行的奖励&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;    你的终点还未结束&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;    你是大魔王，大飞，飞老狗，更是山顶上的无上之神&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;    在老一辈LOLer眼中，你更是听到FAKER这个名字就让人闻风丧胆的存在&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;    十年抗韩，抗的是SKT,是T1，更是李相赫&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;    作为一名老玩家，我不是任何战队的粉丝&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;    在今天，我只想为你庆祝&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;    希望你把这游戏带向新高度，让世人看看&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;    这永不言弃的精神！&lt;/span&gt;&lt;/p&gt;
&lt;img src=&quot;/assets/mrbin/uploads/post-48-02.png&quot; alt=&quot;&quot; width=&quot;300&quot; height=&quot;146&quot; /&gt;</content:encoded></item><item><title>总算正常了</title><link>https://zuelhhb.top/posts/mrbin/2023-11-18-18/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2023-11-18-18/</guid><description>这几天建站下来我是身心俱疲啊... 自己一个电脑小白，妄想和大佬一样速成，还是太难为自己了... 这几天遇到的麻烦太多，不由得感慨： 1、网站三次无法连接数据库。删删减减发现还是没卵用，最后只能再买一个实例了== 好在阿里云最近又在搞活动，99元送了我一个一年的服务器（最重要的是</description><pubDate>Fri, 17 Nov 2023 19:22:01 GMT</pubDate><content:encoded>&lt;p&gt;这几天建站下来我是身心俱疲啊...&lt;/p&gt;
&lt;p&gt;自己一个电脑小白，妄想和大佬一样速成，还是太难为自己了...&lt;/p&gt;
&lt;p&gt;这几天遇到的麻烦太多，不由得感慨：&lt;/p&gt;
&lt;p&gt;1、网站三次无法连接数据库。删删减减发现还是没卵用，最后只能再买一个实例了==  好在阿里云最近又在搞活动，99元送了我一个一年的服务器（最重要的是配置比我200+买的还要好，于是怒而退款）&lt;/p&gt;
&lt;p&gt;2、B站上的教程真的是非常非常有用，对我这种干什么都要出问题的新手来说简直不要太友好，附上链接送给同样想要自建网站的朋友们~                                            https://www.bilibili.com/video/BV1Vg411w7os?p=1&amp;amp;vd_source=3f5a8785a0825ec45e3bd34e3437f81e&lt;/p&gt;
&lt;p&gt;3、大学生活真的很忙碌，对于我们这种一周要上十八大节课的计算机人来说更是生不如死O.o 但我还是会找时间更新的，谁让我就是热爱这狗屎专业呢（笑）&lt;/p&gt;
&lt;p&gt;大学生活3.0——堂堂连载！&lt;/p&gt;
&lt;figure&gt;&lt;img src=&quot;/assets/mrbin/uploads/post-18-01.jpg&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;</content:encoded></item><item><title>使用正则表达式和文件操作爬取并保存“某吧”某帖子全部内容（该帖不少于5页)</title><link>https://zuelhhb.top/posts/mrbin/2023-11-18-15/</link><guid isPermaLink="true">https://zuelhhb.top/posts/mrbin/2023-11-18-15/</guid><description>本次选取的是某吧中的抗压背锅吧中的一篇帖子,帖子标题是“faker 你要毁了lpl么？”。爬取的目标是帖子里面的回复内容。 PYTHON代码如下： import csv import requests import re import time def main(page): u</description><pubDate>Fri, 17 Nov 2023 19:09:03 GMT</pubDate><content:encoded>&lt;p&gt;本次选取的是某吧中的抗压背锅吧中的一篇帖子,帖子标题是“faker 你要毁了lpl么？”。爬取的目标是帖子里面的回复内容。&lt;/p&gt;
&lt;p&gt;PYTHON代码如下：&lt;/p&gt;
&lt;div&gt;
&lt;pre&gt;import csv&lt;br /&gt;import requests&lt;br /&gt;import re&lt;br /&gt;import time&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;def main(page):&lt;br /&gt;    url = f&apos;https://tieba.baidu.com/p/8713988388?pn={page}&apos;&lt;br /&gt;    headers = {&lt;br /&gt;        &apos;User-Agent&apos;: &apos;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36&apos;&lt;br /&gt;    }&lt;br /&gt;    resp = requests.get(url, headers=headers)&lt;br /&gt;    html = resp.text&lt;br /&gt;    # 评论内容&lt;br /&gt;    comments = re.findall(&apos;style=&quot;display:;&quot;&amp;gt;                    (.*?)&amp;lt;/div&amp;gt;&apos;, html)&lt;br /&gt;    # 评论用户&lt;br /&gt;    users = re.findall(&apos;class=&quot;p_author_name j_user_card&quot; href=&quot;.*?&quot; target=&quot;_blank&quot;&amp;gt;(.*?)&amp;lt;/a&amp;gt;&apos;, html)&lt;br /&gt;    # 评论时间&lt;br /&gt;    comment_times = re.findall(&apos;楼&amp;lt;/span&amp;gt;&amp;lt;span class=&quot;tail-info&quot;&amp;gt;(.*?)&amp;lt;/span&amp;gt;&amp;lt;div&apos;, html)&lt;br /&gt;    for u, c, t in zip(users, comments, comment_times):&lt;br /&gt;        # 筛选数据,过滤掉异常数据&lt;br /&gt;        if &apos;img&apos; in c or &apos;div&apos; in c or len(u) &amp;gt; 50:&lt;br /&gt;            continue&lt;br /&gt;        csvwriter.writerow((u, t, c))&lt;br /&gt;        print(u, t, c)&lt;br /&gt;    print(f&apos;第{page}页爬取完毕&apos;)&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;if __name__ == &apos;__main__&apos;:&lt;br /&gt;    with open(&apos;01.csv&apos;, &apos;a&apos;, encoding=&apos;utf-8&apos;) as f:&lt;br /&gt;        csvwriter = csv.writer(f)&lt;br /&gt;        csvwriter.writerow((&apos;评论用户&apos;, &apos;评论时间&apos;, &apos;评论内容&apos;))&lt;br /&gt;        for page in range(1, 8):  # 爬取前7页的内容&lt;br /&gt;            main(page)&lt;br /&gt;            time.sleep(2)&lt;/pre&gt;
&lt;/div&gt;
&lt;p&gt;爬取效果如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;D:\study\venv\Scripts\python.exe D:\study\main.py 
船只线饲mu 2023-11-12 19:56 ？疯掉啦
24小时都在想女人 2023-11-12 19:56 现在是幻想时间
第1页爬取完毕
KaspaStar 2023-11-12 19:58 ？
贴吧用户_5G3KU9P 2023-11-12 19:58 369团战比不过对线也打不过选的英雄还不会玩抽象
让我试试 2023-11-12 19:58 别指望我们四号种子，我们就是个混的，一号种子跟真实力二号种子都没打过。wbg走到现在已经血赚
灰先生😎 2023-11-12 20:01 t1挂机一个微博都赢不了
绝望的患者 2023-11-12 20:01 现在是幻想时间
何必强颜欢笑o0 2023-11-12 20:02 梦里啥都有
风不解风情 2023-11-12 20:03 灯神，带大伙登神吧
世事终无常 2023-11-12 20:03 好好好
第2页爬取完毕
贴吧用户_Q4WUSAE 2023-11-12 20:04 闹麻了。
s7的捆仙绳还给你 2023-11-12 20:04 现在是幻想时间
单车少年钱伯斯 2023-11-12 20:04 卡萨呢，不给卡萨混个皮肤？
幼儿园吃糖高手 2023-11-12 20:08 炸饺消音消画打胎嫖娼赌博假赛老赖铜牌赛区，跪下！
键盘战神 2023-11-12 20:10 太讽刺了，顶级晒黑的我要开始支持wbg了😭，晒哥五年前你给LPL带来了光明，这次，再拯救一次LPL吧😭
第3页爬取完毕
😶😑😐 2023-11-12 20:10 不是T1 3-0 WBG？
流汗且黄豆69 2023-11-12 20:12 怎么，你也有原神哥当辅助？
大吼并扑向 2023-11-12 20:12 意淫赛区配意淫粉丝，合理
贴贴哎 2023-11-12 20:12 恭喜wbg，第二个drx！！！
favoritejkgirl 2023-11-12 20:12 做梦是吧
贴贴哎 2023-11-12 20:12 第二个龙叉？！
Marisa038 2023-11-12 20:13 嚯嚯嚯，杂交队又开始YY了
Luccen- 2023-11-12 20:14 现在是，______
第4页爬取完毕
憨态老司机 2023-11-12 20:17 不被3:0就算成功
error 0 2023-11-12 20:18 经典提前开香槟
他想吃酱油炒饭 2023-11-12 20:19 牛
犬子星期天 2023-11-12 20:22 滚旦
深爱着我自己 2023-11-12 20:24 好好好，今天开始我也是js了，啃t1🧠，啃t1水晶，啃t1野区，我啃啃啃啃啃啃啃啃啃啃。
贴吧用户_Q6VP193 2023-11-12 20:24 6666
第5页爬取完毕
浮世英壽 2023-11-12 20:30 幽默
Minatozakii 2023-11-12 20:31 我突然释怀的笑
橘子sss 2023-11-12 20:36 啊？这是。。。
dailylife09 2023-11-12 20:37 寄咯
可爱的无双君王 2023-11-12 20:37 哈哈哈，好好好，顶级，乐死我了
第6页爬取完毕
只喝百事的可乐 2023-11-12 20:41 哥们喝大了，还是GSL串疯了？
还有高手. 2023-11-12 20:41 幽默
我才不爱saber 2023-11-12 20:41 现在是做梦环境
白天都不 2023-11-12 20:43 现在是幻想时间
Tl-Faker 2023-11-12 20:45 癔症了
第7页爬取完毕

Process finished with exit code 0&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;第一次进行这种大操作，感觉是真的烧脑。。。&lt;/p&gt;
&lt;p&gt;但当自己真正完成的那一瞬间，内心便会得到极大满足~&lt;/p&gt;
&lt;p&gt;最后私心提前庆祝FAKER四冠~&lt;/p&gt;
&lt;figure&gt;&lt;img src=&quot;/assets/mrbin/uploads/post-15-01.webp&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;</content:encoded></item><item><title>Include Video in the Posts</title><link>https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/video/</link><guid isPermaLink="true">https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/video/</guid><description>This post demonstrates how to include embedded video in a blog post.</description><pubDate>Mon, 01 Aug 2022 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;Include Video in the Post&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;published&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2023-10-19&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// ...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;iframe width=&quot;100%&quot; height=&quot;468&quot; src=&quot;https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allowfullscreen&amp;gt;&amp;lt;/iframe&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;section&gt;&lt;h2&gt;YouTube&lt;a href=&quot;#youtube&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;Bilibili&lt;a href=&quot;#bilibili&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt; &lt;/section&gt;</content:encoded></item><item><title>MDX 格式文章示例</title><link>https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/mdx-example/</link><guid isPermaLink="true">https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/mdx-example/</guid><description>这是一个 MDX 格式的示例文章，展示了如何在 Markdown 中使用 JSX。</description><pubDate>Fri, 02 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;Tip&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;p&gt;&lt;a href=&quot;https://github.com/CuteLeaf/Firefly&quot; target=&quot;_blank&quot;&gt;Firefly&lt;/a&gt; 支持 &lt;code&gt;MDX&lt;/code&gt; 和 &lt;code&gt;Markdown&lt;/code&gt; 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
&lt;section&gt;&lt;h2&gt;Markdown 和 MDX 的区别&lt;a href=&quot;#markdown-和-mdx-的区别&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。&lt;/li&gt;
&lt;li&gt;MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。&lt;/li&gt;
&lt;/ul&gt;


































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;特性&lt;/th&gt;&lt;th&gt;Markdown&lt;/th&gt;&lt;th&gt;MDX&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;基础语法&lt;/td&gt;&lt;td&gt;支持 (CommonMark)&lt;/td&gt;&lt;td&gt;支持 (CommonMark)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;HTML 标签&lt;/td&gt;&lt;td&gt;支持&lt;/td&gt;&lt;td&gt;支持 (作为 JSX)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;组件导入&lt;/td&gt;&lt;td&gt;不支持&lt;/td&gt;&lt;td&gt;支持 (import)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;动态数据&lt;/td&gt;&lt;td&gt;不支持&lt;/td&gt;&lt;td&gt;支持 (JS 表达式)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;样式定制&lt;/td&gt;&lt;td&gt;有限 (class/style)&lt;/td&gt;&lt;td&gt;灵活 (className/CSS-in-JS)&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;使用组件&lt;a href=&quot;#使用组件&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这是一个图标组件：&lt;/p&gt;&lt;pre&gt;&lt;code&gt;import { Icon } from &apos;astro-icon/components&apos;

&amp;lt;div class=&quot;flex items-center gap-2 my-4&quot;&amp;gt;
  &amp;lt;Icon name=&quot;fa7-solid:rocket&quot; class=&quot;text-4xl text-red-500&quot; /&amp;gt;
  &amp;lt;span&amp;gt;火箭发射！&amp;lt;/span&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;     &lt;span&gt;火箭发射！&lt;/span&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;使用 JSX&lt;a href=&quot;#使用-jsx&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;你也可以直接写 HTML/JSX：&lt;/p&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;div className=&quot;p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4&quot;&amp;gt;
  这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;p&gt;这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。&lt;/p&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;简单的变量导出&lt;a href=&quot;#简单的变量导出&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;pre&gt;&lt;code&gt;export const year = new Date().getFullYear()

今年是 {year} 年。
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;今年是 2026 年。&lt;/p&gt;&lt;p&gt;更多信息，请查看 &lt;a href=&quot;https://mdxjs.com/&quot; target=&quot;_blank&quot;&gt;MDX 文档&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;</content:encoded></item><item><title>Markdown 扩展功能</title><link>https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/markdown-extended/</link><guid isPermaLink="true">https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/markdown-extended/</guid><description>了解 Firefly 中的 Markdown 功能</description><pubDate>Thu, 01 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h2&gt;GitHub 仓库卡片&lt;a href=&quot;#github-仓库卡片&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;您可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 获取。&lt;/p&gt;&lt;a href=&quot;https://github.com/CuteLeaf/Firefly&quot; target=&quot;_blank&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;CuteLeaf&lt;/div&gt;&lt;/div&gt;&lt;div&gt;/&lt;/div&gt;&lt;div&gt;Firefly&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;Waiting for api.github.com...&lt;/div&gt;&lt;div&gt;&lt;div&gt;00K&lt;/div&gt;&lt;div&gt;0K&lt;/div&gt;&lt;div&gt;0K&lt;/div&gt;&lt;span&gt;Waiting...&lt;/span&gt;&lt;/div&gt;&lt;/a&gt;&lt;p&gt;使用代码 &lt;code&gt;::github{repo=&quot;CuteLeaf/Firefly&quot;}&lt;/code&gt; 创建 GitHub 仓库卡片。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;::github{repo=&quot;CuteLeaf/Firefly&quot;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;提醒框(Admonitions)配置&lt;a href=&quot;#提醒框admonitions配置&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Firefly 采用了 &lt;a href=&quot;https://github.com/lin-stephanie/rehype-callouts&quot; target=&quot;_blank&quot;&gt;rehype-callouts&lt;/a&gt; 插件，支持了四种风格的提醒框主题：&lt;code&gt;GitHub&lt;/code&gt;、&lt;code&gt;Obsidian&lt;/code&gt;、&lt;code&gt;VitePress&lt;/code&gt; 和 &lt;code&gt;Docusaurus&lt;/code&gt;。您可以在 &lt;code&gt;src/config/siteConfig.ts&lt;/code&gt; 中进行配置：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;src/config/siteConfig.ts&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;siteConfig&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;SiteConfig&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;// ...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;rehypeCallouts&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;// 选项: &quot;github&quot; | &quot;obsidian&quot; | &quot;vitepress&quot; | &quot;docusaurus&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;theme&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;github&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;// ...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;};&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;注意：&lt;strong&gt;更改配置后需要重启开发服务器才能生效。&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;以下是各个主题支持的类型列表，每个主题风格和语法不同，可根据喜好选择。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;1. GitHub 主题风格&lt;a href=&quot;#1-github-主题风格&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;这是 GitHub 官方支持的 5 种基本类型。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; width=&quot;2144&quot; height=&quot;1086&quot; src=&quot;/_astro/github.urcbElKG_Z1bC9wS.webp&quot; /&gt;&lt;figcaption&gt;GitHub&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;基本语法&lt;/strong&gt;&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!NOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; NOTE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 突出显示用户应该考虑的信息。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TIP&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; TIP&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 可选信息，帮助用户更成功。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!IMPORTANT&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; IMPORTANT&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 用户成功所必需的关键信息。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!WARNING&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; WARNING&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 关键内容，需要立即注意。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!CAUTION&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; CAUTION&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 行动的负面潜在后果。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!NOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; 自定义标题&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 这是一个带有自定义标题的示例。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2. Obsidian 主题风格&lt;a href=&quot;#2-obsidian-主题风格&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;a href=&quot;https://obsidian.md/&quot; target=&quot;_blank&quot;&gt;Obsidian&lt;/a&gt; 风格支持非常丰富的类型和别名。&lt;/p&gt;
点击展开 Obsidian 语法列表&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!NOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; NOTE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 通用的笔记块。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!ABSTRACT&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; ABSTRACT&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 文章的摘要。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!SUMMARY&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; SUMMARY&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 文章的总结（同 Abstract）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TLDR&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; TLDR&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 太长不看（同 Abstract）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!INFO&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; INFO&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 提供额外信息。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TODO&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; TODO&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 需要完成的事项。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TIP&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; TIP&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 实用技巧或提示。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!HINT&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; HINT&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 暗示（同 Tip）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;25&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!IMPORTANT&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; IMPORTANT&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;26&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 重要信息（Obsidian 风格通常使用类似的图标）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;27&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;28&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!SUCCESS&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; SUCCESS&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;29&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 操作成功。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;30&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;31&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!CHECK&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; CHECK&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;32&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 检查通过（同 Success）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;33&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;34&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!DONE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; DONE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;35&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 已完成（同 Success）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;36&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;37&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!QUESTION&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; QUESTION&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;38&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 提出问题。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;39&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;40&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!HELP&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; HELP&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;41&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 寻求帮助（同 Question）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;42&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;43&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!FAQ&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; FAQ&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;44&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 常见问题（同 Question）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;45&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;46&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!WARNING&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; WARNING&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;47&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 警告信息。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;48&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;49&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!CAUTION&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; CAUTION&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;50&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 注意事项（同 Warning）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;51&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;52&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!ATTENTION&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; ATTENTION&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;53&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 引起注意（同 Warning）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;54&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;55&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!FAILURE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; FAILURE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;56&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 操作失败。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;57&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;58&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!FAIL&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; FAIL&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;59&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 失败（同 Failure）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;60&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;61&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!MISSING&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; MISSING&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;62&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 缺失内容（同 Failure）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;63&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;64&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!DANGER&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; DANGER&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;65&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 危险操作警告。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;66&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;67&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!ERROR&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; ERROR&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;68&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 错误信息（同 Danger）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;69&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;70&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!BUG&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; BUG&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;71&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 报告软件缺陷。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;72&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;73&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!EXAMPLE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; EXAMPLE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;74&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 展示一个例子。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;75&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;76&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!QUOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; QUOTE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;77&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 引用一段话。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;78&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;79&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!CITE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; CITE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;80&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 引证（同 Quote）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;81&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;82&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!NOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; 自定义标题&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;83&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 这是一个带有自定义标题的示例。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; width=&quot;2144&quot; height=&quot;1320&quot; src=&quot;/_astro/obsidian.Cwb2iYzd_1I7Wom.webp&quot; /&gt;&lt;figcaption&gt;Obsidian&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;3. VitePress 主题风格&lt;a href=&quot;#3-vitepress-主题风格&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;a href=&quot;https://vitepress.dev/&quot; target=&quot;_blank&quot;&gt;VitePress&lt;/a&gt; 风格提供了一套现代化的、扁平的默认样式。目前仅包含与 GitHub 一致的 &lt;strong&gt;5 种&lt;/strong&gt; 基础类型。&lt;/p&gt;
点击展开 VitePress 语法列表&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!NOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; NOTE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 对应 GitHub 的 Note。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TIP&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; TIP&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 对应 GitHub 的 Tip。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!IMPORTANT&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; IMPORTANT&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 对应 GitHub 的 Important。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!WARNING&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; WARNING&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 对应 GitHub 的 Warning。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!CAUTION&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; CAUTION&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 对应 GitHub 的 Caution。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TIP&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; 自定义标题&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; VitePress 风格同样支持自定义标题。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; width=&quot;2144&quot; height=&quot;1318&quot; src=&quot;/_astro/vitepress.D2YnjBWE_Z1rUl1H.webp&quot; /&gt;&lt;figcaption&gt;VitePress&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;4. Docusaurus 主题风格&lt;a href=&quot;#4-docusaurus-主题风格&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;a href=&quot;https://docusaurus.io/docs/markdown-features/admonitions&quot; target=&quot;_blank&quot;&gt;Docusaurus&lt;/a&gt; 风格提供了一套现代化的提醒框样式，支持 5 种类型。&lt;/p&gt;
点击展开 Docusaurus 语法列表 &lt;p&gt;支持以下类型的提醒框：&lt;code&gt;note&lt;/code&gt; &lt;code&gt;tip&lt;/code&gt; &lt;code&gt;info&lt;/code&gt; &lt;code&gt;warning&lt;/code&gt; &lt;code&gt;danger&lt;/code&gt;&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::note&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;突出显示用户应该考虑的信息，即使在快速浏览时也是如此。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::tip&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;可选信息，帮助用户更成功。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::info&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;一般信息。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::warning&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;由于潜在风险需要用户立即注意的关键内容。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::danger&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;行动的负面潜在后果。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::tip&lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;自定义标题&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;可选信息，帮助用户更成功。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; width=&quot;2158&quot; height=&quot;1394&quot; src=&quot;/_astro/docusaurus.Cu-On_k2_Zy4rHX.webp&quot; /&gt;&lt;figcaption&gt;Docusaurus&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;剧透&lt;a href=&quot;#剧透&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;您可以为文本添加剧透。文本也支持 &lt;strong&gt;Markdown&lt;/strong&gt; 语法。&lt;/p&gt;&lt;p&gt;内容 被隐藏了 &lt;strong&gt;哈哈&lt;/strong&gt;！&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;内容 :spoiler[被隐藏了 &lt;/span&gt;&lt;span&gt;**哈哈**&lt;/span&gt;&lt;span&gt;]！&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;图片画廊网格 (Image Grid)&lt;a href=&quot;#图片画廊网格-image-grid&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;您可以使用 &lt;code&gt;[grid]&lt;/code&gt; 和 &lt;code&gt;[/grid]&lt;/code&gt; 标签将多张图片纵向并排展示。这对于展示照片画廊或对比图非常有用。系统会自动根据包裹在其中的图片数量（最多支持并排展示4张）以响应式网格进行布局。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;自动补齐图片高度：&lt;/strong&gt; 同一排中如果有高度、大小或者比例不一的图片，会像「九宫格画廊相册」一样自动撑满。较短或不协调的图片会自动使用 object-cover 进行完美中心裁剪补充视野。图片边框水平彻底对齐无缝隙，但被裁剪后，只有点击图片通过灯箱才能查看完整图片，所以建议尽量避免使用长宽比例不一致的图片在同一排中。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;图注恒定底端对齐：&lt;/strong&gt; 不论上面的图片长宽如何变化，在同一行的所有图像解释文字（图注）都会对标到一条完美的水平基线上了。&lt;/p&gt;&lt;p&gt;[grid]
&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; width=&quot;3328&quot; height=&quot;1872&quot; src=&quot;/_astro/firefly1.CZCuCN4V_1dgNYg.webp&quot; /&gt;&lt;figcaption&gt;示例图片一&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; width=&quot;4096&quot; height=&quot;2212&quot; src=&quot;/_astro/firefly2.dxmXG905_ZyJm5m.webp&quot; /&gt;&lt;figcaption&gt;示例图片二&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure&gt;&lt;img alt=&quot;&quot; loading=&quot;lazy&quot; width=&quot;3840&quot; height=&quot;2160&quot; src=&quot;/_astro/firefly3.CGzFXcxi_Z1Lz6q8.webp&quot; /&gt;&lt;figcaption&gt;示例图片二&lt;/figcaption&gt;&lt;/figure&gt;
[/grid]&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;基本语法&lt;/strong&gt;&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;grid&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![&lt;/span&gt;&lt;span&gt;示例图片一&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;../images/firefly1.avif&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![&lt;/span&gt;&lt;span&gt;示例图片二&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;../images/firefly2.avif&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![&lt;/span&gt;&lt;span&gt;示例图片二&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;../images/firefly3.avif&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;/grid&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;</content:encoded></item><item><title>Markdown Mermaid 图表</title><link>https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/markdown-mermaid/</link><guid isPermaLink="true">https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/markdown-mermaid/</guid><description>一个包含 Mermaid 的 Markdown 博客文章简单示例。</description><pubDate>Thu, 01 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h2&gt;Markdown 中 Mermaid 图表完整指南&lt;a href=&quot;#markdown-中-mermaid-图表完整指南&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;本文演示如何在 Markdown 文档中使用 Mermaid 创建各种复杂图表，包括流程图、时序图、甘特图、类图和状态图。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;流程图示例&lt;a href=&quot;#流程图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;流程图非常适合表示流程或算法步骤。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;graph TD
    A[开始] --&amp;gt; B{条件检查}
    B --&amp;gt;|是| C[处理步骤 1]
    B --&amp;gt;|否| D[处理步骤 2]
    C --&amp;gt; E[子过程]
    D --&amp;gt; E
    subgraph E [子过程详情]
        E1[子步骤 1] --&amp;gt; E2[子步骤 2]
        E2 --&amp;gt; E3[子步骤 3]
    end
    E --&amp;gt; F{另一个决策}
    F --&amp;gt;|选项 1| G[结果 1]
    F --&amp;gt;|选项 2| H[结果 2]
    F --&amp;gt;|选项 3| I[结果 3]
    G --&amp;gt; J[结束]
    H --&amp;gt; J
    I --&amp;gt; J&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;时序图示例&lt;a href=&quot;#时序图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;时序图显示对象之间随时间的交互。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;sequenceDiagram
    participant User as 用户
    participant WebApp as 网页应用
    participant Server as 服务器
    participant Database as 数据库

    User-&amp;gt;&amp;gt;WebApp: 提交登录请求
    WebApp-&amp;gt;&amp;gt;Server: 发送认证请求
    Server-&amp;gt;&amp;gt;Database: 查询用户凭据
    Database--&amp;gt;&amp;gt;Server: 返回用户数据
    Server--&amp;gt;&amp;gt;WebApp: 返回认证结果
    
    alt 认证成功
        WebApp-&amp;gt;&amp;gt;User: 显示欢迎页面
        WebApp-&amp;gt;&amp;gt;Server: 请求用户数据
        Server-&amp;gt;&amp;gt;Database: 获取用户偏好
        Database--&amp;gt;&amp;gt;Server: 返回偏好设置
        Server--&amp;gt;&amp;gt;WebApp: 返回用户数据
        WebApp-&amp;gt;&amp;gt;User: 加载个性化界面
    else 认证失败
        WebApp-&amp;gt;&amp;gt;User: 显示错误消息
        WebApp-&amp;gt;&amp;gt;User: 提示重新输入
    end&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;甘特图示例&lt;a href=&quot;#甘特图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;甘特图非常适合显示项目进度和时间线。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;gantt
    title 网站开发项目时间线
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    
    section 设计阶段
    需求分析      :a1, 2023-10-01, 7d
    UI设计                 :a2, after a1, 10d
    原型创建        :a3, after a2, 5d
    
    section 开发阶段
    前端开发      :b1, 2023-10-20, 15d
    后端开发       :b2, after a2, 18d
    数据库设计           :b3, after a1, 12d
    
    section 测试阶段
    单元测试              :c1, after b1, 8d
    集成测试       :c2, after b2, 10d
    用户验收测试   :c3, after c2, 7d
    
    section 部署
    生产环境部署     :d1, after c3, 3d
    发布                    :milestone, after d1, 0d&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;类图示例&lt;a href=&quot;#类图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;类图显示系统的静态结构，包括类、属性、方法及其关系。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;classDiagram
    class User {
        +String username
        +String password
        +String email
        +Boolean active
        +login()
        +logout()
        +updateProfile()
    }
    
    class Article {
        +String title
        +String content
        +Date publishDate
        +Boolean published
        +publish()
        +edit()
        +delete()
    }
    
    class Comment {
        +String content
        +Date commentDate
        +addComment()
        +deleteComment()
    }
    
    class Category {
        +String name
        +String description
        +addArticle()
        +removeArticle()
    }
    
    User &quot;1&quot; -- &quot;*&quot; Article : 写作
    User &quot;1&quot; -- &quot;*&quot; Comment : 发表
    Article &quot;1&quot; -- &quot;*&quot; Comment : 拥有
    Article &quot;1&quot; -- &quot;*&quot; Category : 属于&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;状态图示例&lt;a href=&quot;#状态图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;状态图显示对象在其生命周期中经历的状态序列。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;stateDiagram-v2
    [*] --&amp;gt; 草稿
    
    草稿 --&amp;gt; 审核中 : 提交
    审核中 --&amp;gt; 草稿 : 拒绝
    审核中 --&amp;gt; 已批准 : 批准
    已批准 --&amp;gt; 已发布 : 发布
    已发布 --&amp;gt; 已归档 : 归档
    已发布 --&amp;gt; 草稿 : 撤回
    
    state 已发布 {
        [*] --&amp;gt; 活跃
        活跃 --&amp;gt; 隐藏 : 临时隐藏
        隐藏 --&amp;gt; 活跃 : 恢复
        活跃 --&amp;gt; [*]
        隐藏 --&amp;gt; [*]
    }
    
    已归档 --&amp;gt; [*]&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;饼图示例&lt;a href=&quot;#饼图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;饼图非常适合显示比例和百分比数据。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;pie title 网站流量来源分析
    &quot;搜索引擎&quot; : 45.6
    &quot;直接访问&quot; : 30.1
    &quot;社交媒体&quot; : 15.3
    &quot;推荐链接&quot; : 6.4
    &quot;其他来源&quot; : 2.6&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;总结&lt;a href=&quot;#总结&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。&lt;/p&gt;&lt;p&gt;要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。Mermaid 会自动将这些描述转换为美观的可视化图表。&lt;/p&gt;&lt;p&gt;尝试在您的下一篇技术博客文章或项目文档中使用 Mermaid 图表 - 它们将使您的内容更加专业且更易理解！&lt;/p&gt;&lt;/section&gt;</content:encoded></item><item><title>Markdown PlantUML 图表</title><link>https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/markdown-plantuml/</link><guid isPermaLink="true">https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/markdown-plantuml/</guid><description>用于验证 Firefly 中 PlantUML 插件渲染、主题切换与交互能力的示例文章。</description><pubDate>Thu, 01 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h2&gt;Markdown 中 PlantUML 图表指南&lt;a href=&quot;#markdown-中-plantuml-图表指南&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;PlantUML 是一种使用纯文本描述图表的工具。你只需要写一段结构化语法，就可以生成时序图、类图、用例图、活动图等常见工程图。&lt;/p&gt;&lt;p&gt;它特别适合写在技术博客和项目文档里：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;图表和正文一起版本管理，便于协作与审阅&lt;/li&gt;
&lt;li&gt;修改图只需要改文本，适合频繁迭代&lt;/li&gt;
&lt;li&gt;能和 Markdown 无缝结合，保持文档统一&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;在 Firefly 中，&lt;code&gt;plantuml&lt;/code&gt; 代码块会在构建阶段编码并生成服务器 SVG 地址，页面端再根据亮暗主题自动切换图源，并支持缩放、拖拽和全屏交互。&lt;/p&gt;&lt;p&gt;如果你想快速上手，可以记住这个最小模板：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@startuml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Alice -&amp;gt; Bob: Hello&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Bob --&amp;gt; Alice: Hi&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@enduml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;活动图示例&lt;a href=&quot;#活动图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@startuml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;start&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:用户提交订单;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;if (库存充足?) then (是)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;:冻结库存;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;:创建支付单;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;if (支付成功?) then (是)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;:生成发货单;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;:通知仓库拣货;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;else (否)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;:取消订单;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;:释放库存;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;endif&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;else (否)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;:提示缺货;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;endif&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;stop&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@enduml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;状态图示例&lt;a href=&quot;#状态图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@startuml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[*] --&amp;gt; 草稿&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;草稿 --&amp;gt; 待审核 : 提交&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;待审核 --&amp;gt; 草稿 : 驳回&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;待审核 --&amp;gt; 已发布 : 审核通过&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;已发布 --&amp;gt; 已归档 : 到期归档&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;已发布 --&amp;gt; 草稿 : 撤回修改&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;state 已发布 {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;[*] --&amp;gt; 可见&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;可见 --&amp;gt; 隐藏 : 手动隐藏&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;隐藏 --&amp;gt; 可见 : 恢复展示&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;已归档 --&amp;gt; [*]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@enduml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;用例图示例&lt;a href=&quot;#用例图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@startuml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;left to right direction&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;actor 游客&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;actor 用户&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;actor 管理员&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;rectangle 博客系统 {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;usecase &quot;浏览文章&quot; as UC1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;usecase &quot;搜索内容&quot; as UC2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;usecase &quot;发表评论&quot; as UC3&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;usecase &quot;点赞收藏&quot; as UC4&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;usecase &quot;审核评论&quot; as UC5&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;usecase &quot;发布文章&quot; as UC6&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;游客 --&amp;gt; UC1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;游客 --&amp;gt; UC2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;用户 --&amp;gt; UC1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;用户 --&amp;gt; UC2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;用户 --&amp;gt; UC3&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;用户 --&amp;gt; UC4&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;管理员 --&amp;gt; UC5&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;管理员 --&amp;gt; UC6&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@enduml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;组件图示例&lt;a href=&quot;#组件图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@startuml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;package &quot;Firefly Site&quot; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;[Astro App] as App&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;[Markdown Parser] as Parser&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;[PlantUML Encoder] as Encoder&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;[Theme Switcher] as Theme&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;[Search Indexer] as Search&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;cloud &quot;PlantUML Server&quot; as PU&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;database &quot;Content Store&quot; as Content&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;App --&amp;gt; Parser : parse markdown&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Parser --&amp;gt; Encoder : encode plantuml blocks&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Encoder --&amp;gt; PU : request svg&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;App --&amp;gt; Theme : switch dark/light src&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;App --&amp;gt; Search : build page index&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Parser --&amp;gt; Content : read posts&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@enduml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;部署图示例&lt;a href=&quot;#部署图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@startuml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;node &quot;User Device&quot; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;artifact &quot;Browser&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;node &quot;CDN / Edge&quot; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;artifact &quot;Static Assets&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;node &quot;Cloudflare Worker&quot; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;artifact &quot;SSR Handler&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;node &quot;PlantUML Service&quot; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;artifact &quot;SVG Renderer&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;database &quot;Object Storage&quot; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;artifact &quot;Markdown Content&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;Browser&quot; --&amp;gt; &quot;Static Assets&quot; : GET js/css/img&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;Browser&quot; --&amp;gt; &quot;SSR Handler&quot; : request page&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;SSR Handler&quot; --&amp;gt; &quot;Markdown Content&quot; : read post&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;25&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;Browser&quot; --&amp;gt; &quot;SVG Renderer&quot; : fetch diagram svg&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;26&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@enduml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;ER 图示例&lt;a href=&quot;#er-图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@startuml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;entity User {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;*id : uuid &amp;lt;&amp;lt;PK&amp;gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;username : varchar&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;email : varchar&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;created_at : datetime&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;entity Post {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;*id : uuid &amp;lt;&amp;lt;PK&amp;gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;author_id : uuid &amp;lt;&amp;lt;FK&amp;gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;title : varchar&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;content : text&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;published_at : datetime&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;entity Comment {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;*id : uuid &amp;lt;&amp;lt;PK&amp;gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;post_id : uuid &amp;lt;&amp;lt;FK&amp;gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;user_id : uuid &amp;lt;&amp;lt;FK&amp;gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;body : text&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;25&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;created_at : datetime&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;26&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;27&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;28&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;User ||--o{ Post : writes&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;29&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;User ||--o{ Comment : creates&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;30&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Post ||--o{ Comment : has&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;31&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@enduml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;时序图示例（登录与刷新令牌）&lt;a href=&quot;#时序图示例登录与刷新令牌&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@startuml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;autonumber&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;actor User as 用户&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;participant Web as 前端页面&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;participant API as 网关接口&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;participant Auth as 认证服务&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;database Redis as 会话缓存&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;用户 -&amp;gt; 前端页面 : 输入账号密码并提交&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;前端页面 -&amp;gt; 网关接口 : POST /login&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;网关接口 -&amp;gt; 认证服务 : 校验凭据&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;认证服务 -&amp;gt; 会话缓存 : 写入 refresh_token&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;认证服务 --&amp;gt; 网关接口 : access_token + refresh_token&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;网关接口 --&amp;gt; 前端页面 : 200 登录成功&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;... access_token 过期 ...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;前端页面 -&amp;gt; 网关接口 : POST /refresh&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;网关接口 -&amp;gt; 认证服务 : 校验 refresh_token&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;认证服务 -&amp;gt; 会话缓存 : 轮换 refresh_token&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;认证服务 --&amp;gt; 网关接口 : 新 access_token&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;网关接口 --&amp;gt; 前端页面 : 200 新令牌&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@enduml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;C4 风格容器图示例&lt;a href=&quot;#c4-风格容器图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@startuml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Person(user, &quot;博客访客&quot;, &quot;阅读文章与搜索内容&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;System_Boundary(system, &quot;Firefly Blog&quot;) {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;Container(web, &quot;Web App&quot;, &quot;Astro + Svelte&quot;, &quot;渲染页面与交互&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;Container(worker, &quot;SSR Worker&quot;, &quot;Cloudflare Workers&quot;, &quot;处理服务端渲染请求&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;ContainerDb(content, &quot;Content Store&quot;, &quot;Markdown / Object Storage&quot;, &quot;存储文章与资源元数据&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;Container(search, &quot;Search Index&quot;, &quot;Pagefind&quot;, &quot;提供全文检索&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;System_Ext(plantuml, &quot;PlantUML Server&quot;, &quot;生成 SVG 图表&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Rel(user, web, &quot;访问&quot;, &quot;HTTPS&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Rel(web, worker, &quot;请求 SSR 页面&quot;, &quot;HTTPS&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Rel(worker, content, &quot;读取文章&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Rel(web, search, &quot;查询关键词&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Rel(web, plantuml, &quot;请求图表 SVG&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;LAYOUT_LEFT_RIGHT()&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@enduml&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;</content:encoded></item><item><title>Markdown 教程</title><link>https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/markdown-tutorial/</link><guid isPermaLink="true">https://zuelhhb.top/posts/%E5%85%B6%E4%BB%96/markdown-tutorial/</guid><description>一个简明的 Markdown 博客示例。</description><pubDate>Thu, 01 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;这是一个展示如何编写 Markdown 文件的示例。本文档汇总了核心语法与常见扩展（GFM）。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#block-elements&quot;&gt;块级元素&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#paragraphs-and-line-breaks&quot;&gt;段落与换行&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#headers&quot;&gt;标题&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#blockquotes&quot;&gt;引用&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#lists&quot;&gt;列表&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#code-blocks&quot;&gt;代码块&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#horizontal-rules&quot;&gt;分割线&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#table&quot;&gt;表格&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#span-elements&quot;&gt;内联元素&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#links&quot;&gt;链接&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#emphasis&quot;&gt;强调&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#code&quot;&gt;行内代码&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#images&quot;&gt;图片&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#strikethrough&quot;&gt;删除线&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#miscellaneous&quot;&gt;杂项&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#automatic-links&quot;&gt;自动链接&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#backslash-escapes&quot;&gt;反斜杠转义&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#inline-html&quot;&gt;内联 HTML&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;
&lt;section&gt;&lt;h2&gt;块级元素&lt;a href=&quot;#块级元素&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;section&gt;&lt;h3&gt;段落与换行&lt;a href=&quot;#段落与换行&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;section&gt;&lt;h4&gt;段落&lt;a href=&quot;#段落&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;使用一个或多个空行分隔段落。（仅包含&lt;strong&gt;空格&lt;/strong&gt;或&lt;strong&gt;制表符&lt;/strong&gt;的行也视为空行。）&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This will be&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;inline.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is second paragraph.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This will be
inline.&lt;/p&gt;&lt;p&gt;This is second paragraph.&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;换行&lt;a href=&quot;#换行&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;br /&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;在行末添加&lt;strong&gt;两个或更多空格&lt;/strong&gt;来产生换行。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This will be not&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;inline.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This will be not&lt;br /&gt;
inline.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;标题&lt;a href=&quot;#标题&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Markdown 支持两种标题样式：Setext 与 atx。&lt;/p&gt;&lt;section&gt;&lt;h4&gt;Setext&lt;a href=&quot;#setext&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;使用&lt;strong&gt;等号 (=)&lt;/strong&gt; 表示 &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;、使用&lt;strong&gt;短横线 (-)&lt;/strong&gt; 表示 &lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;，数量不限，作为“下划线”。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is an H1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;=============&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is an H2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;-------------&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;This is an H1&lt;a href=&quot;#this-is-an-h1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;This is an H2&lt;a href=&quot;#this-is-an-h2&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;hr /&gt;&lt;section&gt;&lt;h4&gt;atx&lt;a href=&quot;#atx&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h3&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h4&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h5&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;在行首使用 1-6 个&lt;strong&gt;井号 (#)&lt;/strong&gt;，对应 &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; 至 &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# This is an H1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;## This is an H2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;###### This is an H6&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;This is an H1&lt;a href=&quot;#this-is-an-h1-1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;This is an H2&lt;a href=&quot;#this-is-an-h2-1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h6&gt;This is an H6&lt;a href=&quot;#this-is-an-h6&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h6&gt;&lt;hr /&gt;&lt;p&gt;可选：你可以在行尾“闭合” atx 标题。末尾的井号数量&lt;strong&gt;不必与&lt;/strong&gt;开头一致。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# This is an H1 #&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;## This is an H2 ##&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;### This is an H3 ######&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;This is an H1&lt;a href=&quot;#this-is-an-h1-2&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;This is an H2&lt;a href=&quot;#this-is-an-h2-2&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;This is an H3&lt;a href=&quot;#this-is-an-h3&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;引用&lt;a href=&quot;#引用&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Markdown 使用邮件风格的 &lt;strong&gt;&amp;gt;&lt;/strong&gt; 作为引用符号。若手动换行并在每行前加 &amp;gt;，显示效果最佳。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; id sem consectetuer libero luctus adipiscing.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;blockquote&gt;&lt;p&gt;This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.&lt;/p&gt;&lt;p&gt;Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.&lt;/p&gt;&lt;/blockquote&gt;&lt;hr /&gt;&lt;p&gt;Markdown 允许“偷懒”：在一个硬换行段落中，只在第一行前加 &amp;gt; 即可。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;id sem consectetuer libero luctus adipiscing.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;blockquote&gt;&lt;p&gt;This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.&lt;/p&gt;&lt;/blockquote&gt;&lt;blockquote&gt;&lt;p&gt;Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.&lt;/p&gt;&lt;/blockquote&gt;&lt;hr /&gt;&lt;p&gt;引用可以嵌套（引用中的引用），通过增加 &amp;gt; 层级实现。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; This is the first level of quoting.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &amp;gt; This is nested blockquote.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Back to the first level.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;blockquote&gt;&lt;p&gt;This is the first level of quoting.&lt;/p&gt;&lt;blockquote&gt;&lt;p&gt;This is nested blockquote.&lt;/p&gt;&lt;/blockquote&gt;&lt;p&gt;Back to the first level.&lt;/p&gt;&lt;/blockquote&gt;&lt;hr /&gt;&lt;p&gt;引用内可包含其他 Markdown 元素，包括标题、列表与代码块。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; ## This is a header.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 1.   This is the first list item.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 2.   This is the second list item.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Here&apos;s some example code:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;     return shell_exec(&quot;echo $input | $markdown_script&quot;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;blockquote&gt;&lt;h2&gt;This is a header.&lt;a href=&quot;#this-is-a-header&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;This is the first list item.&lt;/li&gt;
&lt;li&gt;This is the second list item.&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;Here’s some example code:&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;return shell_exec(&quot;echo $input | $markdown_script&quot;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/blockquote&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;列表&lt;a href=&quot;#列表&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Markdown 支持有序（数字）与无序（圆点）列表。&lt;/p&gt;&lt;section&gt;&lt;h4&gt;无序列表&lt;a href=&quot;#无序列表&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;无序列表可使用 &lt;strong&gt;星号 (*)&lt;/strong&gt;、&lt;strong&gt;加号 (+)&lt;/strong&gt; 或 &lt;strong&gt;短横线 (-)&lt;/strong&gt;。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   Red&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   Green&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   Blue&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ul&gt;
&lt;li&gt;Red&lt;/li&gt;
&lt;li&gt;Green&lt;/li&gt;
&lt;li&gt;Blue&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;p&gt;等价于：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;+   Red&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;+   Green&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;+   Blue&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;或者：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;-   Red&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;-   Green&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;-   Blue&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;有序列表&lt;a href=&quot;#有序列表&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;有序列表使用数字加英文句点：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;1.  Bird&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;2.  McHale&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;3.  Parish&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ol&gt;
&lt;li&gt;Bird&lt;/li&gt;
&lt;li&gt;McHale&lt;/li&gt;
&lt;li&gt;Parish&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;p&gt;注意：像下面这样可能会“意外触发”有序列表：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;1986. What a great season.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ol&gt;
&lt;li&gt;What a great season.&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;p&gt;你可以用&lt;strong&gt;反斜杠转义 (\)&lt;/strong&gt; 句点：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;1986\. What a great season.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;1986. What a great season.&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;列表中的缩进内容&lt;a href=&quot;#列表中的缩进内容&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;section&gt;&lt;h5&gt;列表项里的引用&lt;a href=&quot;#列表项里的引用&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h5&gt;&lt;p&gt;在列表项内放置引用，需要将 &amp;gt; 符号整体缩进：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   A list item with a blockquote:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;gt; This is a blockquote&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;gt; inside a list item.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;A list item with a blockquote:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;This is a blockquote
inside a list item.&lt;/p&gt;&lt;/blockquote&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h5&gt;列表项里的代码块&lt;a href=&quot;#列表项里的代码块&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h5&gt;&lt;p&gt;在列表项内放置代码块，需要缩进两层——&lt;strong&gt;8 个空格&lt;/strong&gt;或&lt;strong&gt;两个 Tab&lt;/strong&gt;：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   A list item with a code block:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;code goes here&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;A list item with a code block:&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;code goes here&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h5&gt;嵌套列表&lt;a href=&quot;#嵌套列表&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h5&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;* A&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;* A1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;* A2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;* B&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;* C&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ul&gt;
&lt;li&gt;A
&lt;ul&gt;
&lt;li&gt;A1&lt;/li&gt;
&lt;li&gt;A2&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;B&lt;/li&gt;
&lt;li&gt;C&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;代码块&lt;a href=&quot;#代码块&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;pre&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;将代码块中的每行缩进至少&lt;strong&gt;4 个空格&lt;/strong&gt;或&lt;strong&gt;1 个制表符&lt;/strong&gt;。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is a normal paragraph:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;This is a code block.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This is a normal paragraph:&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is a code block.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;p&gt;代码块会一直持续，直到遇到未缩进的行（或文末）。&lt;/p&gt;&lt;p&gt;在代码块内，&lt;strong&gt;与号 (&amp;amp;)&lt;/strong&gt; 和尖括号 &lt;strong&gt;(&amp;lt; &amp;gt;)&lt;/strong&gt; 会自动转为 HTML 实体。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;div class=&quot;footer&quot;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;amp;copy; 2004 Foo Corporation&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;div class=&quot;footer&quot;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;amp;copy; 2004 Foo Corporation&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;p&gt;下文的“围栏代码块”和“语法高亮”属于扩展语法，你也可以用它们来书写代码块。&lt;/p&gt;&lt;section&gt;&lt;h4&gt;围栏代码块&lt;a href=&quot;#围栏代码块&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;使用成对的反引号围起来（如下所示），就不需要四空格缩进了。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Here&apos;s an example:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;```&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function test() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;console.log(&quot;notice the blank line before this function?&quot;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;```&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;Here’s an example:&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function test() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;console.log(&quot;notice the blank line before this function?&quot;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;语法高亮&lt;a href=&quot;#语法高亮&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;在围栏代码块后添加可选的语言标识，即可启用语法高亮（参见支持语言列表）。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;```ruby&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;require &apos;redcarpet&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;markdown = Redcarpet.new(&quot;Hello World!&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;puts markdown.to_html&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;```&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;require &lt;/span&gt;&lt;span&gt;&apos;redcarpet&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;markdown&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;Redcarpet&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;new&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&quot;Hello World!&quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;puts&lt;/span&gt;&lt;span&gt; markdown.&lt;/span&gt;&lt;span&gt;to_html&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;分割线（水平线）&lt;a href=&quot;#分割线水平线&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;hr /&amp;gt;&lt;/code&gt;
一行中放置&lt;strong&gt;三个或以上的短横线 (-)、星号 (*) 或下划线 (_)&lt;/strong&gt;。符号之间允许有空格。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;* * *&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;***&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*****&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;- - -&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---------------------------------------&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;___&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;表格&lt;a href=&quot;#表格&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;table&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;这是扩展语法。&lt;/p&gt;&lt;p&gt;用&lt;strong&gt;竖线 (|)&lt;/strong&gt; 分隔列，用&lt;strong&gt;短横线 (-)&lt;/strong&gt; 分隔表头，使用&lt;strong&gt;冒号 (:)&lt;/strong&gt; 指定对齐方式。&lt;/p&gt;&lt;p&gt;两侧的&lt;strong&gt;竖线 (|)&lt;/strong&gt; 与对齐可选。用于表头分隔时，每列至少需要 &lt;strong&gt;3 个短横线&lt;/strong&gt;。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;| Left | Center | Right |&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;|:-----|:------:|------:|&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;|aaa   |bbb     |ccc    |&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;|ddd   |eee     |fff    |&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;A | B&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---|---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;123|456&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;A |B&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;--|--&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;12|45&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;



















&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Left&lt;/th&gt;&lt;th&gt;Center&lt;/th&gt;&lt;th&gt;Right&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;td&gt;bbb&lt;/td&gt;&lt;td&gt;ccc&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;ddd&lt;/td&gt;&lt;td&gt;eee&lt;/td&gt;&lt;td&gt;fff&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;












&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;A&lt;/th&gt;&lt;th&gt;B&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;123&lt;/td&gt;&lt;td&gt;456&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;












&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;A&lt;/th&gt;&lt;th&gt;B&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;12&lt;/td&gt;&lt;td&gt;45&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;内联元素&lt;a href=&quot;#内联元素&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;section&gt;&lt;h3&gt;链接&lt;a href=&quot;#链接&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Markdown 支持两种链接样式：行内链接与引用式链接。&lt;/p&gt;&lt;section&gt;&lt;h4&gt;行内链接&lt;a href=&quot;#行内链接&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;行内链接格式：&lt;code&gt;[文本](URL &quot;标题&quot;)&lt;/code&gt;&lt;/p&gt;&lt;p&gt;标题可选。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is [an example](http://example.com/ &quot;Title&quot;) inline link.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[This link](http://example.net/) has no title attribute.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This is &lt;a href=&quot;http://example.com/&quot; target=&quot;_blank&quot;&gt;an example&lt;/a&gt; inline link.&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;http://example.net/&quot; target=&quot;_blank&quot;&gt;This link&lt;/a&gt; has no title attribute.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;如果引用同一站点的本地资源，可以使用相对路径：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;See my [About](/about/) page for details.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;See my &lt;a href=&quot;/about/&quot;&gt;About&lt;/a&gt; page for details.&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;引用式链接&lt;a href=&quot;#引用式链接&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;可以预定义链接引用。定义格式：&lt;code&gt;[id]: URL &quot;标题&quot;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;标题同样可选。引用时使用：&lt;code&gt;[文本][id]&lt;/code&gt;&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[id]: http://example.com/  &quot;Optional Title Here&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is [an example][id] reference-style link.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This is &lt;a href=&quot;http://example.com/&quot; target=&quot;_blank&quot;&gt;an example&lt;/a&gt; reference-style link.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;说明：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;方括号中包含链接标识（&lt;strong&gt;不区分大小写&lt;/strong&gt;，可在左侧缩进最多三格空格）；&lt;/li&gt;
&lt;li&gt;随后是冒号；&lt;/li&gt;
&lt;li&gt;再跟一个或多个空格（或 tab）；&lt;/li&gt;
&lt;li&gt;然后是链接 URL；&lt;/li&gt;
&lt;li&gt;URL 可选地用尖括号包裹；&lt;/li&gt;
&lt;li&gt;可选地跟随标题属性，用引号或圆括号包裹。&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;以下三种定义等价：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[foo]: http://example.com/  &quot;Optional Title Here&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[foo]: http://example.com/  &apos;Optional Title Here&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[foo]: http://example.com/  (Optional Title Here)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[foo]: &amp;lt;http://example.com/&amp;gt;  &quot;Optional Title Here&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;如果使用空的方括号，则链接文本本身会作为名称。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[Google]: http://google.com/&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[Google][]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a href=&quot;http://google.com/&quot; target=&quot;_blank&quot;&gt;Google&lt;/a&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;强调&lt;a href=&quot;#强调&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;strong&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Markdown 使用 &lt;strong&gt;星号 (*)&lt;/strong&gt; 或 &lt;strong&gt;下划线 (_)&lt;/strong&gt; 表示强调。&lt;strong&gt;一个分隔符&lt;/strong&gt;对应 &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;；&lt;strong&gt;两个分隔符&lt;/strong&gt;对应 &lt;code&gt;&amp;lt;strong&amp;gt;&lt;/code&gt;。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*single asterisks*&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;_single underscores_&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;**double asterisks**&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;__double underscores__&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;em&gt;single asterisks&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;single underscores&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;double asterisks&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;double underscores&lt;/strong&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;但如果两侧有空格，则会被视作普通字符而非强调语法。&lt;/p&gt;&lt;p&gt;你可以使用反斜杠进行转义：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;\*this text is surrounded by literal asterisks\*&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;*this text is surrounded by literal asterisks*&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;行内代码&lt;a href=&quot;#行内代码&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;用&lt;strong&gt;反引号 (`)&lt;/strong&gt; 包裹。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Use the `printf()` function.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;Use the &lt;code&gt;printf()&lt;/code&gt; function.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;若行内代码中需要包含反引号字符，可使用&lt;strong&gt;多重反引号&lt;/strong&gt;作为定界符：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;``There is a literal backtick (`) here.``&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;code&gt;There is a literal backtick (`) here.&lt;/code&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;行内代码两侧的定界符允许包含空格（开头一个、结尾一个），方便在代码起始或结尾放置反引号字符：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;A single backtick in a code span: `` ` ``&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;A backtick-delimited string in a code span: `` `foo` ``&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;A single backtick in a code span: &lt;code&gt;`&lt;/code&gt;&lt;/p&gt;&lt;p&gt;A backtick-delimited string in a code span: &lt;code&gt;`foo`&lt;/code&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;图片&lt;a href=&quot;#图片&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;img /&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Markdown 的图片语法与链接类似，支持行内与引用两种方式。&lt;/p&gt;&lt;section&gt;&lt;h4&gt;行内图片&lt;a href=&quot;#行内图片&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;行内图片语法：&lt;code&gt;![替代文本](URL &quot;标题&quot;)&lt;/code&gt;&lt;/p&gt;&lt;p&gt;标题可选。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![Alt text](/path/to/img.jpg)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![Alt text](/path/to/img.jpg &quot;Optional title&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp&quot; alt=&quot;&quot; /&gt;&lt;figcaption&gt;Alt text&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp&quot; alt=&quot;&quot; title=&quot;Optional title&quot; /&gt;&lt;figcaption&gt;Alt text&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;说明：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;一个感叹号 !；&lt;/li&gt;
&lt;li&gt;后接方括号，放置图片的替代文本；&lt;/li&gt;
&lt;li&gt;再接圆括号，内含图片 URL/路径，及可选的标题（引号包裹）。&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;引用式图片&lt;a href=&quot;#引用式图片&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;引用式图片语法：&lt;code&gt;![替代文本][id]&lt;/code&gt;&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[img id]: https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp  &quot;Optional title attribute&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![Alt text][img id]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp&quot; alt=&quot;&quot; title=&quot;Optional title attribute&quot; /&gt;&lt;figcaption&gt;Alt text&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;删除线&lt;a href=&quot;#删除线&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;del&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;这是扩展语法。&lt;/p&gt;&lt;p&gt;GFM 增加了删除线语法。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;~~Mistaken text.~~&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;Mistaken text.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;杂项&lt;a href=&quot;#杂项&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;section&gt;&lt;h3&gt;自动链接&lt;a href=&quot;#自动链接&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Markdown 支持一种便捷写法来创建“自动链接”（URL 与邮箱地址）：只需用尖括号将其包住即可。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;http://example.com/&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;address@example.com&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a href=&quot;http://example.com/&quot; target=&quot;_blank&quot;&gt;http://example.com/&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;#&quot;&gt;address@example.com&lt;/a&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;GFM 会自动识别标准 URL 并转换为链接。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;https://github.com/emn178/markdown&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a href=&quot;https://github.com/emn178/markdown&quot; target=&quot;_blank&quot;&gt;https://github.com/emn178/markdown&lt;/a&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;反斜杠转义&lt;a href=&quot;#反斜杠转义&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Markdown 允许使用反斜杠来转义那些本用于 Markdown 语法的特殊字符，使其按字面显示。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;\*literal asterisks\*&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;*literal asterisks*&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;以下字符可通过反斜杠转义以按字面量输出：&lt;/p&gt;&lt;p&gt;Code:&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;\   backslash&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;`   backtick&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   asterisk&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;_   underscore&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;{}  curly braces&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[]  square brackets&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;()  parentheses&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;#   hash mark&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;+   plus sign&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;-   minus sign (hyphen)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;.   dot&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;!   exclamation mark&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;内联 HTML&lt;a href=&quot;#内联-html&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;对于 Markdown 语法未覆盖的标记，直接使用原生 HTML 即可。无需特别声明从 Markdown 切换到 HTML，直接写标签就行。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is a regular paragraph.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;table&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;td&amp;gt;Foo&amp;lt;/td&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/table&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is another regular paragraph.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This is a regular paragraph.&lt;/p&gt;&lt;table&gt;
    &lt;tbody&gt;&lt;tr&gt;
        &lt;td&gt;Foo&lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;&lt;p&gt;This is another regular paragraph.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;请注意：在&lt;strong&gt;块级 HTML 标签&lt;/strong&gt;内不会处理 Markdown 语法。&lt;/p&gt;&lt;p&gt;与块级标签不同，在&lt;strong&gt;行内级标签&lt;/strong&gt;内会处理 Markdown 语法。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;span&amp;gt;**Work**&amp;lt;/span&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;div&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;**No Work**&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;span&gt;&lt;strong&gt;Work&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div&gt;
  **No Work**
&lt;/div&gt;
***&lt;/section&gt;&lt;/section&gt;</content:encoded></item></channel></rss>