Grav - Personnalisation du thème

Dans ce chapitre, étudions les Theme Customization. Il existe plusieurs façons de personnaliser votre thème. Grav fournit de nombreuses fonctionnalités et quelques fonctionnalités pour personnaliser facilement votre thème.

CSS personnalisé

Vous pouvez fournir le vôtre custom.cssfichier pour personnaliser votre thème. Le thème Antimatière fait référence aucss/custom.css fichier grâce à l'utilisation de Asset Manager. Si aucune référence au fichier CSS n'est trouvée, alors leAsset Managern'ajoutera pas la référence au HTML. Création du fichier CSS dans Antimatièrecss/dossier remplacera le CSS par défaut. Par exemple -

custom.css

body a {
   color: #FFFF00;
}

La couleur du lien par défaut est remplacée et définie sur jaune.

SCSS / LESS personnalisé

Une autre façon de fournir un fichier CSS personnalisé consiste à utiliser le custom.scssfichier. Le SCSS (Syntactically Awesome Style Sheets) est un préprocesseur CSS qui vous permet de créer des CSS efficacement grâce à l'utilisation d'opérateurs, de variables, de structures imbriquées, d'importations, de partiels et de mix-ins. L'antimatière est écrite en utilisant SCSS.

Pour utiliser SCSS, vous avez besoin du compilateur SCSS. Vous pouvez utiliser les outils de ligne de commande et les applications GUI pour installer des compilateurs SCSS sur n'importe quelle plate-forme. L'antimatière utilise lescss/ dossier pour placer tous vos .scssdes dossiers. Les fichiers compilés sont stockés danscss-compiled/ dossier.

le SCSS les fichiers doivent être surveillés pour toutes les mises à jour qui peuvent être effectuées à l'aide de la commande suivante -

scss --watch scss:css-compiled

La commande ci-dessus indique au compilateur SCSS de surveiller le répertoire appelé scss et chaque fois que le css-compiled dossier est mis à jour, le compilateur SCSS doit le compiler.

Vous pouvez conserver votre code SCSS personnalisé dans scss/template/_custom.scssfichier. Il existe de nombreux avantages à conserver votre code dans ce fichier.

Toute mise à jour des fichiers SCSS et autres fichiers CSS est compilée dans css-compiled/template.css fichier
Vous pouvez accéder à n'importe quel SCSS utilisé dans votre thème et utiliser toutes les variables et mix-ins disponibles.
Pour faciliter le développement, vous avez accès à toutes les fonctionnalités et fonctionnalités du SCSS standard.

Un exemple de _custom.scss le fichier est montré ci-dessous -

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

Lorsque vous mettez à niveau votre thème, tous les css personnalisés seront remplacés. C'est l'inconvénient majeur de choisir cette façon de personnaliser un thème. Cela peut être résolu en utilisant l'héritage de thème.

Héritage du thème

Theme Inheritanceest le meilleur moyen de modifier ou de personnaliser un thème et peut être réalisé avec quelques configurations. L'idée de base est qu'un thème est défini comme le thème de base dont vous héritez, et seuls quelques bits peuvent être modifiés et le reste des choses est géré par le thème de base. L'avantage de l'utilisation de l'héritage de thème est que le thème hérité personnalisé ne sera pas directement affecté chaque fois que le thème de base est mis à jour. Pour ce faire, vous devez suivre ces étapes.

Pour stocker votre nouveau thème, créez un nouveau dossier appelé mytheme/ à l'intérieur /user/themes/ dossier.
Ensuite, vous devez créer un nouveau fichier YAML de thème appelé mytheme.yaml sous le nouvellement créé /user/themes/mytheme/ dossier avec le contenu suivant.

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

Créez un fichier YAML appelé blueprints.yaml sous le /user/themes/mytheme/ dossier avec le contenu suivant.

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

Nous allons maintenant comprendre comment définir un thème blueprints.yamlqui se compose d'éléments de base. Plus de détails peuvent être fournis pour les définitions de formulaire afin de contrôler vos fonctionnalités de formulaire. leblueprints.yaml peut être examiné pour plus de détails à ce sujet.

Dans ton user/config/system.yaml fichier Edition pages: theme: option pour changer votre thème par défaut en un nouveau thème comme indiqué ci-dessous.

pages:
   theme: mytheme

Maintenant, un nouveau thème est créé et Antimatière sera le thème de base pour ce nouveau mythemethème. Si vous souhaitez modifier un SCSS spécifique, nous devons configurer le compilateur SCSS pour qu'il ressemble à votremytheme thème d'abord et deuxièmement le thème Antimatière.

Il utilise les paramètres suivants -

Copiez d'abord le template.scss fichier qui est placé dans le antimatter/scss/ dossier et collez-le dans le mytheme/scss/dossier. Ce fichier contiendra tous les@import appelle à divers fichiers comme template/_custom.scss et sous-fichiers.
le load-path pointe vers antimatter/scss/dossier qui contient un grand nombre de fichiers SCSS. Pour exécuter le compilateur SCSS, vous devez fournirload-path to it as shown below.

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

Maintenant, créez un fichier appelé _custom.scss en dessous de mytheme/scss/template/. Ce fichier contiendra toutes vos modifications.

Lorsque le fichier SCSS personnalisé est modifié, tous les fichiers SCSS seront automatiquement compilés à nouveau dans template.css qui est situé sous le mytheme/css-compiled/ dossier et puis le Grav référence cela avec précision.