Estilos y scripts personalizados
Aunque los temas de docmd ofrecen una estética cuidada por defecto, puede inyectar hojas de estilo y scripts personalizados a través de las opciones theme.customCss y theme.customJs en docmd.config.json.
Configuración de estilos y scripts personalizados
Las hojas de estilo y los scripts del cliente se configuran de forma simétrica bajo el bloque theme:
{
"theme": {
"name": "default",
"customCss": [
"/assets/css/branding.css"
],
"customJs": [
"/assets/js/feedback-widget.js"
]
}
}
En versiones anteriores de docmd, el JavaScript personalizado se configuraba mediante un arreglo de nivel superior "customJs" y el CSS mediante "customCss". Ambas claves raíz continúan siendo totalmente compatibles como opciones alternativas, pero anidarlas bajo "theme" es el estándar moderno recomendado.
Anulaciones mediante CSS personalizado
Utilice theme.customCss para redefinir variables del tema o agregar reglas de diseño:
{
"theme": {
"customCss": [
"/assets/css/branding.css"
]
}
}
Pasos de ejecución
- Guarde su archivo CSS en la carpeta de recursos de su proyecto (por ejemplo,
docs/assets/css/branding.css). docmdtransferirá los recursos al directorio compilado durante la generación e inyectará las etiquetas<link>automáticamente en el encabezado.- Las hojas de estilo personalizadas se cargan después de los temas, asegurando que sus declaraciones prevalezcan limpiamente sobre los estilos base.
Integración de JavaScript personalizado
Utilice theme.customJs para scripts que introduzcan interactividad o integren analíticas de terceros:
{
"theme": {
"customJs": [
"/assets/js/feedback-widget.js"
]
}
}
Compatibilidad con el enrutador SPA
Los scripts personalizados se cargan al final de la etiqueta <body>. Puesto que docmd opera como una Single Page Application (SPA) durante la navegación del usuario:
- No se producen recargas completas de página al hacer clic en enlaces internos.
- Los scripts que interactúen con elementos del DOM deben suscribirse a los eventos del ciclo de vida del enrutador SPA.
Consulte Eventos del lado del cliente para conocer los detalles de los eventos disponibles.
Orden de la cascada
Las hojas de estilo y los scripts se cargan en un orden predecible de tres etapas para que sus reglas personalizadas siempre tengan prioridad:
- Núcleo y Tema: Los estilos base y esquemas de color cargan primero.
- Plantillas y Plugins: Las plantillas estructurales y los recursos de plugins cargan a continuación.
- CSS y JS Personalizados: Sus archivos
customCssycustomJscargan al final, garantizando que sus declaraciones anulen los valores predeterminados.
Para conocer cómo personalizar estructuras completas, explore Plantillas.
Mantenga sus recursos organizados separando los directorios /css y /js dentro de assets/. Emplear selectores con nombres específicos en branding.css evitará colisiones con las reglas predeterminadas de los contenedores de docmd.