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