Frontmatter 配置
Frontmatter 是页面顶部的 YAML 配置块，用于控制单个页面的行为和外观。
基础语法
在 Markdown 文件顶部使用 --- 包围 YAML 配置：
markdown
---
title: 页面标题
description: 页面描述
---
# 页面内容
这里是页面的正文内容...全局 Frontmatter
所有页面都可使用的配置项：
站点元数据
| 字段 | 类型 | 说明 |
|---|---|---|
title | string | 页面标题，会追加到站点标题后 |
titleTemplate | string | boolean | 标题模板，设为 false 可禁用 |
description | string | 页面描述，用于 SEO |
head | array | 额外的 head 标签 |
lang | string | 页面语言，默认 en-US |
markdown
---
title: 快速开始
description: 五分钟上手 VitePress
lang: zh-CN
---布局控制
| 字段 | 类型 | 说明 |
|---|---|---|
layout | string | 页面布局：doc、page、home |
layoutClass | string | 自定义布局类名 |
markdown
---
layout: doc
---功能开关
| 字段 | 类型 | 说明 |
|---|---|---|
sidebar | boolean | 是否显示侧边栏 |
outline | number | [number, number] | false | 大纲层级 |
lastUpdated | boolean | 是否显示最后更新时间 |
editLink | boolean | 是否显示编辑链接 |
markdown
---
sidebar: false
outline: [2, 4]
lastUpdated: true
---首页 Frontmatter
当 layout: home 时的专用配置：
Hero 区域
yaml
---
layout: home
hero:
name: VitePress # 品牌名称（带渐变效果）
text: 学习指南 # 主标题
tagline: 从零开始学习 # 副标题
image:
src: /hero.png # 图片路径
alt: Hero 图片 # 图片描述
actions:
- theme: brand # 按钮主题：brand | alt
text: 开始学习 # 按钮文字
link: /guide/ # 跳转链接
- theme: alt
text: GitHub
link: https://github.com/vuejs/vitepress
---Features 区域
yaml
---
layout: home
features:
- title: 🚀 极速开发
details: 基于 Vite 构建，提供毫秒级的热更新
icon: 🚀 # 可选：图标（emoji 或图片）
link: /guide/ # 可选：点击跳转链接
linkText: 了解更多 # 可选：链接文字
- title: 📦 优化构建
details: 自动代码分割和资源优化
- title: 🎨 主题定制
details: 灵活的主题系统
---文档页 Frontmatter
默认布局 layout: doc 的配置：
页面导航
markdown
---
title: 配置参考
outline: deep
---outline 选项：
deep：等同于[2, 6]，显示所有标题number：指定最大层级，如3等同于[2, 3][number, number]：指定范围，如[2, 4]false：禁用大纲
导航控制
markdown
---
prev: 上一页
next: 下一页
---或自定义链接：
markdown
---
prev:
text: 入门指南
link: /guide/
next:
text: 高级配置
link: /advanced/
---禁用导航：
markdown
---
prev: false
next: false
---自定义 Head 标签
为单个页面添加 head 标签：
markdown
---
head:
- - meta
- name: keywords
content: VitePress, 静态站点, 文档
- - link
- rel: canonical
href: https://example.com/page
---生成的 HTML：
html
<head>
<meta name="keywords" content="VitePress, 静态站点, 文档">
<link rel="canonical" href="https://example.com/page">
</head>完整示例
markdown
---
title: 快速开始
titleTemplate: VitePress 学习指南
description: 五分钟快速上手 VitePress
layout: doc
sidebar: true
outline: [2, 4]
lastUpdated: true
editLink: true
head:
- - meta
- name: keywords
content: VitePress, 快速开始
prev:
text: 什么是 VitePress
link: /guide/what-is-vitepress
next:
text: 项目结构
link: /guide/project-structure
---
# 快速开始
页面内容...在组件中访问 Frontmatter
在 Vue 组件中可以通过 useData 访问：
vue
<script setup>
import { useData } from 'vitepress'
const { frontmatter } = useData()
</script>
<template>
<h1>{{ frontmatter.title }}</h1>
<p>{{ frontmatter.description }}</p>
</template>下一步
接下来学习 配置文件详解 来配置整个站点。