前置信息配置

前置信息允许基于页面的配置。在每个 Markdown 文件中，您可以使用前置信息配置来覆盖站点级或主题级配置选项。此外，还有一些配置选项只能在 前置信息中定义。

示例用法

---
title: Docs with VitePress
editLink: true
---

您可以通过 Vue 表达式中的 $frontmatter 全局变量访问前置信息数据

{{ $frontmatter.title }}

标题

• 类型：string

页面的标题。它与 config.title 相同，并且会覆盖站点级配置。

---
title: VitePress
---

titleTemplate

• 类型：string | boolean

标题的后缀。它与 config.titleTemplate 相同，并且会覆盖站点级配置。

---
title: VitePress
titleTemplate: Vite & Vue powered static site generator
---

描述

• 类型：string

页面的描述。它与 config.description 相同，并且会覆盖站点级配置。

---
description: VitePress
---

head

• 类型：HeadConfig[]

指定要为当前页面注入的额外头部标签。将附加到站点级配置注入的头部标签之后。

---
head:
  - - meta
    - name: description
      content: hello
  - - meta
    - name: keywords
      content: super duper SEO
---

type HeadConfig =
  | [string, Record<string, string>]
  | [string, Record<string, string>, string]

仅限默认主题

以下前置信息选项仅在使用默认主题时适用。

layout

• 类型：doc | home | page
• 默认值：doc

确定页面的布局。

• doc - 它将默认文档样式应用于 Markdown 内容。
• home - “主页”的特殊布局。您可以添加额外的选项，例如 hero 和 features，以快速创建漂亮的登录页面。
• page - 行为类似于 doc，但它不会将任何样式应用于内容。当您想要创建一个完全自定义的页面时很有用。

---
layout: doc
---

hero 仅限主页

当 layout 设置为 home 时，定义主页英雄部分的内容。有关更多详细信息，请参阅 默认主题：主页。

features 仅限主页

当 layout 设置为 home 时，定义要在功能部分显示的项目。有关更多详细信息，请参阅 默认主题：主页。

navbar

• 类型：boolean
• 默认值：true

是否显示 导航栏。

---
navbar: false
---

sidebar

• 类型：boolean
• 默认值：true

是否显示 侧边栏。

---
sidebar: false
---

aside

• 类型：boolean | 'left'
• 默认值：true

定义 doc 布局中 aside 组件的位置。

将此值设置为 false 会阻止渲染 aside 容器。
将此值设置为 true 会将 aside 渲染到右侧。
将此值设置为 'left' 会将 aside 渲染到左侧。

---
aside: false
---

outline

• 类型：number | [number, number] | 'deep' | false
• 默认值：2

要为页面显示的大纲中的标题级别。它与 config.themeConfig.outline.level 相同，并且会覆盖在站点级配置中设置的值。

lastUpdated

• 类型：boolean | Date
• 默认值：true

是否在当前页面的页脚中显示 最后更新 文本。如果指定了日期时间，它将显示而不是最后一次 Git 修改时间戳。

---
lastUpdated: false
---

editLink

• 类型：boolean
• 默认值：true

是否在当前页面的页脚中显示 编辑链接。

---
editLink: false
---

footer

• 类型：boolean
• 默认值：true

是否显示 页脚。

---
footer: false
---

pageClass

• 类型：string

向特定页面添加额外的类名。

---
pageClass: custom-page-class
---

然后您可以在 .vitepress/theme/custom.css 文件中自定义此特定页面的样式

.custom-page-class {
  /* page-specific styles */
}