Skip to main content

Frontmatter

December 3, 2023About 2 min

Frontmatter

date

description

  • Type: string

  • Details:

    Description for the page.

    This will override the description option in your site config.

  • Also see:

  • Type: HeadConfig[]

  • Details:

    Extra tags in <head> tag for the page.

  • Example:

---
head:
  - - meta
    - name: foo
      content: yaml array syntax
  - [meta, { name: bar, content: square brackets syntax }]
---

Rendered as:

<head>
  <meta name="foo" content="yaml array syntax" />
  <meta name="bar" content="square brackets syntax" />
</head>

lang

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/client.ts file:

import { defineClientConfig } from 'vuepress/client'
import CustomLayout from './CustomLayout.vue'

export default defineClientConfig({
  layouts: {
    CustomLayout,
  },
})

Set custom layout in frontmatter:

---
layout: CustomLayout
---

permalinkPattern

  • Type: string | null

  • Details:

    Pattern to generate permalink for the page.

    This will override the permalinkPattern option in your site config.

    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:

---
date: 2021-01-03
permalinkPattern: :year/:month/:day/:slug.html
---

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:

---
permalinkPattern: :year/:month/:day/:slug.html
---

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

routeMeta

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.

  • Also see: