图片与封面自检：正文配图 + 卡片背景图
一篇用来验收「正文配图 / 文章页配图排版 / 列表页卡片背景图」的测试文章。配图由 scripts/make-demo-images.py 生成，验收完可以整篇删掉。
这是一篇测试文章。 它唯一的作用是把新增的图片能力摊开给你看：正文配图怎么排、 列表页那张卡片怎么用
cover当背景、没有封面时又变成什么样。 确认没问题之后，把下面三样一起删掉即可：
content/posts/image-cover-demo.mdx（本篇）content/posts/image-thumbnails-demo.mdx（对照文章）public/uploads/demo-*.jpg与scripts/make-demo-images.py
先在列表页看那张卡片#
| 元素 | 表现 |
|---|---|
| 整张卡片 | 以 demo-cover.jpg 为背景，铺满并居中裁切 |
| 背景之上 | 压一层从下往上的深色渐变，保证标题可读 |
| 标题与摘要 | 白色字，压在下半部分 |
| 缩略图带 | 不显示 —— 有封面时它会让位，避免两种图片语言打架 |
上面那张背景图里我特意把「封面图」几个字放在中上部：卡片压暗的是下半部分， 所以你会看到文字上方清楚、下方被渐变盖住 —— 这正说明背景图是真的铺在卡片上的， 而不是被当成一张普通插图塞在角落里。
再看文章页#
cover 在文章页还有第二个落点：标题下方那张完整的大图。
它的原始尺寸是 1600×900，宽高比 16:9。
正文配图#
下面是五张编号配图，用的是 Markdown 的图片语法：
每张图上都有编号、色名和文件名 —— 这样在列表页瞄一眼缩略图， 就能对上「第几张、哪一张」，不用猜。
两种写法都认#
卡片上的缩略图是从正文里自动抠出来的，Markdown 和原生标签两种写法都支持：
 ← Markdown 语法
<img src="/uploads/demo-02.jpg" alt="说明文字" /> ← 原生标签被刻意跳过的有三类：
| 写法 | 为什么跳过 |
|---|---|
| 代码块与行内代码里的图片 | 贴一段示例代码不该让卡片多出几张缩略图 |
data: 开头的内联图片 | 会让卡片背上几百 KB 的 base64 |
相对路径（./x.jpg） | 列表页和文章页的 URL 层级不同，会解析到错误的位置 |
拿本篇来说：正文里一共 6 处图片引用，其中一处写在代码块里会被跳过， 剩下 5 张再去重、按上限截成 4 张。
不过 本篇有 cover，所以卡片上根本不会出现缩略图带 ——
那 4 张只是躺在 PostMeta.images 里。想让它们真的出现，见对照文章
对照文章：不写 cover 时，卡片展示正文缩略图。
相关字段与文件#
| 位置 | 管什么 |
|---|---|
frontmatter 的 cover | 卡片背景图 + 文章页顶部大图 |
| 正文里的图片 | 卡片的缩略图带（最多 4 张） |
src/lib/posts.ts 的 extractImages() | 怎么从 MDX 里把图片抠出来 |
src/components/PostCard.tsx | 卡片上两种图片语言的排版 |
scripts/make-demo-images.py | 这些示例配图是怎么生成的 |
评论0
还没有评论，来写第一条吧。
访客的评论先存在你自己的浏览器里（纯静态站没有收件箱）， 只有站长发布的留言与回复是写进仓库、所有人都能看到的；点赞也只记在本机。
想要「所有访客都看得见、站长能回复」的评论区，两条路选一条：部署仓库里自带的互动服务 （workers/blog-api，见 README），或者配置 Giscus。 现在既没配也没部署，所以上面的评论只存在各自的浏览器里。