把首页、列表页、详情页串成一个完整内容体验

Tutorial Path

从 0 搭建一个可持续写作的 Next.js 个人网站

当前位置：06 / 10

站点体验不是一页一页孤立完成的，而是一条内容流。

很多个人网站的问题不是页面太少，而是页面之间没有关系。首页像海报，列表页像仓库，详情页像孤岛。真正让读者愿意继续浏览的，不是某一页做得多好，而是整条内容路径是否顺畅。

首页应该做入口，不应该做全集

首页最重要的任务是建立判断：这个站点是谁的、最近在写什么、值得从哪里进入。它不应该试图承载全部内容，否则会变成一个不断膨胀的拼盘。

对教程型站点来说，我更倾向于首页承担四种信息：站点定位、核心系列入口、最近更新、代表性项目。这样既能帮助新读者快速理解你，也不会让老读者觉得信息过载。

列表页负责“筛选”，详情页负责“沉浸”

列表页的目标不是把所有信息都展示完，而是帮助读者快速决定“要不要点进去”。因此它应该强调标题、描述、日期、分类、标签这些结构化信息，并提供搜索、分页、分类过滤能力。

详情页则完全不同。它要把读者从浏览态拉到阅读态，所以正文排版、目录、阅读时长、相关推荐、上一篇下一篇这些元素会更重要。一个好的详情页会减少分心，让用户愿意继续停留。

详情页一定要考虑“离开方式”

如果一篇文章读完之后没有自然出口，读者很可能直接关闭页面。所以我会在详情页里保留三类出口：

• 返回列表
• 继续看上一篇或下一篇
• 跳到配套笔记或项目页

这也是为什么系列文章特别适合做上一篇/下一篇导航。它不仅方便读者，也会自然抬高整组内容的阅读深度。

一个简单但很有效的设计原则

每一层页面都只回答一个核心问题：

• 首页：这个站点值不值得继续看？
• 列表页：这一页里哪条内容最适合我现在点？
• 详情页：这篇内容能不能让我一口气读下去？

如果你能让每一层只服务一个问题，页面的结构通常就不会跑偏。

小结

内容体验是一条链，而不是单页优化。首页给方向，列表页给选择，详情页给沉浸，三者串起来，网站才会真正开始产生阅读流。下一篇我们进入一个非常实用的主题：搜索、分页与 URL 状态应该如何设计，才能让内容既好用又好分享。