Grav - Personalización del tema

En este capítulo, estudiemos sobre Theme Customization. Hay varias formas de personalizar su tema. Grav proporciona muchas características y algunas funcionalidades para personalizar fácilmente su tema.

CSS personalizado

Puede proporcionar el suyo custom.cssarchivo para personalizar su tema. El tema de la antimateria se refiere a lacss/custom.css archivo mediante el uso de Asset Manager. Si no se encuentra ninguna referencia al archivo CSS, entonces elAsset Managerno agregará la referencia a HTML. Creando el archivo CSS en Antimatter'scss/carpeta anulará el CSS predeterminado. Por ejemplo

custom.css

body a {
   color: #FFFF00;
}

El color del enlace predeterminado se anula y se establece en amarillo.

SCSS personalizado / MENOS

Otra forma de proporcionar un archivo CSS personalizado es mediante el custom.scssarchivo. El SCSS (sintácticamente hojas de estilo impresionante) es un preprocesador de CSS, que le permite construir CSS de manera eficiente mediante el uso de los operadores, variables, estructuras anidadas, las importaciones, parciales y Mix-ins. La antimateria está escrita usando SCSS.

Para utilizar SCSS, necesita el compilador SCSS. Puede utilizar las herramientas de línea de comandos y las aplicaciones GUI para instalar compiladores SCSS en cualquier plataforma. La antimateria usa elscss/ carpeta para colocar todos sus .scssarchivos. Los archivos compilados se almacenan encss-compiled/ carpeta.

los SCSS Los archivos deben ser observados para detectar actualizaciones que se pueden realizar usando el siguiente comando:

scss --watch scss:css-compiled

El comando anterior le dice al compilador SCSS que observe el directorio llamado scss y siempre que el css-compiled La carpeta está actualizada, el compilador SCSS debería compilarla.

Puede mantener su código SCSS personalizado en scss/template/_custom.scssarchivo. Hay muchas ventajas de mantener su código en este archivo.

Cualquier actualización de los archivos SCSS y otros archivos CSS se compilan en css-compiled/template.css archivo
Puede acceder a cualquiera de los SCSS que se utilizan en su tema y hacer uso de todas las variables y combinaciones disponibles para él.
Para un desarrollo más fácil, se le proporciona acceso a todas las características y funcionalidades del SCSS estándar.

Un ejemplo de _custom.scss archivo se muestra a continuación -

body {
   a {
      color: darken($core-accent, 20%);
   }
}

Cuando actualice su tema, se anularán todos los CSS personalizados. Este es el mayor inconveniente de elegir esta forma de personalizar un tema. Esto se puede solucionar utilizando la herencia de temas.

Herencia del tema

Theme Inheritancees la mejor manera de modificar o personalizar un tema y se puede lograr con algunas configuraciones. La idea básica es que un tema se define como el tema base del que está heredando, y solo se pueden modificar algunos bits y el resto de las cosas se maneja mediante el tema base. La ventaja de usar la herencia de temas es que el tema heredado personalizado no se verá afectado directamente cuando se actualice el tema base. Para lograr esto, debe seguir estos pasos.

Para almacenar su nuevo tema, cree una nueva carpeta llamada mytheme/ dentro /user/themes/ carpeta.
A continuación, debe crear un nuevo archivo YAML de tema llamado mytheme.yaml bajo el recién creado /user/themes/mytheme/ carpeta con el siguiente contenido.

streams:
   schemes:
      theme:
         type: ReadOnlyStream
         prefixes:
            '':
               - user/themes/mytheme
               - user/themes/antimatter

Crea un archivo YAML llamado blueprints.yaml bajo la /user/themes/mytheme/ carpeta con el siguiente contenido.

name: MyTheme
version: 1.0.0
description: "Extending Antimatter"
icon: crosshairs
author:
   name: Team Grav
   email: [email protected]
   url: http://getgrav.org

Ahora entenderemos cómo definir un tema. blueprints.yamlque consta de elementos básicos. Se pueden proporcionar más detalles para las definiciones de formulario para controlar las funcionalidades de su formulario. losblueprints.yaml El archivo se puede examinar para obtener más detalles sobre esto.

En tus user/config/system.yaml archivo de edición pages: theme: opción para cambiar su tema predeterminado a un nuevo tema como se muestra a continuación.

pages:
   theme: mytheme

Ahora se crea un nuevo tema y Antimatter será el tema base para este nuevo mythemetema. Si desea modificar un SCSS específico, debemos configurar el compilador SCSS para que se vea como sumytheme tema en primer lugar y en segundo lugar el tema de la antimateria.

Utiliza la siguiente configuración:

Primero copie el template.scss archivo que se coloca en el antimatter/scss/ carpeta y péguela en el mytheme/scss/carpeta. Este archivo contendrá todos los@import requiere varios archivos como template/_custom.scss y sub archivos.
los load-path puntos a antimatter/scss/carpeta que contiene una gran cantidad de archivos SCSS. Para ejecutar el compilador SCSS, debe proporcionarload-path to it as shown below.

scss --load-path ../antimatter/scss --watch scss:css-compiled

Ahora, crea un archivo llamado _custom.scss debajo mytheme/scss/template/. Este archivo contendrá todas sus modificaciones.

Cuando se cambia el archivo SCSS personalizado, automáticamente todos los archivos SCSS se compilarán nuevamente en template.css que se encuentra debajo de la mytheme/css-compiled/ carpeta y luego el Grav hace referencia a esto con precisión.

↰ Previous page Next page ↱