feat: 文章正文图片支持灯箱;删除未使用的 GitHub Card 插件

灯箱
- 相册页原本已有一套无依赖灯箱(事件委托 + ClientRouter 友好),
  但它写在 gallery/[album].astro 里,只有相册页能用。
  现抽成 src/components/ImageLightbox.astro,挂到 BaseLayout,全站可用。
- 新增 src/plugins/rehype-image-lightbox.mjs:给正文里的 <img> 注入
  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 压缩后);
正文渲染文本与线上基线一致,无回归。
This commit is contained in:
2026-09-17 17:29:23 +08:00
parent 738fe3175e
commit c1643ae95d
6 changed files with 181 additions and 279 deletions
+2 -2
View File
@@ -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,
],
}),
},