给创造日志的时间线加上封面图

时间线像在看目录

创造日志的 Timeline 页面上线后，我每次回去翻都觉得少了点什么。

所有卡片长得几乎一样：一个日期、一行标题、两行描述。从上往下扫，每张卡片的视觉权重完全相同，很难快速区分"这篇写的是什么"。像在看一份目录，而不是在浏览一段开发历程。

问题很明显：缺视觉锚点。

从正文自动提取

我不想手动给每篇文章加一个 cover 字段，因为大多数文章正文里已经有截图了。能不能自动把第一张图提出来当封面？

思路很简单：Nuxt Content v3 在查询文章时会返回 body 字段，里面是 Markdown 解析后的 AST。递归遍历这棵树，找到第一个 img 节点，取它的 src 就行。

但第一版代码写好后，页面上什么都没显示。

minimark 格式

排查后发现，Nuxt Content v3 的 body AST 用的不是常见的 {tag: 'img', props: {src: '...'}} 对象结构，而是一种叫 minimark 的紧凑格式。

minimark 用嵌套数组表示节点：

["img", {"src": "/b/metool/homepage.png", "alt": "首页截图"}]

第一个元素是标签名，第二个是属性对象，后续元素是子节点。整个 body 的结构是 {type: "minimark", value: [...]}。

理解了格式后，提取函数改成按数组索引访问就通了：如果 node[0] === 'img'，就从 node[1].src 取图片路径。

贴边设计

缩略图的第一版放在卡片右侧，有圆角有边框，尺寸也不大。看起来像一个邮票贴在卡片上，和内容有距离感。

调整后让图片直接贴紧卡片的右边、上边和下边，利用卡片本身的 overflow-hidden 和 rounded-xl 自动裁切。文字区域保留 padding，图片区域不留，形成一个内容和视觉自然分区的布局。

没有图片的文章卡片会自然降级为纯文字全宽布局，不会出现空白占位。

小改动，大不同

这是一个不到 30 行代码的改动，但浏览体验的变化是立竿见影的。时间线不再是一份干巴巴的目录，每张卡片都有了自己的视觉标识。

有时候决定体验好不好的，就是这种小细节。