这个起步模板刻意保持精简,所以最快的熟悉方式,就是先弄清哪些文件负责结构,哪些文件承载内容。

先看哪些地方

这个起步模板可以拆成几个清晰的层次:

  • pages/[locale]/index.tsx 保存落地页实现,pages/index.tsx 只保留默认语言路由别名。
  • pages/[locale]/docs.tsx 和 pages/[locale]/reference.tsx 保存集合概览实现。
  • pages/[locale]/docs/[...slug].tsx 和 pages/[locale]/reference/[...slug].tsx 是单个内容页面共享的 React 路由。
  • 每个 [...slug].server.ts 文件负责预渲染路径和页面级 head 元数据。
  • src/content/en-US/docs/**/*.md 与 src/content/zh-CN/docs/**/*.md 保存指南内容,包括嵌套目录。
  • src/content/en-US/reference/**/*.md 与 src/content/zh-CN/reference/**/*.md 保存偏 API 的内容。
  • src/components/docs-page.tsx 会把当前路由桥接到正确的 Markdown 页面。
  • src/components/docs-shell.tsx 控制共享的文档布局。
  • src/collections/collection.ts 为每个内容集合构建元数据、侧边栏分组、标题锚点,以及上一页/下一页链接。
  • void.config.ts 控制静态输出与默认元数据。

在本地运行

使用标准的 Vite+ 流程:

vp install
vp dev

然后打开:

  • http://localhost:5173/
  • http://localhost:5173/docs

做第一次修改

一个很好的第一步,是同时改一个 Markdown 文件和一个布局文件:

  1. 更新 src/content/en-US/docs/ 或 src/content/zh-CN/docs/ 中的页面,修改真正的文档文案。
  2. 如果你想测试嵌套侧边栏分组,就在 src/content/<locale>/docs/guides/ 中再加一个页面。
  3. 如果你想扩展参考分区,就在 src/content/<locale>/reference/ 中新增页面。
  4. 如果你想调整侧边栏、页头区域或页内目录,可以改 src/components/docs-shell.tsx。

这种分层让内容修改保持轻量,同时把视觉系统集中在一个地方维护。

前期先别急着加什么

你很容易会想立刻加入搜索、鉴权、API 路由或动态示例。第一轮先克制一下。对文档站来说,在功能列表继续膨胀之前,先让信息架构稳定下来,后续维护会轻松很多。

当你准备好调整文档的写法时,继续阅读 内容编写。