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 */
}