FrontMatter
更新: 2/10/2025 字数: 0 字 时长: 0 分钟
frontmatter 支持基于页面的配置。在每个 markdown 文件中，可以使用 frontmatter 配置来覆盖站点级别或主题级别的配置选项。此外，还有一些配置选项只能在 frontmatter 中定义。
用法
VitePress 支持在所有 Markdown 文件中使用 YAML frontmatter，并使用 gray-matter 解析。frontmatter 必须位于 Markdown 文件的顶部 (在任何元素之前，包括 <script> 标签)，并且需要在三条虚线之间采用有效的 YAML 格式。例如：
---
title: Docs with VitePress
editLink: true
---许多站点或默认主题配置选项在 frontmatter 中都有相应的选项。可以使用 frontmatter 来覆盖当前页面的特定行为。详细信息请参见 frontmatter 配置参考。
还可以定义自己的 frontmatter 数据，以在页面上的动态 Vue 表达式中使用。
访问 frontmatter 数据
frontmatter 数据可以通过特殊的 $frontmatter 全局变量来访问：
下面的例子展示了应该如何在 Markdown 文件中使用它：
---
title: Docs with VitePress
editLink: true
---
# {{ $frontmatter.title }}
Guide content还可以使用 useData() 辅助函数在 <script setup> 中访问当前页面的 frontmatter。
其他 frontmatter 格式
VitePress 也支持 JSON 格式的 frontmatter，以花括号开始和结束：
---
{
"title": "Blogging Like a Hacker",
"editLink": true
}
---参数命名
title
- 类型：
string
页面的标题。它与 config.title 相同，并且覆盖站点级配置。
---
title: VitePress
---titleTemplate
- 类型：
string | boolean
标题的后缀。它与 config.titleTemplate 相同，它会覆盖站点级别的配置。
---
title: VitePress
titleTemplate: Vite & Vue powered static site generator
---description
- 类型：
string
页面的描述。它与 config.description 相同，它会覆盖站点级别的配置。
---
description: VitePress
---head
- 类型：
HeadConfig[]
指定要为当前页面注入的额外 head 标签。将附加在站点级配置注入的头部标签之后。
---
head:
- - meta
- name: description
content: hello
- - meta
- name: keywords
content: super duper SEO
---type HeadConfig = [string, Record<string, string>] | [string, Record<string, string>, string]仅默认主题
以下 frontmatter 选项仅在使用默认主题时适用。
layout
- 类型：
doc | home | page - 默认值：
doc
指定页面的布局。
doc——它将默认文档样式应用于 markdown 内容。home——“主页”的特殊布局。可以添加额外的选项，例如hero和features，以快速创建漂亮的落地页。page——表现类似于doc，但它不对内容应用任何样式。当想创建一个完全自定义的页面时很有用。
---
layout: doc
---hero home page only
当 layout 设置为 home 时，定义主页 hero 部分的内容。更多详细信息：默认主题：主页。
features home page only
定义当layout 设置为 home 时要在 features 部分中显示的项目。更多详细信息：默认主题：主页。
navbar
- 类型：
boolean - 默认值：
true
是否显示导航栏。
---
navbar: false
---sidebar
- 类型：
boolean - 默认值：
true
是否显示 侧边栏.
---
sidebar: false
---aside
- 类型：
boolean | 'left' - 默认值：
true
定义侧边栏组件在 doc 布局中的位置。
将此值设置为 false 可禁用侧边栏容器。
将此值设置为 true 会将侧边栏渲染到右侧。
将此值设置为 left 会将侧边栏渲染到左侧。
---
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 {
/* 特定页面的样式 */
}