From c1643ae95d4dca68ad090c7dff7b1bfee64a691a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=B6=E4=B9=8B=E5=88=83?=
<1+timecrackbot@noreply.192.168.1.87>
Date: Thu, 17 Sep 2026 17:29:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E7=AB=A0=E6=AD=A3=E6=96=87?=
=?UTF-8?q?=E5=9B=BE=E7=89=87=E6=94=AF=E6=8C=81=E7=81=AF=E7=AE=B1=EF=BC=9B?=
=?UTF-8?q?=E5=88=A0=E9=99=A4=E6=9C=AA=E4=BD=BF=E7=94=A8=E7=9A=84=20GitHub?=
=?UTF-8?q?=20Card=20=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
灯箱
- 相册页原本已有一套无依赖灯箱(事件委托 + ClientRouter 友好),
但它写在 gallery/[album].astro 里,只有相册页能用。
现抽成 src/components/ImageLightbox.astro,挂到 BaseLayout,全站可用。
- 新增 src/plugins/rehype-image-lightbox.mjs:给正文里的
注入
data-lightbox-src。跳过链接内的图片(点击应跳转)和显式标记
data-lightbox-ignore 的图片。
- 顺带让灯箱大图继承原图的 alt 文本(原先固定为空)。
- 正文图片加 cursor: zoom-in 提示。
清理
- 删除 src/plugins/rehype-component-github-card.mjs(165 行)及其在
rehypeComponents 里的 github 映射:内容里从未使用过 ::github 指令。
验证:构建 41 页通过;文章页正文图片 4/4 带上 data-lightbox-src,
相册页 5 个触发元素不受影响;灯箱脚本按页内联(2.8KB 压缩后);
正文渲染文本与线上基线一致,无回归。
---
astro.config.mjs | 4 +-
src/components/ImageLightbox.astro | 132 +++++++++++++++
src/layouts/BaseLayout.astro | 2 +
src/pages/gallery/[album].astro | 112 -------------
src/plugins/rehype-component-github-card.mjs | 165 -------------------
src/plugins/rehype-image-lightbox.mjs | 45 +++++
6 files changed, 181 insertions(+), 279 deletions(-)
create mode 100644 src/components/ImageLightbox.astro
delete mode 100644 src/plugins/rehype-component-github-card.mjs
create mode 100644 src/plugins/rehype-image-lightbox.mjs
diff --git a/astro.config.mjs b/astro.config.mjs
index f5c93de..ba28ceb 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -15,13 +15,13 @@ import remarkMath from "remark-math"
import remarkSectionize from "remark-sectionize"
import { remarkShiftHeadings } from "./src/plugins/remark-shift-headings.mjs"
import { AdmonitionComponent } from "./src/plugins/rehype-component-admonition.mjs"
-import { GithubCardComponent } from "./src/plugins/rehype-component-github-card.mjs"
import { parseDirectiveNode } from "./src/plugins/remark-directive-rehype.js"
import { remarkExcerpt } from "./src/plugins/remark-excerpt.js"
import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs"
import { pluginLanguageBadge } from "./src/plugins/expressive-code/language-badge"
import { pluginCustomCopyButton } from "./src/plugins/expressive-code/custom-copy-button"
import { unified } from "@astrojs/markdown-remark"
+import { rehypeImageLightbox } from "./src/plugins/rehype-image-lightbox.mjs"
import { site } from "./src/data/site"
const createAdmonitionComponent = (type) => (properties = {}, children = []) => {
@@ -106,7 +106,6 @@ export default defineConfig({
rehypeComponents,
{
components: {
- github: GithubCardComponent,
note: createAdmonitionComponent("note"),
tip: createAdmonitionComponent("tip"),
important: createAdmonitionComponent("important"),
@@ -138,6 +137,7 @@ export default defineConfig({
},
},
],
+ rehypeImageLightbox,
],
}),
},
diff --git a/src/components/ImageLightbox.astro b/src/components/ImageLightbox.astro
new file mode 100644
index 0000000..ef6a162
--- /dev/null
+++ b/src/components/ImageLightbox.astro
@@ -0,0 +1,132 @@
+---
+/**
+ * 无依赖灯箱。
+ *
+ * 任何带 `data-lightbox-src` 的元素点击即可放大:
+ * - 相册页的 `