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` 的元素点击即可放大: + * - 相册页的 `