VuePressVuePress
  • Introduction
  • Getting Started
  • Configuration
  • Page
  • Markdown
  • Assets
  • I18n
  • Deployment
  • Theme
  • Plugin
  • Bundler
  • Migrating from v1
  • Troubleshooting
  • Core

    • CLI
    • Config
    • Frontmatter
    • Built-in Components
    • Plugin API
    • Theme API
    • Client API
    • Node API
  • Bundlers

    • Vite
    • Webpack
  • Ecosystem

    • Default Theme
    • Plugins
  • Advanced

    • Architecture
    • Writing a Plugin
    • Writing a Theme
    • Cookbook
  • Resources

    • Ecosystem
    • MarketPlace
    • Contributing Guide
  • Changelog
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • Introduction
  • Getting Started
  • Configuration
  • Page
  • Markdown
  • Assets
  • I18n
  • Deployment
  • Theme
  • Plugin
  • Bundler
  • Migrating from v1
  • Troubleshooting
  • Core

    • CLI
    • Config
    • Frontmatter
    • Built-in Components
    • Plugin API
    • Theme API
    • Client API
    • Node API
  • Bundlers

    • Vite
    • Webpack
  • Ecosystem

    • Default Theme
    • Plugins
  • Advanced

    • Architecture
    • Writing a Plugin
    • Writing a Theme
    • Cookbook
  • Resources

    • Ecosystem
    • MarketPlace
    • Contributing Guide
  • Changelog
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • Core

    • Command Line Interface
    • Config
    • Frontmatter
    • Built-in Components
    • Plugin API
    • Theme API
    • Client API
    • Node API
  • Bundlers

    • Vite
    • Webpack
  • Ecosystem

    • Default Theme
    • Plugins

Frontmatter

date

  • Type: string

  • Details:

    Created date for the page.

    You should specify the date in the form of yyyy-MM-dd, or follow the YAML Timestamp Type.

  • Also see:

    • Node API > Page Properties > date

description

  • Type: string

  • Details:

    Description for the page.

    This will override the description option in your site config.

  • Also see:

    • Config > description

head

  • 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>
  • Also see:
    • Config > head

lang

  • Type: string

  • Details:

    Language for the page.

    This will override the lang option in your site config.

  • Also see:

    • Config > lang
    • Node API > Page Properties > 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
---

permalink

  • Type: string | null

  • Details:

    Permalink for the page.

    This will override the default route path that determined by the file path of the page.

    When it is set to null, the permalink of the page will be disabled.

  • Also see:

    • Frontmatter > permalinkPattern
    • Guide > Page > Routing
    • Node API > Page Properties > permalink

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.

  • Also see:
    • Config > permalinkPattern
    • Frontmatter > date
    • Frontmatter > permalink
    • Node API > Page Properties > permalink

routeMeta

  • Type: Record<string, unknown>

  • Details:

    Custom data to be attached to the page route.

  • Also see:

    • Node API > Page Properties > 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:

    • Node API > Page Properties > title
Edit this page on GitHub
Last Updated:: 5/16/24, 12:45 PM
Contributors: meteorlxy, Mr.Hope, Xinyu Liu, 张怀文
Prev
Config
Next
Built-in Components