content 目录如何自动映射为 Vike 页面路由。
内容驱动路由
vike-vue-content 把内容目录的结构直接映射为页面路由,你不需要手写路由表。
目录到路由的映射
每个 docs 页面锚点(pages/<base>/)绑定一个 collection。collection 就是内容目录下的顶层目录名。该 collection 下的 Markdown 文件,按相对路径映射到 <base> 下:
| 内容文件 | Collection | Base | 访问路径 |
|---|---|---|---|
content/docs/index.md | docs | /docs | /docs |
content/docs/getting-started.md | docs | /docs | /docs/getting-started |
content/docs/guide/routing.md | docs | /docs | /docs/guide/routing |
也就是说,访问路径 = base + 去掉 collection 前缀后的相对路径。
index 文件
目录下的 index.md 映射为该目录本身的路径,而不是 /index:
| 内容文件 | 访问路径 |
|---|---|
content/docs/index.md | /docs |
content/docs/guide/index.md | /docs/guide |
数字前缀排序
文件名和目录名可以加 数字. 前缀来控制顺序(对标 Nuxt Content)。前缀只参与排序,不会出现在最终路由里:
content/docs/
├── 1.introduction.md → /docs/introduction
├── 2.getting-started.md → /docs/getting-started
└── guide/
├── 1.routing.md → /docs/guide/routing
└── 2.frontmatter.md → /docs/guide/frontmatter排序对侧边栏导航和上下页导航的顺序都生效。
Base 来自文件系统位置
docs 页面的访问前缀(base)由锚点目录在 pages/ 中的物理位置决定:
| 锚点目录 | Base |
|---|---|
pages/docs/ | /docs |
pages/zh-CN/ | /zh-CN |
pages/guide/api/ | /guide/api |
正因如此,createDocsRoute() 和 createDocsPrerender() 才能零参数调用——base 在编译期从路径推导,不需要你手动配置。
多入口与多语言
把不同 collection 挂到不同的页面目录,就能在同一个站点里并存多套独立的文档树。本示例站点就用两个 collection 实现中英文:
pages/
├── zh-CN/ → collection: zh-CN, base: /zh-CN
└── en-US/ → collection: en-US, base: /en-US
content/
├── zh-CN/ # 中文内容
└── en-US/ # 英文内容每个入口的路由、导航和预渲染都互相隔离,互不影响。
预渲染
createDocsPrerender() 返回的 onBeforePrerenderStart 钩子会枚举 collection 下所有内容路径(去掉排序前缀后的最终公开路径),逐页生成静态 HTML。配合全局 prerender: true,整站可直接部署为纯静态文件。