这篇文章只使用新文章图片系统支持的 Markdown 图片语法,集中验证电脑端封面、正文图片、图注、灯箱与键盘操作。所有资源都来自仓库,不依赖远程图片或第三方页面。
本地相对路径图片
下面的图片位于 src/content/posts/images。构建时应生成稳定的站内资源地址,并保留图片原始比例和明确的替代文本。

图片应限制在正文媒体轨道内。图注来自 Markdown 图片标题,不应依赖浏览器的悬浮提示。
可点击的站内原图
链接包裹图片时,新系统只在链接目标仍然是图片的情况下打开灯箱;普通页面链接不会被图片控制器拦截。

Public 图片
public 目录中的资源继续使用 / 开头的路径,但输出结构、图注和灯箱行为与本地内容图片保持一致。

横向大图
横向图片用于验证宽图在电脑端的缩放和布局。它可以使用正文媒体区域,但不能制造页面级横向滚动或改变其他页面布局。

纵向图片
纵向图片必须按原比例完整显示。灯箱使用图片的确定性宽高,不通过加载后的 naturalWidth 临时推断尺寸。

连续图片的阅读节奏
连续图片用于检查相邻媒体之间的间距、图注和焦点状态是否保持一致。


无障碍检查
本页所有承载信息的图片都有明确的 alt。替代文本描述图片内容或用途,而不是重复“这是一张图片”。封面单独设置 coverAlt,图片无法加载或使用屏幕阅读器时仍能理解其作用。
图片交互应满足:
- 可以通过键盘访问。
- 焦点状态清晰可见。
- Escape 可以关闭灯箱。
- 关闭后焦点返回原图片。
- 图注和替代文本不会互相替代。
- 图片加载前后不产生明显的布局跳动。
折叠检查清单
展开媒体与无障碍验收项目
- 封面和正文图片都能加载。
- 图片不会超过文章容器。
- 图片可以使用键盘打开和关闭。
- 图注在蓝色和粉色主题下都能阅读。
- Swup 页面切换后 PhotoSwipe 不会重复绑定。
来源与授权
这篇文章在 Frontmatter 中设置了 sourceLink、licenseName 和 licenseUrl。文章底部应展示来源及 CC BY-NC-SA 4.0 授权信息,同时关闭文章评论。
验收结论
当横向封面、本地相对图片、public 图片、链接图片、横图、纵图、连续图片与授权信息都能稳定显示时,这一页的文章图片系统兼容性测试即通过。