vike-vue-content

content 目录如何自动映射为 Vike 页面路由。

内容驱动路由

vike-vue-content 把内容目录的结构直接映射为页面路由,你不需要手写路由表。

目录到路由的映射

每个 docs 页面锚点(pages/<base>/)绑定一个 collection。collection 就是内容目录下的顶层目录名。该 collection 下的 Markdown 文件,按相对路径映射到 <base> 下:

内容文件CollectionBase访问路径
content/docs/index.mddocs/docs/docs
content/docs/getting-started.mddocs/docs/docs/getting-started
content/docs/guide/routing.mddocs/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,整站可直接部署为纯静态文件。