Cada página é um arquivo MDX que combina conteúdo em Markdown com componentes do React, permitindo criar documentação rica e interativa.

​
Metadados da página

Cada página começa com o frontmatter, os metadados YAML delimitados por --- no início do arquivo. Esses metadados definem como sua página é exibida e se comporta. Use os metadados para controlar:
  • Títulos e descrições da página
  • Títulos, ícones e tags da barra lateral
​
title
string
required
O título da sua página que aparece na navegação e nas abas do navegador.
​
description
string
Uma breve descrição do que esta página aborda. Aparece abaixo do título e melhora o SEO.
​
sidebarTitle
string
Um título curto exibido na navegação da barra lateral.
​
icon
string
O ícone a ser exibido.Opções:
  • nome do ícone do Font Awesome
  • nome do ícone do Lucide
  • código SVG compatível com JSX, entre chaves
  • URL para um ícone hospedado externamente
  • caminho para um arquivo de ícone no seu projeto
Para ícones SVG personalizados:
  1. Converta seu SVG usando o conversor SVGR.
  2. Cole seu código SVG no campo de entrada de SVG.
  3. Copie o elemento completo <svg>...</svg> do campo de saída JSX.
  4. Coloque o código SVG compatível com JSX entre chaves: icon={<svg ...> ... </svg>}.
  5. Ajuste height e width conforme necessário.
​
iconType
string
O estilo do ícone do Font Awesome. Usado apenas com ícones do Font Awesome.Opções: regular, solid, light, thin, sharp-solid, duotone, brands.
​
tag
string
Uma tag que aparece ao lado do título da sua página na barra lateral.
Example YAML frontmatter
---
title: "About frontmatter"
description: "Frontmatter is the metadata that controls how your page appears and behaves"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "NEW"
---

​
Modo de página

Defina como sua página é exibida com a configuração mode.

​
Padrão

Se nenhum modo for definido, usa-se um layout padrão com navegação na barra lateral e um índice. 
---
title: "Default page title"
---

​
Amplo

O modo amplo oculta o sumário. Ele é útil para páginas que não têm títulos ou quando você prefere usar o espaço horizontal extra. O modo amplo está disponível em todos os temas. 
---
title: "Wide page title"
mode: "wide"
---

​
Personalizado

O modo personalizado oferece um layout minimalista que remove todos os elementos, exceto a barra de navegação superior. É uma tela em branco para criar landing pages ou outros layouts exclusivos nos quais você deseja ter o mínimo possível de elementos de navegação. O modo personalizado está disponível para todos os temas. 
---
title: "Custom page title"
mode: "custom"
---

​
Frame

O modo Frame oferece um layout semelhante ao modo custom, mas preserva a navegação na barra lateral. Esse modo de página permite HTML e componentes personalizados, mantendo a experiência de navegação padrão. O modo Frame está disponível apenas nos temas Aspen e Almond. 
---
title: "Frame page title"
mode: "frame"
---

​
Centralizado

O modo centralizado remove a barra lateral e o sumário, centralizando o conteúdo. Isso é útil para changelogs ou outras páginas em que você deseja enfatizar o conteúdo. O modo centralizado está disponível nos temas Mint e Linden. 
---
title: "Center page title"
mode: "center"
---

​
Páginas de API

Crie playgrounds de API interativos adicionando uma especificação de API ao frontmatter, api ou openapi. 
---
openapi: "GET /endpoint"
---
Saiba mais sobre como criar documentação de API. Crie links para sites externos diretamente na navegação usando o metadado url. 
---
title: "npm Package"
url: "https://www.npmjs.com/package/mint"
---

​
Otimização para mecanismos de busca

A maioria das meta tags de SEO é gerada automaticamente. Você pode definir meta tags de SEO manualmente para melhorar o SEO do seu site, o compartilhamento em redes sociais e a compatibilidade com navegadores.
Meta tags com dois-pontos devem estar entre aspas.
---
"twitter:image": "/images/social-preview.jpg"
---
Consulte SEO para ver todas as opções de metadados de SEO.

​
Palavras-chave de busca interna

Melhore a capacidade de descoberta de uma página específica na busca integrada fornecendo keywords nos metadados. Essas palavras-chave não aparecerão como parte do conteúdo da página nem nos resultados da busca, mas usuários que pesquisarem por elas verão a página como resultado. 
---
keywords: ['configuration', 'setup', 'getting started']
---