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:
```md
---
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:
```md
{{ $frontmatter.title }}
```
## title
- Tipo: `string`
Título para a página. É o mesmo que [config.title](./site-config#title), e sobrepõe a configuração a nível de site.
```yaml
---
title: VitePress
---
```
## titleTemplate
- Tipo: `string | boolean`
O sufixo para o título. É o mesmo que [config.titleTemplate](./site-config#titletemplate), e sobrepõe a configuração a nível de site.
```yaml
---
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](./site-config#description), e sobrepõe a configuração a nível de site.
```yaml
---
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.
```yaml
---
head:
- - meta
- name: description
content: hello
- - meta
- name: keywords
content: super duper SEO
---
```
```ts
type HeadConfig =
| [string, Record<string,string>]
| [string, Record<string,string>, string]
```
## Somente no Tema Padrão {#default-theme-only}
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.
```yaml
---
layout: doc
---
```
### hero <Badge type="info" text="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](./default-theme-home-page).
### features <Badge type="info" text="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](./default-theme-home-page).
### navbar
- Tipo: `boolean`
- Padrão: `true`
Se deve exibir a [barra de navegação](./default-theme-nav).
```yaml
---
navbar: false
---
```
### sidebar
- Tipo: `boolean`
- Padrão: `true`
Se deve exibir a [barra lateral](./default-theme-sidebar).
```yaml
---
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.
Os níveis do cabeçalho no _outline_ a serem exibidos para a página. É o mesmo que [config.themeConfig.outline.level](./default-theme-config#outline), 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](./default-theme-last-updated) 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.
```yaml
---
lastUpdated: false
---
```
### editLink
- Tipo: `boolean`
- Padrão: `true`
Se deve exibir o [link de edição](./default-theme-edit-link) no rodapé da página atual.
```yaml
---
editLink: false
---
```
### footer
- Tipo: `boolean`
- Padrão: `true`
Se deve exibir o [rodapé](./default-theme-footer).
```yaml
---
footer: false
---
```
### pageClass
- Tipo: `string`
Adiciona um nome de classe extra a uma página específica.
```yaml
---
pageClass: custom-page-class
---
```
Em seguida, você pode personalizar os estilos desta página específica no arquivo `.vitepress/theme/custom.css`: