Plantillas y temas

En docmd, las Plantillas definen la estructura HTML fundamental, la disposición de la interfaz, los parciales EJS y las ranuras (slots) de componentes para su documentación.

Una plantilla es un paquete npm que declara capabilities: ['template'] y distribuye archivos de diseño .ejs y paquetes de recursos personalizados. El solucionador de @docmd/ui utiliza una cadena de prioridades con retroceso ordenado, asegurando que cualquier ranura no especificada recurra sin fisuras al diseño por defecto.

Guía de inicio rápido

1. Instalar un paquete de plantilla

npx @docmd/core add summer

2. Habilitar la plantilla en la configuración

Defina theme.name en docmd.config.json. docmd detecta automáticamente si el nombre corresponde a un esquema de color integrado (default, sky, ruby, retro) o a un paquete estructural de plantilla (summer, etc.):

{
  "theme": {
    "name": "summer"
  }
}

Cada página se procesará a partir de ese momento con la estructura de summer. Las ranuras no especificadas recurrirán automáticamente a los parciales estándar de @docmd/ui.

Esquemas de color integrados (Plantilla por defecto)

La plantilla predeterminada incluye cuatro paletas de color CSS seleccionadas que pueden activarse asignando theme.name:

{
  "theme": {
    "name": "sky",
    "template": "summer"
  }
}

3. Anulaciones de plantilla por página

Cambie de plantilla para páginas individuales utilizando el frontmatter:

---
title: "Historial de versiones"
template: "template-changelog"
---

# Historial de versiones

Cadena de prioridades de resolución

Al compilar cada página, docmd evalúa las rutas de plantillas en este orden descendente:

Los nombres default, sky, ruby y retro están reservados para los temas de color CSS. Cualquier otro valor en theme.name se interpreta como el nombre de un paquete de plantilla.

Ranuras de diseño admitidas

Las plantillas pueden anular cualquiera de las 12 ranuras de interfaz:

Orden de la cascada

Cuando se combinan plantillas y hojas de estilo, los estilos se cargan en un orden predecible de tres etapas:

1. Núcleo y Tema: Los estilos fundacionales y esquemas de color cargan primero.
2. Plantillas y Plugins: Las reglas de disposición estructural y los recursos de plugins cargan a continuación.
3. CSS y JS Personalizados: Sus archivos customCss y customJs cargan al final, teniendo siempre prioridad sobre las plantillas.

Para anular las reglas por defecto de una plantilla, añada sus declaraciones en theme.customCss.

Localización de plantillas

Las plantillas reciben el código del idioma activo durante el renderizado. Las cadenas de texto localizadas se resuelven mediante el asistente t(key) apoyándose en los archivos assets/i18n/<idioma>.json.

Recursos relacionados

• Estilos y scripts personalizados: Superponga reglas CSS sobre las plantillas activas.
• Diseño de páginas de inicio: Personalice la página principal mediante contenedores Markdown.
• Referencia de configuración: Opciones generales del sitio.