Frontmatter

lang

  • Type: string

  • Details:

    Language for the page.

    This will override the lang option in your site config.

  • Also see:

title

  • Type: string

  • Details:

    Title for the page.

    If you don’t specify title in frontmatter, content of the first level-one header (i.e. # title) will be used as the title.

description

  • Type: string

  • Details:

    Description for the page.

    This will override the description option in your site config.

  • Also see:

head

  • Type: HeadConfig[]

  • Details:

    Extra tags in <head> tag for the page.

  • Example:

  1. ---
  2. head:
  3.   - - meta
  4.     - name: foo
  5.       content: bar
  6.   - - link
  7.     - rel: canonical
  8.       href: foobar
  9. ---

Rendered as:

  1. <head>
  2.   <meta name="foo" content="bar" />
  3.   <link rel="canonical" href="foobar" />
  4. </head>

date

permalink

permalinkPattern

  • Type: string

  • Details:

    Pattern to generate permalink for the page.

    This won’t take effect if the permalink frontmatter has been set.

  • Usage:

    PatternDescription
    :yearYear part of created date
    :monthMonth part of created date
    :dayDay part of created date
    :slugSlug of page filename
    :rawRaw route path

    The :year, :month and :day patterns are resolved according to the following priority:

    • The date frontmatter.
    • The filename that matches the date pattern yyyy-MM-dd-foobar.md or yyyy-MM-foobar.md.
    • The dirname that matches the date pattern yyyy/MM/dd/foobar.md or yyyy/MM/foobar.md.
    • Fallback to 0000-00-00.

  • Example 1:

    The page filename is foo-bar.md.

    The page frontmatter is:

  1. ---
  2. date: 2021-01-03
  3. permalinkPattern: :year/:month/:day/:slug.html
  4. ---

Then the permalink of the page would be 2021/01/03/foo-bar.html.

  • Example 2:

    The page filename is 2021-01-03-bar-baz.md.

    The page frontmatter is:

  1. ---
  2. permalinkPattern: :year/:month/:day/:slug.html
  3. ---

Then the permalink of the page would be 2021/01/03/bar-baz.html.

layout

  • Type: string

  • Details:

    Layout for the page.

    Layouts are provided by theme. If you don’t specify this frontmatter, the default layout will be used. You should refer to the theme’s own documentation to find what layouts it provides.

    If the theme layouts cannot meet your needs, you can use a custom layout component.

  • Example:

Register a layout component in .vuepress/clientAppEnhance.ts file:

  1. import { defineClientAppEnhance } from '@vuepress/client'
  2. import CustomLayout from './CustomLayout.vue'
  4. export default defineClientAppEnhance(({ app }) => {
  5.   app.component('CustomLayout', CustomLayout)
  6. })

Set custom layout in frontmatter:

  1. ---
  2. layout: CustomLayout
  3. ---

externalIcon