Frontmatter

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

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

frontmatter variables are optional in VuePress.

Alternative frontmatter Formats

VuePress also supports JSON or TOML frontmatter.

JSON frontmatter needs to start and end in curly braces:

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

TOML frontmatter 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.