技术博客:VitePress 知识站如何从“可索引”进化到“可导览”
问题不是内容太少,而是入口太平
很多知识库型仓库在完成静态站改造后,都会进入一个新的阶段:
- 页面已经能打开
- 内容已经能搜索
- 链接已经能访问
但用户第一次打开首页时,还是会面临一个问题:不知道先看什么。
这说明站点已经“可索引”,却还没有真正“可导览”。
M4 这一轮的目标,就是解决这个问题。
为什么要把首页从列表页改成导览页
首页如果只承担“把链接列出来”的工作,它更像目录页,而不是知识站入口。
真正有用的首页,至少应该同时告诉读者:
- 站点规模有多大
- 哪些模块最值得先进入
- 哪些专题已经整理过
- 最近哪些内容有变化
- 如果第一次接触某个主题,建议按什么顺序读
一旦这几个问题都能被首页回答,用户进入站点后的决策成本会明显下降。
生成优先,不等于只能输出朴素列表
做文档站时,很容易掉进一个误区:只要采用“自动生成”,页面就只能很素。
其实不是。
关键不在于要不要自动生成,而在于有没有把“展示结构”也纳入生成逻辑。
这轮改造里,我做了两件事:
- 继续把数据计算放在生成脚本里
- 用少量展示型 Vue 组件承接卡片和阅读路径的视觉表达
这样既没有牺牲自动化,也没有把页面固定死在 Markdown 列表形态。
最近更新为什么一定要回到原始文件时间
这是一个很容易被忽略的细节。
如果直接用生成目录里的文件时间,所有页面都会因为重新生成而变成“刚刚更新”。
这会让“最近更新”完全失去意义。
所以这轮实现里,最近更新列表并不是来自 docs-site,而是回到原始 Markdown 文件去读取 mtime。这一步虽然技术上不复杂,但非常决定结果是否可信。
用 3 个轻量组件把展示层收住
这一轮没有引入大量前端逻辑,而是只增加了 3 个组件:
- 统计卡片组件
- 通用数据卡片组件
- 阅读路径组件
它们的共同特点是:
- 只接收 props
- 不自己查数据
- 不引入额外状态
- 可以在多个页面复用
这让站点的增强点足够集中,也更符合文档站的长期维护方式。
为什么专题页需要“阅读路径”而不仅是“推荐列表”
推荐列表可以告诉用户“这些内容值得看”,但阅读路径才能告诉用户“先看哪个,再看哪个”。
两者的差别,本质上是:
- 列表在做集合展示
- 路径在做顺序引导
对于 Vue / Nuxt、工程化、AI 这类主题,阅读顺序本身就是理解成本的一部分。所以这轮我更希望专题页开始具备一些轻量策展能力。
结语
从 M0 到 M4,这个仓库里的 Markdown 内容已经从分散资料,逐步变成了一个:
- 可构建
- 可浏览
- 可搜索
- 可发布
- 可导览
的知识站点。
接下来如果继续往前推进,更值得做的方向就会从“把入口做出来”,逐步转向“把重点内容真正打磨成有观点的知识产品”。
