VitePress 默认主题提供了 3 种核心布局,此外还支持“无布局”和完全自定义的布局。
布局类型速览
| 布局类型 | Frontmatter 配置 | 说明 |
|---|---|---|
| 文档布局 (Doc) | layout: doc | 默认布局,用于技术文档、博客文章等内容页。 |
| 页面布局 (Page) | layout: page | "空白页"布局,无默认样式,适合构建完全自定义的页面。 |
| 主页布局 (Home) | layout: home | 模板化主页,用于创建带 Hero 和 Features 板块的网站首页。 |
| 无布局 (No Layout) | layout: false | 移除所有主题UI元素(导航栏、侧边栏、页脚),创建“裸”页面。 |
| 自定义布局 (Custom) | layout: '组件名' | 使用你自己注册的 Vue 组件作为页面布局。 |
各布局详解
1. 文档布局 (doc)
这是默认布局,适合用来写文档或博客文章。它会自动应用一套为阅读优化的样式,并启用编辑链接、上下页导航、大纲等文档专属功能。
2. 页面布局 (page)
此布局提供了一个完全空白的画布。Markdown内容会被解析,但不会应用任何默认样式。它适合用来创建“关于我”、“项目展示”等定制化页面。
3. 主页布局 (home)
这是一个专门用来生成网站首页的模板化布局。通过 Frontmatter 配置 hero 和 features 字段,可以快速搭建一个美观的首页。
4. 无布局 (layout: false)
此设置会移除导航栏、侧边栏、页脚等所有主题UI元素,生成一个纯净的页面。适合制作单独的落地页或全屏应用。
5. 自定义布局
你可以创建自己的 Vue 组件作为布局。先在主题入口文件 (index.ts) 中全局注册组件,然后在页面的 Frontmatter 中指定即可。
如何使用
在你的 Markdown 文件顶部 Frontmatter 区域,通过 layout 字段指定即可:
---
layout: doc
# 或 layout: page
# 或 layout: home
# 或 layout: false
# 或 layout: '你的自定义组件名'
---如果不指定,默认使用 doc 布局。