|
|
---
|
|
|
outline: deep
|
|
|
---
|
|
|
|
|
|
# frontmatter 配置 {#frontmatter-config}
|
|
|
|
|
|
frontmatter 支持基于页面的配置。在每个 markdown 文件中，可以使用 frontmatter 配置来覆盖站点级别或主题级别的配置选项。此外，还有一些配置选项只能在 frontmatter 中定义。
|
|
|
|
|
|
示例用法：
|
|
|
|
|
|
```md
|
|
|
---
|
|
|
title: Docs with VitePress
|
|
|
editLink: true
|
|
|
---
|
|
|
```
|
|
|
|
|
|
可以通过 Vue 表达式中的 `$frontmatter` 全局变量访问 frontmatter 数据：
|
|
|
|
|
|
```md
|
|
|
{{ $frontmatter.title }}
|
|
|
```
|
|
|
|
|
|
## title
|
|
|
|
|
|
- 类型：`string`
|
|
|
|
|
|
页面的标题。它与 [config.title](./site-config#title) 相同，并且覆盖站点级配置。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
title: VitePress
|
|
|
---
|
|
|
```
|
|
|
|
|
|
## titleTemplate
|
|
|
|
|
|
- 类型：`string | boolean`
|
|
|
|
|
|
标题的后缀。它与 [config.titleTemplate](./site-config#titletemplate) 相同，它会覆盖站点级别的配置。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
title: VitePress
|
|
|
titleTemplate: Vite & Vue powered static site generator
|
|
|
---
|
|
|
```
|
|
|
|
|
|
## description
|
|
|
|
|
|
- 类型：`string`
|
|
|
|
|
|
页面的描述。它与 [config.description](./site-config#description) 相同，它会覆盖站点级别的配置。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
description: VitePress
|
|
|
---
|
|
|
```
|
|
|
|
|
|
## head
|
|
|
|
|
|
- 类型：`HeadConfig[]`
|
|
|
|
|
|
指定要为当前页面注入的额外 head 标签。将附加在站点级配置注入的头部标签之后。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
head:
|
|
|
- - meta
|
|
|
- name: description
|
|
|
content: hello
|
|
|
- - meta
|
|
|
- name: keywords
|
|
|
content: super duper SEO
|
|
|
---
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
type HeadConfig =
|
|
|
| [string, Record<string, string>]
|
|
|
| [string, Record<string, string>, string]
|
|
|
```
|
|
|
|
|
|
## 仅默认主题 {#default-theme-only}
|
|
|
|
|
|
以下 frontmatter 选项仅在使用默认主题时适用。
|
|
|
|
|
|
### layout
|
|
|
|
|
|
- 类型：`doc | home | page`
|
|
|
- 默认值：`doc`
|
|
|
|
|
|
指定页面的布局。
|
|
|
|
|
|
- `doc`——它将默认文档样式应用于 markdown 内容。
|
|
|
- `home`——“主页”的特殊布局。可以添加额外的选项，例如 `hero` 和 `features`，以快速创建漂亮的落地页。
|
|
|
- `page`——表现类似于 `doc`，但它不对内容应用任何样式。当想创建一个完全自定义的页面时很有用。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
layout: doc
|
|
|
---
|
|
|
```
|
|
|
|
|
|
### hero <Badge type="info" text="home page only" />
|
|
|
|
|
|
当 `layout` 设置为 `home` 时，定义主页 hero 部分的内容。更多详细信息：[默认主题：主页](./default-theme-home-page)。
|
|
|
|
|
|
### features <Badge type="info" text="home page only" />
|
|
|
|
|
|
定义当`layout` 设置为 `home` 时要在 features 部分中显示的项目。更多详细信息：[默认主题：主页](./default-theme-home-page)。
|
|
|
|
|
|
### navbar
|
|
|
|
|
|
- 类型：`boolean`
|
|
|
- 默认值：`true`
|
|
|
|
|
|
是否显示[导航栏](./default-theme-nav)。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
navbar: false
|
|
|
---
|
|
|
```
|
|
|
|
|
|
### sidebar
|
|
|
|
|
|
- 类型：`boolean`
|
|
|
- 默认值：`true`
|
|
|
|
|
|
是否显示 [侧边栏](./default-theme-sidebar).
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
sidebar: false
|
|
|
---
|
|
|
```
|
|
|
|
|
|
### aside
|
|
|
|
|
|
- 类型：`boolean | 'left'`
|
|
|
- 默认值：`true`
|
|
|
|
|
|
定义侧边栏组件在 `doc` 布局中的位置。
|
|
|
|
|
|
将此值设置为 `false` 可禁用侧边栏容器。\
|
|
|
将此值设置为 `true` 会将侧边栏渲染到右侧。\
|
|
|
将此值设置为 `left` 会将侧边栏渲染到左侧。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
aside: false
|
|
|
---
|
|
|
```
|
|
|
|
|
|
### outline
|
|
|
|
|
|
- 类型：`number | [number, number] | 'deep' | false`
|
|
|
- 默认值：`2`
|
|
|
|
|
|
大纲中显示的标题级别。它与 [config.themeConfig.outline.level](./default-theme-config#outline) 相同，它会覆盖站点级的配置。
|
|
|
|
|
|
### lastUpdated
|
|
|
|
|
|
- 类型：`boolean | Date`
|
|
|
- 默认值：`true`
|
|
|
|
|
|
是否在当前页面的页脚中显示[最后更新时间](./default-theme-last-updated)的文本。如果指定了日期时间，则会显示该日期时间而不是上次 git 修改的时间戳。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
lastUpdated: false
|
|
|
---
|
|
|
```
|
|
|
|
|
|
### editLink
|
|
|
|
|
|
- 类型：`boolean`
|
|
|
- 默认值：`true`
|
|
|
|
|
|
是否在当前页的页脚显示[编辑链接](./default-theme-edit-link)。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
editLink: false
|
|
|
---
|
|
|
```
|
|
|
|
|
|
### footer
|
|
|
|
|
|
- 类型：`boolean`
|
|
|
- 默认值：`true`
|
|
|
|
|
|
是否显示[页脚](./default-theme-footer)。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
footer: false
|
|
|
---
|
|
|
```
|
|
|
|
|
|
### pageClass
|
|
|
|
|
|
- 类型：`string`
|
|
|
|
|
|
将额外的类名称添加到特定页面。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
pageClass: custom-page-class
|
|
|
---
|
|
|
```
|
|
|
|
|
|
然后可以在 `.vitepress/theme/custom.css` 文件中自定义该特定页面的样式：
|
|
|
|
|
|
```css
|
|
|
.custom-page-class {
|
|
|
/* 特定页面的样式 */
|
|
|
}
|
|
|
```
|
