frontmatter in vuepress 3

Any markdown file that contains a YAML front matter block will be processed by gray-matter (opens new window). The front matter 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:

title: Blogging Like a Hacker
lang: en-US

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 Front matter variables are optional in VuePress. :::

# Alternative Front Matter Formats

In addition, VuePress also supports JSON or TOML (opens new window) front matter.

JSON front matter needs to start and end in curly braces:

  "title": "Blogging Like a Hacker",
  "lang": "en-US"

TOML front matter needs to be explicitly marked as TOML:

title = "Blogging Like a Hacker"
lang = "en-US"

# 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:

  - name: description
    content: hello
  - name: keywords
    content: super duper SEO

# Predefined Variables Powered By Default Theme

  • Type: boolean
  • Default: undefined

See: Default Theme Config > Disable the Navbar.

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

See: Default Theme Config > Sidebar.