Configuração Frontmatter

Frontmatter permite a configuração baseada em páginas. Em cada arquivo markdown, você pode usar a configuração frontmatter para sobrepor opções de configuração a nível de site ou de tema. Além disso, existem opções de configuração que só podem ser definidas em frontmatter.

Exemplo de uso:

--- title: Documentação com VitePress editLink: true ---

Você pode acessar os dados do frontmatter através da variável global $frontmatter em expressões Vue:

{{ $frontmatter.title }}

title

• Tipo: string

Título para a página. É o mesmo que config.title, e sobrepõe a configuração a nível de site.

--- title: VitePress ---

titleTemplate

• Tipo: string | boolean

O sufixo para o título. É o mesmo que config.titleTemplate, e sobrepõe a configuração a nível de site.

--- title: VitePress titleTemplate: Gerador de site estático com Vite & Vue ---

description

• Tipo: string

Descrição para a página. É o mesmo que config.description, e sobrepõe a configuração a nível de site.

--- description: VitePress ---

head

• Tipo: HeadConfig[]

Especifica tags head adicionais a serem injetadas na página atual. Elas serão acrescentadas após as tags head injetadas pela configuração a nível de site.

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

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

Somente no Tema Padrão

As seguintes opções frontmatter são aplicáveis apenas ao usar o tema padrão.

layout

• Tipo: doc | home | page
• Padrão: doc

Determina o layout da página.

• doc - Aplica estilos de documentação padrão ao conteúdo markdown.
• home - Layout especial para a "Página Inicial". Você pode adicionar opções extras como hero e features para criar rapidamente uma bela página inicial.
• page - Comporta-se de maneira semelhante a doc, mas não aplica estilos ao conteúdo. Útil quando você deseja criar uma página totalmente personalizada.

--- layout: doc ---

hero apenas para página inicial

Define o conteúdo da seção hero na página inicial quando layout está definido como home. Mais detalhes em Tema Padrão: Página Inicial.

features apenas para página inicial

Define os itens a serem exibidos na seção de funcionalidades quando layout está definido como home. Mais detalhes em Tema Padrão: Página Inicial.

navbar

• Tipo: boolean
• Padrão: true

Se deve exibir a barra de navegação.

--- navbar: false ---

sidebar

• Tipo: boolean
• Padrão: true

Se deve exibir a barra lateral.

--- sidebar: false ---

aside

• Tipo: boolean | 'left'
• Padrão: true

Define a localização do componente aside no layout doc.

Configurar este valor como false impede a apresentação do elemento aside.
Configurar este valor como true apresenta o aside à direita.
Configurar este valor como 'left' apresenta o aside à esquerda.

--- aside: false ---

outline

• Tipo: number | [number, number] | 'deep' | false
• Padrão: 2

Os níveis do cabeçalho no outline a serem exibidos para a página. É o mesmo que config.themeConfig.outline.level, e sobrepõe o valor definido na configuração no nível do site.

lastUpdated

• Tipo: boolean | Date
• Padrão: true

Se deve mostrar o texto de última atualização no rodapé da página atual. Se uma data e hora específica forem especificadas, ela será exibida em vez do último horário de modificação do git.

--- lastUpdated: false ---

editLink

• Tipo: boolean
• Padrão: true

Se deve exibir o link de edição no rodapé da página atual.

--- editLink: false ---

footer

• Tipo: boolean
• Padrão: true

Se deve exibir o rodapé.

--- footer: false ---

pageClass

• Tipo: string

Adiciona um nome de classe extra a uma página específica.

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

Em seguida, você pode personalizar os estilos desta página específica no arquivo .vitepress/theme/custom.css:

.custom-page-class {  /* estilos específicos da página */ }