对照文章:不写 cover 时,卡片展示正文缩略图
与《图片与封面自检》配对的对照文章 —— 不写 cover 时,列表页卡片会在底部显示一条正文配图缩略图带(最多 4 张,非首屏卡片显示 3 张)。
这是对照文章,也是测试文章。 它和图片与封面自检:正文配图 + 卡片背景图 的唯一区别是:这一篇没有写
cover。
卡片上会出现什么#
| 元素 | 本篇(无 cover) |
|---|---|
| 卡片底色 | 普通白卡片(深色模式下是深色卡片) |
| 底部 | 一条缩略图带,把正文里的图片按顺序铺开 |
| 条目数 | 正文有 5 张图,上限取 4 张;非首屏卡片显示 3 张,首屏那张显示 4 张。本篇在列表里排在封面那篇后面,所以你会看到 3 张 |
| 右上角 | 日期旁边多一个图片图标和数字,表示「这篇里有几张图」 |
缩略图统一按 4:3 裁切(object-cover),鼠标悬停时卡片微微上浮、
缩略图轻微放大 —— 所以尺寸不一的原图也不会把卡片撑得参差不齐。
正文配图#





两种卡片怎么选#
| 你想要的观感 | 怎么做 |
|---|---|
| 卡片像一张画报,图片当底、标题压在上面 | 写 cover(见那篇对照文章) |
| 卡片像一份目录,一眼看出「这篇里有几张图」 | 不写 cover,正文正常插图即可 |
两者不会同时出现:有 cover 时缩略图带会让位。
想让某一张正文配图升格成卡片背景,把它复制到 frontmatter 的 cover 就行 ——
后台写作时对应的字段叫「封面图(列表页缩略框的背景)」。
评论0
还没有评论,来写第一条吧。
访客的评论先存在你自己的浏览器里(纯静态站没有收件箱), 只有站长发布的留言与回复是写进仓库、所有人都能看到的;点赞也只记在本机。
想要「所有访客都看得见、站长能回复」的评论区,两条路选一条:部署仓库里自带的互动服务 (workers/blog-api,见 README),或者配置 Giscus。 现在既没配也没部署,所以上面的评论只存在各自的浏览器里。