vike-vue-content

vike-vue-content 是什么，能帮你做什么。

vike-vue-content

vike-vue-content 是一个面向 Vike + Vue 的内容渲染框架。把 Markdown 文件放进内容目录，它会自动生成路由、侧边栏导航、页面目录和上下页导航，并附带一套开箱即用的主题系统。

整站文档本身就是用 vike-vue-content 渲染的——你正在阅读的页面就是一个真实的运行示例。

为什么用它

  • 内容即路由：content/**/*.md 的目录结构直接映射为页面路径，无需手写路由表。
  • 零样板页面：Page 与 data 由 config 自动挂载，新增一篇文档只要写 Markdown。
  • 完整的文档外壳：侧边栏、页面目录（TOC）、上下页导航都是现成组件。
  • 实时 Demo：自动注册 demosDir 下的 .vue 示例，并在 Markdown 中渲染实时预览和源码 Tab。
  • 主题系统：18 种主色调（含 black）、深浅色模式、圆角与字体自定义，且无 FOUC 闪烁。
  • 预渲染友好：内置 onBeforePrerenderStart 钩子，自动枚举所有内容路径生成静态 HTML。
  • 多入口/多语言：不同的页面目录可以承载不同的内容集合（collection），天然支持多语言站点。

核心概念

概念说明
Collection（集合）一组内容的命名空间，对应内容目录下的一个顶层目录，如 zh-CN、en-US。
Base（路由前缀）docs 页面挂载的 URL 前缀，由页面文件在 pages/ 中的位置推导，如 /zh-CN。
Content Entry（内容条目）一篇 Markdown 解析后的结构化数据：标题、描述、目录、正文 AST 等。
Navigation（导航树）由内容目录结构和 .config.yml / frontmatter 生成的侧边栏树。

下一步