Skip to content

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 配置 herofeatures 字段,可以快速搭建一个美观的首页。

4. 无布局 (layout: false)

此设置会移除导航栏、侧边栏、页脚等所有主题UI元素,生成一个纯净的页面。适合制作单独的落地页或全屏应用。

5. 自定义布局

你可以创建自己的 Vue 组件作为布局。先在主题入口文件 (index.ts) 中全局注册组件,然后在页面的 Frontmatter 中指定即可。

如何使用

在你的 Markdown 文件顶部 Frontmatter 区域,通过 layout 字段指定即可:

---
layout: doc
# 或 layout: page
# 或 layout: home
# 或 layout: false
# 或 layout: '你的自定义组件名'
---

如果不指定,默认使用 doc 布局。