Front Matter

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

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

---
meta:
  - 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.