Frontmatter

Any Markdown file that contains a YAML frontmatter block will be processed by gray-matterFrontmatter - 图1. The frontmatter must be the first thing in the Markdown file and must take the form of valid YAML set between triple-dashed lines. Here is a basic example:

  1. ---
  2. title: Blogging Like a Hacker
  3. lang: en-US
  4. ---

Between these triple-dashed lines, you can set predefined variables (see below for a reference), or even create custom ones of your own. These variables will then be available to you to access using $frontmatter at the rest of the page, plus all custom and theming components.

TIP

frontmatter variables are optional in VuePress.

Alternative frontmatter Formats

VuePress also supports JSON or TOMLFrontmatter - 图2 frontmatter.

JSON frontmatter needs to start and end in curly braces:

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

TOML frontmatter needs to be explicitly marked as TOML:

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

Predefined Variables

title

  • Type: string
  • Default: h1_title || siteConfig.title

Title of current page.

lang

  • Type: string
  • Default: en-US

Language of current page.

description

  • Type: string
  • Default: siteConfig.description

Description of current page.

layout

  • Type: string
  • Default: Layout

Set the layout component of the current page.

  • Type: string
  • Default: siteConfig.permalink

Refer to: Permalinks.

metaTitle

  • Type: string
  • Default: ${page.title} | ${siteConfig.title}

Override the default meta title.

meta

  • Type: array
  • Default: undefined

Specify extra meta tags to be injected:

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

Predefined Variables Powered By Default Theme

navbar

  • Type: boolean
  • Default: undefined

See: Default Theme Config > Disable the Navbar.

sidebar

  • Type: boolean|'auto'
  • Default: undefined

See: Default Theme Config > Sidebar.

prev

  • Type: boolean|string
  • Default: undefined

See: Default Theme Config > Prev / Next Links.

next

  • Type: boolean|string
  • Default: undefined

See: Default Theme Config > Prev / Next Links.