¿Cómo definir variables temáticas CSS?

Variables temáticas

Gracias a las anulaciones visuales, puedes crear un código CSS que anulará el código CSS principal que se utiliza en tu tema. El poder de las anulaciones visuales está relacionado con el hecho de que puedes acceder a los valores de configuración del tema en tu archivo visual-overrides.js . Gracias a esta posibilidad, puedes crear un código CSS en función de la configuración de tu tema.

En Publii v.0.35.3, hemos introducido una nueva característica: compatibilidad con el archivo theme-variables.js . Funciona de la misma manera que las modificaciones visuales, pero permite generar una salida CSS basada en la configuración del tema ANTES del código CSS principal.

Es el mejor lugar para usar una característica CSS muy útil: las variables. Las variables CSS se pueden usar para controlar fácilmente colores, tamaños de fuente, espaciado, etc. Ahora, con el archivo theme-variables.js, puede crear dichas variables CSS a partir de las opciones de su tema, lo que crea nuevas y excelentes posibilidades para los temas estáticos de su sitio.

¿Cómo definir variables temáticas?

Cree en su archivo de tema una theme-variables.jsfunción llamada y luego colóquela en este archivo que devolverá el código CSS como salida. Recuerde que su función puede tener cuatro argumentos: 

  • themeConfig : que contiene los valores de configuración del tema de la configuración personalizada,
  • postConfig - que contiene opciones específicas de la publicación
  • commonConfig : otras opciones como longitud del extracto, publicaciones por página, etc.
  • pageConfig - opciones específicas de la página
/*
 * Custom function used to generate the output of the theme variables
 */

var generateThemeVariables = function(themeConfig, postConfig, commonConfig, pageConfig) {
    return `
        html {
            --color-primary: ${themeConfig.primaryColor};
            --main-font-size: ${themeConfig.fontSize}px;
        }
    `;
};

module.exports = generateThemeVariables;
Copiar

¿Cómo se genera CSS en Publii?

Como el proceso de renderizado del sitio web estático en Publii utiliza algunas fuentes de código CSS para cada tema, lea más sobre cómo Publii renderiza los temas .

¿Cómo se representa el tema?

El proceso de renderizado de un tema tiene varios pasos; conocerlos es muy útil si quieres comprender a fondo todas las posibilidades que puede ofrecer el renderizador.

El renderizador Publii puede funcionar en varios modos:

  • Modo de vista previa de publicación
  • Modo de vista previa de la página de etiquetas
  • Modo de vista previa de la página del autor
  • Modo de vista previa de la página de inicio
  • Modo de página completa

La vista previa de la publicación está disponible en el editor de publicaciones y se utiliza para obtener una vista previa de los cambios antes de implementarlos en el servidor.

El modo de vista previa de etiqueta, autor y página de inicio se utiliza para verificar rápidamente los cambios durante la edición de parámetros en la configuración de Publii para subpáginas determinadas.

El modo de página completa se utiliza para crear una vista previa y durante la sincronización del sitio web.

Nos centraremos aquí en el modo de página completa; otros modos funcionan de forma muy similar pero sólo representan una página específica.

Proceso de renderizado

  1. El tema está validado,
  2. La configuración del sitio está cargada,
  3. Las traducciones están cargadas,
  4. El renderizador carga datos del sitio web desde la base de datos,
  5. La configuración del tema está cargada,
  6. Se cargan los archivos de tema,
  7. Los ayudantes de Publii Handlebars están registrados,
  8. Los ayudantes de tema de helpers.js (si existen) están registrados,
  9. La estructura del contenido se carga y almacena en caché.
  10. Se cargan datos comunes para todas las vistas,
  11. Se registran parciales (estándar y personalizados),
  12. Se muestra la página de inicio y su paginación,
  13. Se representan las páginas de publicación ( se aplican algunas operaciones al contenido de la publicación antes de la salida),
  14. Se representan las páginas de etiquetas y su paginación.
  15. Se representan las páginas del autor y su paginación,
  16. Se muestra la página de error (si se utiliza),
  17. Se muestra la página de búsqueda (si se utiliza),
  18. Se crea CSS,
  19. Los archivos de configuración, los activos y los archivos multimedia se copian al directorio de salida.
  20. Se procesan las fuentes RSS y JSON.
  21. Se crea el mapa del sitio,

Puedes utilizar ayudantes y parciales personalizados en tu tema.

El tema CSS es una suma de cinco fuentes CSS:

theme-variables.js output + main.css + GDPR popup CSS + visual-overrides.js output + custom CSS
Copiar

Veamos estas fuentes CSS:

  • theme-variables.js : es un archivo opcional que se puede utilizar para generar un código CSS que anteponga el código CSS de su tema. El caso principal de uso es la compatibilidad con variables CSS. Como puede obtener opciones de tema en este archivo, puede crear variables CSS basadas en ellas y luego usarlas en su código main.css.
  • main.css : es un archivo obligatorio que contiene el CSS principal de su tema
  • CSS de ventana emergente GDPR : este es un código CSS generado por Publii. Actualmente, no puedes modificar este código CSS directamente; debes usar CSS personalizado o modificaciones visuales para realizar cambios.
  • visual-overrides.js : es un archivo opcional que funciona como theme-variables.js , pero agrega el código CSS a la salida del archivo main.css.
  • CSS personalizado : es un código que agrega el usuario en Herramientas -> Vista CSS personalizada en Publii. Este código CSS es el último código CSS que se agrega a la salida CSS y puede anular todo lo generado anteriormente.

En breve:

La salida del archivo visual-overrides.js reemplaza el código main.css , pero cualquier código CSS generado por Publii se puede reemplazar con código CSS personalizado que se agrega en la sección Herramientas de Publii. La salida de theme-variables.js también puede anteponer todo el código.

arriba