这个起步模板刻意保持精简,所以最快的熟悉方式,就是先弄清哪些文件负责结构,哪些文件承载内容。
先看哪些地方
这个起步模板可以拆成几个清晰的层次:
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 文件和一个布局文件:
- 更新
src/content/en-US/docs/或src/content/zh-CN/docs/中的页面,修改真正的文档文案。 - 如果你想测试嵌套侧边栏分组,就在
src/content/<locale>/docs/guides/中再加一个页面。 - 如果你想扩展参考分区,就在
src/content/<locale>/reference/中新增页面。 - 如果你想调整侧边栏、页头区域或页内目录,可以改
src/components/docs-shell.tsx。
这种分层让内容修改保持轻量,同时把视觉系统集中在一个地方维护。
前期先别急着加什么
你很容易会想立刻加入搜索、鉴权、API 路由或动态示例。第一轮先克制一下。对文档站来说,在功能列表继续膨胀之前,先让信息架构稳定下来,后续维护会轻松很多。
当你准备好调整文档的写法时,继续阅读 内容编写。