跳到正文
花城
返回文章列表

对照文章:不写 cover 时,卡片展示正文缩略图

与《图片与封面自检》配对的对照文章 —— 不写 cover 时,列表页卡片会在底部显示一条正文配图缩略图带(最多 4 张,非首屏卡片显示 3 张)。

全文 416 字作者:花城浏览与点赞统计加载中

这是对照文章,也是测试文章。 它和图片与封面自检:正文配图 + 卡片背景图 的唯一区别是:这一篇没有写 cover。

于是同一套卡片会表现出另一种样子 —— 白底、底部一条缩略图带。 两篇并排放在首页或全部文章上,一眼就能对比出来。

卡片上会出现什么#

元素本篇(无 cover)
卡片底色普通白卡片(深色模式下是深色卡片)
底部一条缩略图带,把正文里的图片按顺序铺开
条目数正文有 5 张图,上限取 4 张;非首屏卡片显示 3 张,首屏那张显示 4 张。本篇在列表里排在封面那篇后面,所以你会看到 3 张
右上角日期旁边多一个图片图标和数字,表示「这篇里有几张图」

缩略图统一按 4:3 裁切(object-cover),鼠标悬停时卡片微微上浮、 缩略图轻微放大 —— 所以尺寸不一的原图也不会把卡片撑得参差不齐。

正文配图#

![一](/uploads/demo-01.jpg)

一

二

三

四

五

两种卡片怎么选#

你想要的观感怎么做
卡片像一张画报,图片当底、标题压在上面写 cover(见那篇对照文章)
卡片像一份目录,一眼看出「这篇里有几张图」不写 cover,正文正常插图即可

两者不会同时出现:有 cover 时缩略图带会让位。 想让某一张正文配图升格成卡片背景,把它复制到 frontmatter 的 cover 就行 —— 后台写作时对应的字段叫「封面图(列表页缩略框的背景)」。

评论0

0/1000

还没有评论,来写第一条吧。

访客的评论先存在你自己的浏览器里(纯静态站没有收件箱), 只有站长发布的留言与回复是写进仓库、所有人都能看到的;点赞也只记在本机。

想要「所有访客都看得见、站长能回复」的评论区,两条路选一条:部署仓库里自带的互动服务 (workers/blog-api,见 README),或者配置 Giscus。 现在既没配也没部署,所以上面的评论只存在各自的浏览器里。

相关文章