Skip to content

Frontmatter

YAML Frontmatter

VitePress 支持在所有 Markdown 文件中使用 YAML frontmatter,使用 gray-matter 解析。frontmatter 必须在 Markdown 文件的顶部(在任何元素之前,包括 <script> 标签),并且需要在三点划线之间设置有效的 YAML。示例:

yaml
---
title: Docs with VitePress
editLink: false
---

在三点划线之间,你可以设置预定义变量,甚至可以创建自己的自定义变量。这些变量可以通过特殊的 $frontmatter 全局变量使用。

这里有一个如何在你的 Markdown 文件中使用它的例子:

md
---
title: Docs with VitePress
editLink: false
---

# {{ $frontmatter.title }}

Guide content

替代 Frontmatter 格式

VitePress 还支持 JSON frontmatter 语法,以花括号开头和结尾:

json
---
{
  "title": "Blogging Like a Hacker",
  "editLink": false
}
---

访问 Frontmatter 数据

Frontmatter 数据可以通过特殊的 $frontmatter 全局变量访问:

这里有一个如何在你的 Markdown 文件中使用它的例子:

md
---
title: Docs with VitePress
editLink: false
---

# {{ $frontmatter.title }}

Guide content

你也可以在 <script setup> 中访问当前页面的 frontmatter 数据:

vue
<script setup>
import { useData } from 'vitepress'

const { frontmatter } = useData()
</script>

<template>
  <h1>{{ frontmatter.title }}</h1>
</template>

请注意,在上面的示例中,frontmatter 是一个 Ref,因此需要使用 .value 访问其值(如果在 <script setup> 中使用)。但是,在模板中使用时,它会自动解包,因此不需要 .value

vitepress开发指南