Cada página es un archivo MDX (Markdown + JSX) que combina contenido en Markdown con componentes de React para que puedas crear documentación completa e interactiva.
Cada página comienza con frontmatter, los metadatos YAML delimitados por ---
al inicio de un archivo. Estos metadatos definen cómo aparece y se comporta tu página.
Usa el frontmatter para controlar:
- Títulos y descripciones de la página
- Títulos de la barra lateral, iconos y etiquetas
- Diseños de página
- Metatags de SEO
- Metadatos personalizados
El título de tu página que aparece en la navegación y en las pestañas del navegador.
Una breve descripción de lo que cubre esta página. Aparece debajo del título y mejora el SEO.
Un título corto que se muestra en la navegación de la barra lateral.
El icono que se mostrará.Opciones:
El estilo del icono de Font Awesome. Solo se usa con iconos de Font Awesome.Opciones: regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.
Una etiqueta que aparece junto al título de tu página en la barra lateral.
Cualquier frontmatter YAML válido. Por ejemplo, product: "API"
o version: "1.0.0"
.
---
title: "Acerca del frontmatter"
description: "El frontmatter es el metadata que controla cómo aparece y se comporta tu página"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "NEW"
---
Controla cómo se muestra tu página con el ajuste mode
.
Si no se define ningún modo, se utiliza un diseño estándar con una barra lateral de navegación y una tabla de contenidos.
---
title: "Título de página predeterminado"
---
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 en todos los temas.
---
title: "Título de página amplia"
mode: "wide"
---
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 destino u otros diseños únicos en los que quieras que los elementos de navegación sean mínimos. El modo Personalizado está disponible para todos los temas.
---
title: "Título de página personalizado"
mode: "frame"
---
El modo Frame ofrece un diseño similar al modo personalizado, pero mantiene la barra lateral de navegación. Este modo de página permite usar HTML y componentes personalizados sin perder la experiencia de navegación predeterminada. El modo Frame solo está disponible en los temas Aspen y Almond.
---
title: "Título de página Frame"
mode: "frame"
---
El modo Center elimina la barra lateral y la tabla de contenidos, centrando el contenido. Es útil para la página de cambios u otras páginas donde quieras destacar el contenido. El modo Center está disponible para los temas Mint y Linden.
---
title: "Centrar título de página"
mode: "center"
---
Crea áreas de pruebas de la API interactivas añadiendo una especificación de la API a tu frontmatter, api
o openapi
.
---
openapi: "GET /endpoint"
---
Obtén más información sobre cómo crear documentación de API.
Enlaza a sitios externos directamente desde tu navigation con la metadata url
.
---
title: "Paquete npm"
url: "https://www.npmjs.com/package/mint"
---
Optimización para motores de búsqueda (SEO)
La mayoría de las metaetiquetas de SEO se generan automáticamente. Puedes establecer manualmente las metaetiquetas de SEO para mejorar el SEO de tu sitio, su difusión en redes sociales y la compatibilidad con los navegadores.
Las metaetiquetas con dos puntos deben ir entre comillas.
---
"twitter:image": "/images/social-preview.jpg"
---
Consulta SEO para conocer todas las opciones de metadata 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 añadiendo keywords
en tu metadata. Estas palabras clave no aparecerán como parte del contenido de la página ni en los resultados de búsqueda, pero los usuarios que las busquen verán la página como resultado.
---
keywords: ['configuración', 'configuración inicial', 'primeros pasos']
---