Cada página es un archivo MDX que combina contenido Markdown con componentes de React para crear documentación rica e interactiva.

​
Metadatos de la página

Cada página comienza con frontmatter, los metadatos YAML delimitados por --- al inicio del archivo. Estos metadatos definen cómo se muestra y cómo se comporta tu página. Usa los metadatos para controlar:
  • Títulos y descripciones de la página
  • Títulos, iconos y etiquetas de la barra lateral
​
title
string
required
El título de tu página que aparece en la navegación y en las pestañas del navegador.
​
description
string
Una breve descripción de lo que trata esta página. Aparece debajo del título y mejora el SEO.
​
sidebarTitle
string
Un título breve que se muestra en la navegación de la barra lateral.
​
icon
string
El icono que se mostrará.Opciones:
  • Nombre del icono de Font Awesome
  • Nombre del icono de Lucide
  • Código SVG compatible con JSX, envuelto entre llaves
  • URL de un icono alojado externamente
  • Ruta a un archivo de icono en tu proyecto
Para iconos SVG personalizados:
  1. Convierte tu SVG con el convertidor SVGR.
  2. Pega tu código SVG en el campo de entrada de SVG.
  3. Copia el elemento completo <svg>...</svg> del campo de salida de JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
  5. Ajusta height y width según sea necesario.
​
iconType
string
El estilo del icono de Font Awesome. Solo se usa con iconos de Font Awesome.Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
​
tag
string
Una etiqueta que aparece junto al título de tu página en la 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

Controla cómo se muestra tu página con la configuración mode.

​
Predeterminado

Si no se define un modo, se utiliza un diseño estándar con navegación lateral y tabla de contenidos. 
---
title: "Default page title"
---

​
Ancho

El modo ancho oculta la tabla de contenidos. Es útil para páginas que no tienen encabezados o si prefieres aprovechar el espacio horizontal adicional. El modo ancho está disponible para todos los temas. 
---
title: "Wide page title"
mode: "wide"
---

​
Personalizado

El modo personalizado ofrece un diseño minimalista que elimina todos los elementos excepto la barra de navegación superior. Es un lienzo en blanco para crear páginas de aterrizaje u otros diseños únicos en los que quieras mantener la navegación al mínimo. El modo personalizado está disponible para todos los temas. 
---
title: "Custom page title"
mode: "custom"
---

​
Marco

El modo Marco ofrece un diseño similar al modo personalizado, pero conserva la navegación de la barra lateral. Este modo de página permite usar HTML y componentes personalizados mientras mantiene la experiencia de navegación predeterminada. El modo Marco solo está disponible para los temas Aspen y Almond. 
---
title: "Frame page title"
mode: "frame"
---

​
Centrado

El modo centrado oculta la barra lateral y la tabla de contenido, y centra el contenido. Es útil para registros de cambios u otras páginas en las que quieras destacar el contenido. El modo centrado está disponible en los temas Mint y Linden. 
---
title: "Center page title"
mode: "center"
---

​
Páginas de API

Crea zonas de pruebas de API interactivas agregando una especificación de API al frontmatter, api u openapi. 
---
openapi: "GET /endpoint"
---
Obtén más información sobre cómo crear documentación de API. Enlaza sitios externos directamente desde tu navegación con el metadato url. 
---
title: "Paquete npm"
url: "https://www.npmjs.com/package/mint"
---

​
Optimización para motores de búsqueda

La mayoría de las metaetiquetas de SEO se generan automáticamente. Puedes configurar metaetiquetas de SEO manualmente para mejorar el SEO de tu sitio, el contenido compartido en redes sociales y la compatibilidad del navegador.
Las metaetiquetas con dos puntos deben ir entre comillas.
---
"twitter:image": "/images/social-preview.jpg"
---
Consulta SEO para ver todas las opciones de metadatos de SEO.

​
Palabras clave para la búsqueda interna

Mejora la capacidad de descubrimiento de una página específica en la búsqueda integrada proporcionando keywords en tus metadatos. Estas palabras clave no aparecerán como parte del contenido de la página ni en los resultados de búsqueda, pero cuando los usuarios las busquen, se les mostrará la página como resultado. 
---
keywords: ['configuration', 'setup', 'getting started']
---