首页不是展示墙：一个可增长的索引抽屉怎样被做出来

首页第一次加入“主题”时，站里只有几个集合。大图、标题和摘要组成的纵向卡片尚能被一眼看完。随着 ArcVellum、学术、工具与博客开发进入同一个首页，相同容器不得不将卡片压短。最后看到的不是可滚动窗口，而是一组被挤压的封面。

这次修正的关键是重新分配主页权重：长期主题占左侧大空间，近文只在右侧保持三条短索引。主题区成为轨道，而不是缩小版主题页。

卡片改成目录条目

索引抽屉中的每一项都有明确最小高度，不会因父容器 flex 收缩而变形。封面从占据整行改为左侧固定宽度缩略图，右侧只保留标题、两行摘要和文章数。这种横向条目不需要通过挤压来迎合容器。

外层有独立的顶底边界、从 01 到主题总数的纵向轨道和底部滚动提示。只有目录内容滚动，标题、说明和轨道终点保持稳定。overscroll-behavior: contain 避免用户在抽屉中滚动时突然带动整页。

文章列表与主题抽屉并排时，最容易犯的错是用“更多”证明站点很丰富。五篇近文会把首页拉成一个几乎完整的归档页，也迫使主题轨道无限增高。现在首页排除重点文章后只取最新三篇，“全部文章”提供清晰出口。

这一限制让两个板块重新接近等高，却不要求它们内部完全对齐。左侧主题抽屉保留轨道、裁切与滚动的错落感，右侧文章流刻意收窄，形成编辑部索引而不是第二面卡片墙。

在 900px 以下，两栏改为单列，主题抽屉获得独立 31rem 高度。首页重点文章在 620px 以下将右侧封面移到标题上方，压缩为横向画幅，同时隐藏较长摘要与标签。读者在 390×844 的一个视口内仍能理解“这是哪篇文章、什么时候更新、怎样进入”。

最初的补充方案是在底部摆六个“站内工具”入口。它增加了格子，却没有增加能力：搜索、标签、主题与 RSS 原本就在导航体系里，换一套卡片再展示一次，只会制造虚假的功能密度。

最终实现没有保留“阅读编排器”。对一座个人博客而言，它假装理解读者，却没有足够数据支持推荐，反而抢走了文章本身的注意力。首页新增的信息来自真实状态：文章总量、主题数量、累计阅读时间、最近更新和高频标签；新增的能力则放到学习笔记同步与本地 Blog Studio，而不是把旧入口换一轮名字。

这条取舍使公开首页保持只读、可理解、无需用户画像。维护复杂度留在站主自己的本地工具里，访客看到的是内容与明确入口。

第一轮调整仍把首页限制在 72rem，重点封面即使是完整 16:9，也只占卡片右侧很小一块。对于 IDE、星仪、计算图和求解地图，这种缩略图只能证明“有图”，无法让人看清图里有什么。最终桌面内容上限扩到 96rem，重点文章高度同步增加，文图比例接近均衡，封面取得足够像素面积。

正文阅读宽度没有随之扩张。新增空间被分配给截图、主题条目、学习笔记索引和交互演示；普通文字仍在稳定行长内。这样页面在宽屏上不再像一张窄纸条挤在中央，也不会把长文变成横跨显示器的一行。

主题卡与继续阅读也不再共享尺寸。左侧主题条目拥有更大的 16:9 预览、三行说明和显式文章数，轨道高度容纳约四个完整条目；右侧只保留三篇紧凑近文。两列顶边和底边不完全对齐，错位来自职责与密度差，而不是随机 margin。

学习笔记位于重点文章与主题轨道之间，以大标题、轨道图、最近公开笔记和标签构成独立入口。它没有假装是在线 Obsidian，也没有和主题卡复用同一外观：访客看到的是公开只读投影，站主在本地 Blog Studio 执行目录同步、编辑、检查和发布。

这块模块解决了首页“信息少”的问题，但没有重复导航。展示的笔记数、最近条目、更新时间与标签都来自真实 content collection；没有公开笔记时，它也应显示清楚的空状态，而不是用模拟数据填满版面。

视觉截图可以发现封面过小、两列失衡和卡片挤压，却不一定发现键盘顺序、滚动嵌套与触屏回流。主题轨道在桌面拥有独立滚动，移动端回到普通单列；焦点仍按 DOM 顺序经过主题与近文；主题轨道使用 overscroll-behavior: contain，但不能吞掉键盘或触屏离开容器的路径。

最终验收同时看 1440/1920 桌面、390 移动端、键盘 Tab、减少动态效果和图片未加载状态。首页是一张索引，不是静态海报；只有每条阅读路径都能走通，错落版式才算设计，而不是摆拍。