帮助

# Front Matter

任何包含 YAML front matter 的 Markdown 文件都将由 gray-matter (opens new window) 处理。front matter 必须是 markdown 文件中的第一部分，并且必须采用在三点划线之间书写的有效的 YAML。 这是一个基本的例子：

---
title: Blogging with VuePress
lang: zh-CN
---

# {{ $frontmatter.title }}

My blog post is written in {{ $frontmatter.lang }}.
1
2
3
4
5
6
7
8

在这些三条虚线之间，你可以设置预定义变量（参见下面），甚至可以创建自己的自定义变量。 然后，您可以使用 $frontmatter 在页面的其余部分、以及所有的自定义和主题组件访问这些变量。

注意

在 VuePress 中，Front matter 是 可选的。

# 其他格式的 Front Matter

除了 YAML 之外，VuePress 也支持 JSON 或者 TOML (opens new window) 格式的 front matter。

JSON front matter 需要以花括号开头和结尾：

---
{
  "title": "Blogging Like a Hacker",
  "lang": "en-US"
}
---
1
2
3
4
5
6

TOML front matter 需要显式地标注为 TOML：

---toml
title = "Blogging Like a Hacker"
lang = "en-US"
---
1
2
3
4

# 预定义变量

# title

  • 类型: string
  • 默认值: h1_title || siteConfig.title

当前页面的标题, 自动生成的左侧目录的标题使用的是这个值。

# pageClass

  • 类型: string
  • 默认值: ``

设置当前页面的容器Dom的class,方便自定义页面样式，样式文件为 .vuepress/styles/index.styl。

注意

index.styl 中的自定义样式作用域一定要限定在 .theme-container.{自定义的class}内, 否则会造成其他页面的样式显示异常

markdown 中配置

---
pageClass: wide-screen
---
1
2
3

样式示例

.theme-container.wide-screen {
  .theme-default-content.content__default{
    width calc(100% - 400px)
    max-width 100%
  }
  .page-edit {
    margin 0 40px
  }
  .page-nav {
    max-width 1450px
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# lang

  • 类型: string
  • 默认值: en-US

当前页面的语言。

# description

  • 类型: string
  • 默认值: siteConfig.description

当前页面的描述。

# layout

  • 类型: string
  • 默认值: Layout

设置当前页面的布局组件。

  • 类型: string
  • 默认值: siteConfig.permalink

参考: Permalinks.

# metaTitle

  • 类型: string
  • 默认值: `${page.title} | ${siteConfig.title}`

重写默认的 meta title。

# meta

  • 类型: array
  • 默认值: undefined

指定额外的要注入的 meta 标签：

---
meta:
  - name: description
    content: hello
  - name: keywords
    content: super duper SEO
---
1
2
3
4
5
6
7

# 默认主题的预定义变量

  • 类型: boolean
  • 默认值: undefined

参考: 默认主题配置 > 禁用导航栏。

  • 类型: boolean|'auto'
  • 默认值: undefined

参考: 默认主题配置 > 侧边栏。

# prev

  • 类型: boolean|string
  • 默认值: undefined

参考: 默认主题配置 > 上 / 下一篇链接。

# next

  • 类型: boolean|string
  • 默认值: undefined

参考: 默认主题配置 > 上 / 下一篇链接。

  • 类型: boolean
  • 默认值: undefined

参考: 默认主题配置 > 内置搜索。

# tags

  • 类型: array
  • 默认值: undefined

参考: 默认主题配置 > 内置搜索。

# 扩展的变量

  • 类型: boolean
  • 默认值: true

当前页面是否显示面包屑

# autoPrev/autoNext

  • 更精准的排序需要在文件中添加 autoPrev 或 autoNext 并指定同目录下的文件名。

  • 将指定文件排在当前文件前：

---
autoPrev: other-filename
---
1
2
3

将指定文件排在当前文件后：

---
autoNext: other-filename
---
1
2
3
  • 注意，指向不存在的文件名时会导致当前文件不显示在侧边栏，并会在命令行提示 “xxx 文件指向了不存在的文件”。

# autoSort

  • 是比 autoPrev/autoNext 更简单的排序形式。

  • 所有文件会根据 autoSort 的大小进行排序，数值大的在前，数值小的在后，负数值会排在不具有 autoSort 属性的文件后。

  • 当同时存在autoGroup和autoSort配置时，同一组内文件间会以autoSort大小进行排序，组与组/文件之间会以autoGroup符号后面的数字大小进行排序。

---
autoSort: 1
---
1
2
3

# sidebarDepth

  • markdown 文件内的 sidebarDepth 会覆盖全局设置：
---
sidebarDepth: 2
---
1
2
3

# autoIgnore

  • 当你有文件不想显示在侧边栏时：
---
autoIgnore: true
---
1
2
3

# autoGroup

  • 如果希望一个文件夹内的文件再进一步分组：
---
autoGroup-2: 数组方法
# autoGroup+10: group10
---
1
2
3
4
  • 其中 - 和 + 二者选其一，- 代表在默认分组的下方，+ 代表在默认分组的上方，符号后面的数字会进一步决定分组的排序。
  • 当同时存在autoGroup和autoSort配置时，同一组内文件间会以autoSort大小进行排序，组与组/文件之间会以autoGroup符号后面的数字大小进行排序。

# sidebarHeaderText

  • 当你有文件不想显示在侧边栏时：
---
sidebarHeaderText: 目录头部标题
---
1
2
3

# sideCatalog

  • 类型: boolean
  • 默认值: undefined
  • 当你有页面想显示右侧锚点目录时：
---
sideCatalog: true
---
1
2
3

# linkPath

  • 类型: string
  • 默认值: undefined
  • 当你想让当前页面为外部链接时:
---
lintPath: 'http://baidu.com'
---
1
2
3

←