Grav - Personalizzazione del tema

In questo capitolo, studiamo Theme Customization. Esistono diversi modi per personalizzare il tema. Grav offre molte caratteristiche e alcune funzionalità per personalizzare facilmente il tuo tema.

CSS personalizzato

Puoi fornire il tuo custom.cssfile per personalizzare il tuo tema. Il tema dell'antimateria si riferisce alcss/custom.css file tramite l'uso di Asset Manager. Se non viene trovato alcun riferimento al file CSS, il fileAsset Managernon aggiungerà il riferimento all'HTML. Creazione del file CSS in Antimatter'scss/la cartella sovrascriverà il CSS predefinito. Ad esempio:

custom.css

body a {
   color: #FFFF00;
}

Il colore del collegamento predefinito viene sovrascritto e impostato su giallo.

SCSS personalizzato / LESS

Un altro modo per fornire un file CSS personalizzato è utilizzare l'estensione custom.scssfile. Lo SCSS (sintatticamente impressionanti Style Sheets) è un preprocessore CSS, che permette di costruire i CSS in modo efficiente attraverso l'utilizzo di operatori, variabili, strutture annidate, importazioni, parziali e mix-ins. L'antimateria è scritto utilizzando SCSS.

Per utilizzare SCSS, è necessario il compilatore SCSS. È possibile utilizzare gli strumenti della riga di comando e le applicazioni GUI per installare i compilatori SCSS su qualsiasi piattaforma. Antimatter utilizza l'estensionescss/ cartella per posizionare tutti i tuoi file .scssFile. I file compilati vengono archiviati incss-compiled/ cartella.

Il SCSS i file dovrebbero essere controllati per eventuali aggiornamenti che possono essere eseguiti utilizzando il seguente comando:

scss --watch scss:css-compiled

Il comando precedente dice al compilatore SCSS di controllare la directory chiamata scss e ogni volta che il file css-compiled la cartella viene aggiornata, il compilatore SCSS dovrebbe compilarla.

Puoi mantenere il tuo codice SCSS personalizzato in formato scss/template/_custom.scssfile. Ci sono molti vantaggi nel mantenere il codice in questo file.

  • Qualsiasi aggiornamento dai file SCSS e altri file CSS vengono compilati in css-compiled/template.css file

  • Puoi accedere a qualsiasi SCSS utilizzato nel tuo tema e utilizzare tutte le variabili e le combinazioni disponibili.

  • Per uno sviluppo più semplice, viene fornito l'accesso a tutte le caratteristiche e le funzionalità di SCSS standard.

Un esempio di _custom.scss il file è mostrato di seguito -

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

Quando aggiorni il tuo tema, tutti i CSS personalizzati verranno sovrascritti. Questo è il principale svantaggio di scegliere questo modo per personalizzare un tema. Questo può essere risolto utilizzando l'ereditarietà del tema.

Ereditarietà del tema

Theme Inheritanceè il modo migliore per modificare o personalizzare un tema e può essere realizzato con poche impostazioni. L'idea di base è che un tema sia definito come il tema di base da cui si eredita e solo alcuni bit possono essere modificati e il resto delle cose è gestito dal tema di base. Il vantaggio dell'utilizzo dell'ereditarietà del tema è che il tema ereditato personalizzato non verrà influenzato direttamente ogni volta che il tema di base viene aggiornato. A tale scopo, è necessario seguire questi passaggi.

  • Per memorizzare il tuo nuovo tema, crea una nuova cartella chiamata mytheme/ dentro /user/themes/ cartella.

  • Successivamente è necessario creare un nuovo file YAML del tema chiamato mytheme.yaml sotto il nuovo /user/themes/mytheme/ cartella con il seguente contenuto.

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

  • Crea un file YAML chiamato blueprints.yaml sotto il /user/themes/mytheme/ cartella con il seguente contenuto.

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

Adesso capiremo come definire un tema blueprints.yamlche consiste di elementi di base. Maggiori dettagli possono essere forniti per le definizioni dei moduli per controllare le funzionalità del modulo. Ilblueprints.yaml file può essere esaminato per maggiori dettagli su questo.

  • Nel tuo user/config/system.yaml modifica del file pages: theme: opzione per cambiare il tema predefinito con un nuovo tema come mostrato di seguito.

pages:
   theme: mytheme

Ora viene creato un nuovo tema e Antimatter sarà il tema di base per questo nuovo mythemetema. Se vuoi modificare un SCSS specifico, dobbiamo configurare il compilatore SCSS in modo che appaia il tuomytheme tema prima e secondo tema Antimateria.

Utilizza le seguenti impostazioni:

  • Prima copia il file template.scss file che si trova nel file antimatter/scss/ cartella e incollalo nel file mytheme/scss/cartella. Questo file conterrà tutti i file@import richiede vari file come template/_custom.scss e sotto file.

  • Il load-path punta a antimatter/scss/cartella che contiene un gran numero di file SCSS. Per eseguire il compilatore SCSS, è necessario fornireload-path to it as shown below.

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

  • Ora crea un file chiamato _custom.scss sotto mytheme/scss/template/. Questo file conterrà tutte le tue modifiche.

Quando il file SCSS personalizzato viene modificato, automaticamente tutti i file SCSS verranno compilati nuovamente in template.css che si trova sotto il mytheme/css-compiled/ cartella e quindi Grav fa riferimento a questo accuratamente.