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
。