布局

可以通过设置页面 frontmatter 选项来选择页面布局。有 3 种布局选项 doc、page 和 home。如果未指定任何内容，则该页面将被视为 doc 页面。

---
layout: doc
---

doc 布局

doc 是默认布局，它将整个 Markdown 内容设置为“documentation”外观。它的工作原理是将整个内容包装在 css vp-doc 类中，并将样式应用于它下面的元素。

几乎所有通用元素，例如 p 或 h2 都有特殊的样式。因此，请记住，如果在 Markdown 内容中添加任何自定义 HTML，这些内容也会受到这些样式的影响。

它还提供下面列出的文档特定功能。这些功能仅在此布局中启用。

• 编辑链接
• 上下页链接
• 大纲
• Carbon Ads

page 布局

page 被视为“空白页”。Markdown 仍然会被解析，所有的 Markdown 扩展 都和 doc 布局一样运行，但它没有任何默认样式。

page 布局使你可以自行设计所有内容，而不会受 VitePress 主题影响。当想要创建自己的自定义页面时，这很有用。

请注意，即使在此布局中，如果页面具有匹配的侧边栏配置，侧边栏仍会显示。

home 布局

home 将生成模板化的“主页”。在此布局中，可以设置额外的选项，例如 hero 和 features 以进一步自定义内容。请访问默认主题: 主页了解更多详情。

无布局

如果不想要任何布局，可以通过 frontmatter 传递 layout: false。如果想要一个完全可自定义的登录页面（默认情况下没有任何侧边栏、导航栏或页脚），此选项很有用。

自定义布局

默认主题的 Layout 只识别 doc / page / home / false 几种布局；其它字符串会被当作 doc 处理。若要支持自定义布局名，请提供自定义 Theme，并在自己的 Layout 里按 frontmatter 分支渲染（本项目 没有“全局注册组件后 layout: foo 自动命中”的机制）：

---
layout: foo
---

.vitepress-react/theme/Layout.tsx

.vitepress-react/theme/Layout.tsx

import { Content, useData } from '@10coding/vitepress-react'
import FooPage from './FooPage.tsx'

export default function Layout() {
  const { page, frontmatter } = useData()
  if (page.isNotFound) return <p>404</p>
  if (frontmatter.layout === 'foo') return <FooPage />
  return (
    <div className="vp-doc">
      <Content />
    </div>
  )
}

更多见自定义主题 / 构建布局。