vitepress/docs/en/reference/frontmatter-config.md

outline
deep

Frontmatter Config

Frontmatter enables page based configuration. In every Markdown file, you can use frontmatter configu to override site-level or theme-level configuration options. There are also config options which are frontmatter-exclusive.

Example usage:

---
title: Docs with VitePress
editLink: true
---

You can access frontmatter data via the $frontmatter global in Vue expressions:

{{ $frontmatter.title }}

title

• Type: string

Title for the page. It's same as config.title, and it overrides the site-level config.

---
title: VitePress
---

titleTemplate

• Type: string | boolean

The suffix for the title. It's same as config.titleTemplate, and it overrides the site-level config.

---
title: VitePress
titleTemplate: Vite & Vue powered static site generator
---

description

• Type: string

Description for the page. It's same as config.description, and it overrides the site-level config.

---
description: VitePress
---

head

• Type: HeadConfig[]

Specify extra head tags to be injected for the current page. Will be appended after the head tags injected by site-level config.

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

type HeadConfig =
  | [string, Record<string, string>]
  | [string, Record<string, string>, string]

Default Theme Only

The following frontmatter options are only applicable when using the default theme.

layout

• Type: doc | home | page
• Default: doc

Determines the layout of the page.

• doc - It applies default documentation styles to the markdown content.
• home - Special layout for the home page. You can add extra options such as hero and features to create a beautiful landing page rapidly.
• page - Behaves similar to doc, but it applies no styles to the content. Useful when you want to create a fully custom page.

---
layout: doc
---

hero

Defines the contents of home hero section when the layout is set to home. More details in Default Theme: Home Page.

features

Defines the items to display in the features section when the layout is set to home. More details in Default Theme: Home Page.

navbar

• Type: boolean
• Default: true

Whether to display the navbar.

---
navbar: false
---

sidebar

• Type: boolean
• Default: true

Whether to display the sidebar.

---
sidebar: false
---

footer

• Type: boolean
• Default: true

Whether to display the footer.

---
footer: false
---

aside

• Type: boolean | 'left'
• Default: true

Defines the location of the aside component in the doc layout.

Setting this value to false prevents rendering of aside container.
Setting this value to true renders the aside to the right.
Setting this value to 'left' renders the aside to the left.

---
aside: false
---

outline

• Type: number | [number, number] | 'deep' | false
• Default: 2

The levels of header in the outline to display for the page. It's same as config.themeConfig.outline.level, and it overrides the value set in site-level config.

---
outline: [2, 4]
---

lastUpdated

• Type: boolean | Date
• Default: true

Whether to display last updated text in the footer of the current page. If a datetime is specified, it will be displayed instead of the last Git modified timestamp.

---
lastUpdated: false
---

editLink

• Type: boolean
• Default: true

Whether to display an edit link in the footer of the current page.

---
editLink: false
---

pageClass

• Type: string

Add extra CSS classes to a specific page.

---
pageClass: custom-page-class
---

You can then customize styles of that specific page in .vitepress/theme/custom.css:

.custom-page-class {
  /* page-specific styles */
}

isHome

• Type: boolean

The default theme relies on checks like frontmatter.layout === 'home' to determine if the current page is the home page.
This is useful when you want to force show the home page elements in a custom layout.

---
isHome: true
---