每篇文章都要有一张脸：真实封面与确定性校样图管线

最初的文章卡几乎全是文字。它们在结构上很整齐，也因此迅速变得单调：日期、标题、摘要、标签被不断复制，只靠细色条区分身份。当文章从五篇增长到十几篇时，这种齐整开始像一份表格。

于是项目建立了一条“真实图片优先，确定性校样图兜底”的封面管线。它的目标不是给每篇文章生成一张装饰图，而是让内容在首页、主题、相关文章与分享链接里拥有稳定的视觉身份。

真实图片必须属于文章本身

Content Collection 中的 cover 只有 src 和 alt，且是可选字段。一篇项目文章如果有真实界面、运行结果、实验曲线或仓库内截图，就应优先使用它。ArcVellum 的封面来自实际产品界面，气动弹性文章来自真实计算图，求解器来自内置地图的路径可视化。

资产与 index.mdx 共处一个目录，搬运文章不会丢掉它的图片。Astro 图片管线根据首页重点位、列表小图和正文 hero 输出不同宽度；视觉组件只决定容器比例与裁切，不重复编码图像。

没图时不伪造摄影，而是显示一张校样纸

旧文章与刚建立的主题不可能立即都有真实图片。ContentCover.astro 在此时根据内容类型、稳定 ID 和 accent 生成内联 SVG：套色块、裁切线、校样窗与登记条的位置由稳定哈希决定。它不随构建次数乱跳，也不将标题烘进图片里。

这张默认封面有两个严格边界：它只保证结构完整，不假装与内容有真实图像关联；一旦作者补上封面，所有发现界面会自动切换到真图。

同一份数据，不同的视觉合同

封面在五个场景中有不同责任：

• 首页重点文章中，它位于右侧，保留足够大的图像面积。
• 文章流里，它是固定宽度的横向索引图，不挟压标题。
• 首页主题抽屉里，它被压缩为小型目录缩略图，使主题数量增长时卡片不变形。
• full / minimal 正文页里，它和标题、摘要共同建立阅读语境。
• none 页面不自动注入封面，作者对独立页面仍有完全控制。

这也是为什么封面组件有 spotlight / list / directory / hero 等显式 variant，而不是靠 CSS 猜测它正在哪个父容器里。

OG 分享图是另一种产物

页面内的默认封面是矢量布局元素，不能直接当作社交分享图。项目在构建期为没有真图的文章和主题生成 1200×630 PNG，把站点名、内容标题和它的 accent 布置到稳定版式。有真实封面的内容则优先使用图像管线生成的 WebP。

资产不能只靠目测

content:audit、建立站点的端到端检查以及分享图端点共同守住这条管线：引用图片必须存在，alt 不得为空，页面不得因缺图而缺少封面结构，构建产物中的社交卡必须可访问。

这些检查不能判断图片是否有艺术质量，却能阻止封面系统在内容增长时悄然退化成一堆空框。审美需要人做判断，结构完整性应该由构建门禁负责。

为什么最终选择桌面 16:9

项目截图、求解地图、IDE 与图形界面大多天然接近电脑视口。此前同时存在 3:2、1.91:1 和被父容器拉伸的任意比例，同一张图在首页、主题轨道和正文之间不断变形。现在发现界面统一使用 16:9：它不是社交平台的强制比例，而是本站真实材料最常见的观察窗口。

统一的是容器，不是裁切。真实图片使用 object-fit: contain，完整显示菜单、轴标签、状态栏和界面边缘；空余区域由内容 accent 的低饱和表面填充。对于摄影作品，未来可以在 frontmatter 增加经人工确认的焦点裁切策略，但技术截图默认不能为了“铺满”而丢失证据。

正文媒体是一套更自由的语法

文章内图片没有固定宽高比，也不要求固定位置。默认图按自身比例在文字列中居中；media-wide 适合界面总览和横向图表，media-bleed 适合需要接近全屏检查的架构图，media-left 与 media-right 允许较小图像成为段落旁证。所有模式都保留原始比例，并在窄屏回到单列。

这套规则同时解决两类相反的错误：把纵向计算图硬塞进横幅会裁掉坐标，把一张 1600 像素的界面截图缩进 40em 正文又会让文字完全看不清。排版不再替作者猜测图片角色，作者在文章中显式选择它是正文证据、宽幅总览还是旁注。

重复图片也是内容债务

尺寸合格不代表资产合格。早期多个 ArcVellum 页面曾复用同一张首页截图，读者在列表里无法判断每篇文章的关注点。资产台账现在同时记录文件维度、内容归属和重复使用；项目文章优先从真实仓库挑选与模块对应的界面，抽象设计文章才使用独立制作的校样视觉。

最终审查还需要放大查看缩略图：如果封面在实际卡片尺寸下只剩一团细字，就应换成局部截图或重新构图，而不是依赖原图分辨率自我安慰。像素充足与视觉可读是两个门禁。