feat(markdown): 新增响应式图片画廊网格#504
Merged
matsuzaka-yuki merged 3 commits intoJul 13, 2026
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
为 Mizuki 的 Markdown 渲染链路新增 :::grid 容器指令，用于将一组 Markdown 图片渲染为响应式画廊网格，并与 Fancybox 灯箱分组逻辑集成，同时补齐 remark-directive 对数字比例（如 3:4）的误判兼容、测试与演示文章。
Changes:
- 新增
ImageGridComponent（:::grid→ 语义化网格结构），支持columns/aspect/fit与非法值回退 - 增加网格专用样式与 Fancybox 选择器/绑定逻辑，确保每个网格独立分组且不与正文普通图片混合
- 增加数字比例冒号转义的 remark 插件、对应自动化测试与完整演示文章
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/remark-escape-numeric-colons.test.mjs | 覆盖数字比例冒号转义的行为测试（含代码场景） |
| tests/image-grid.test.mjs | 覆盖网格渲染、分组与非法参数回退的单元测试 |
| src/styles/markdown.css | 为 .image-grid 增加响应式网格、裁切/contain 规则与图注布局 |
| src/scripts/handlers/fancybox-handler.ts | Fancybox 初始化流程中新增网格选择器绑定 |
| src/scripts/core/swup-config.ts | 调整 Fancybox 选择器：排除网格图片并新增网格专用选择器 |
| src/plugins/remark-escape-numeric-colons.mjs | 在解析前转义 \d:\d，避免被 remark-directive 误判为指令 |
| src/plugins/rehype-component-image-grid.mjs | 新增 :::grid 组件渲染器：抽取图片并生成带 caption/分组的网格结构 |
| src/content/posts/image-grid-demo.md | 新增演示文章，覆盖 1–6 列、不同宽高比与 cover/contain 行为 |
| astro.config.mjs | 注册新 remark/rehype 组件与插件，并包含额外的字体 fallback 配置改动 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+10
to
+14
| function parseColumns(value) { | ||
| const columns = Number.parseInt(String(value ?? DEFAULT_COLUMNS), 10); | ||
| return Number.isInteger(columns) && columns >= 1 && columns <= 6 | ||
| ? columns | ||
| : DEFAULT_COLUMNS; |
Comment on lines
+61
to
+63
| const firstGroup = firstGrid.children[0].children[0].properties.dataFancybox; | ||
| const secondGroup = | ||
| secondGrid.children[0].children[0].properties.dataFancybox; |
Comment on lines
+67
to
+70
| assert.equal( | ||
| firstGrid.children[1].children[0].properties.dataFancybox, | ||
| firstGroup, | ||
| ); |
| */ | ||
| export function escapeNumericColons(source) { | ||
| return source | ||
| .split(/(`{3,}[\s\S]*?`{3,}|~{3,}[\s\S]*?~{3,}|`+[^`\n]*`+)/g) |
Comment on lines
+15
to
+16
| test("does not alter inline or fenced code", () => { | ||
| const source = "`3:4`\n\n```text\n16:9\n```"; |
Comment on lines
+60
to
+64
| // These variables are composed into --font-sans below. Keep their | ||
| // fallback lists empty; otherwise a system fallback after this Latin | ||
| // font prevents the following CJK font from ever being considered. | ||
| fallbacks: [], | ||
| optimizedFallbacks: false, |
Comment on lines
+79
to
+82
| // The final system fallback belongs to --font-sans, not this partial | ||
| // CJK font stack. | ||
| fallbacks: [], | ||
| optimizedFallbacks: false, |
Contributor
Author
|
补充说明：此分支最初从提交 该提交本身是一个独立的字体配置改动；若维护者认为需要保持本 PR 只聚焦图片画廊，我可以在后续按建议拆分或移除。 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
变更类型
检查清单
关联 Issue
Closes #503
改动内容
在 Mizuki 已有 Markdown 指令、
rehype-components、Markdown 样式和 Fancybox 初始化流程的基础上，新增:::grid图片画廊指令：columns（1–6 列）、aspect（如1/1、3/4、16/9）和fit（cover/contain）属性，并为非法值提供安全回退。ImageGridComponent：将指令中的 Markdown 图片渲染成包含链接、图片与图注的语义化网格结构。768px时最多两列，小于480px时为单列；cover模式统一填满展示框，contain模式完整保留画面。object-fit规则，避免留白、双重圆角或填充规则被覆盖。remark-directive将正文或 alt 文本中的3:4、16:9、1:1误判为文本指令；行内代码和围栏代码不受影响。测试方式
已执行并通过：
node --test tests/image-grid.test.mjs tests/remark-escape-numeric-colons.test.mjs pnpm check pnpm exec astro build本地查看演示文章：
然后访问：
截图 / 在线演示
在线演示：https://mizuki-red-three.vercel.app/posts/image-grid-demo/
演示文章覆盖 1–6 列、横图、竖图、方图、极端宽高比、透明图，以及
cover和contain两种模式。截图效果展示
以下截图来自在线演示，展示了图片画廊在实际主题中的布局、统一裁切与图注对齐效果；完整的交互和全部测试组合可在上方在线演示中查看。
展开查看页面效果截图（4 张）
其他说明
本 PR 仅包含图片画廊网格实现、对应测试和演示文章；未包含工作区中与此功能无关的本地改动。