Grav - Theme Anpassung

Lassen Sie uns in diesem Kapitel etwas darüber lernen Theme Customization. Es gibt verschiedene Möglichkeiten, Ihr Thema anzupassen. Grav bietet viele Funktionen und einige Funktionen, mit denen Sie Ihr Thema einfach anpassen können.

Benutzerdefinierte CSS

Sie können Ihre eigenen zur Verfügung stellen custom.cssDatei, um Ihr Thema anzupassen. Das Antimateriethema bezieht sich auf diecss/custom.css Datei durch die Verwendung von Asset Manager. Wenn kein Verweis auf die CSS-Datei gefunden wird, wird dieAsset Managerfügt den Verweis auf HTML nicht hinzu. Erstellen der CSS-Datei in Antimatter'scss/Ordner überschreibt das Standard-CSS. Zum Beispiel -

custom.css

body a {
   color: #FFFF00;
}

Die Standard-Linkfarbe wird überschrieben und auf Gelb gesetzt.

Benutzerdefiniertes SCSS / WENIGER

Eine andere Möglichkeit, eine benutzerdefinierte CSS-Datei bereitzustellen, ist die Verwendung von custom.scssDatei. Das SCSS (Syntactically Awesome Style Sheets) ist ein CSS-Präprozessor, mit dem Sie CSS mithilfe von Operatoren, Variablen, verschachtelten Strukturen, Importen, Partials und Mix-Ins effizient erstellen können. Die Antimaterie wird mit SCSS geschrieben.

Um SCSS verwenden zu können, benötigen Sie den SCSS-Compiler. Sie können die Befehlszeilentools und die GUI-Anwendungen verwenden, um SCSS-Compiler auf jeder Plattform zu installieren. Antimaterie verwendet diescss/ Ordner, um alle Ihre zu platzieren .scssDateien. Die kompilierten Dateien werden in gespeichertcss-compiled/ Mappe.

Das SCSS Dateien sollten auf Aktualisierungen überwacht werden, die mit dem folgenden Befehl durchgeführt werden können:

scss --watch scss:css-compiled

Der obige Befehl weist den SCSS-Compiler an, das Verzeichnis scss zu überwachen und wann immer das css-compiled Ordner wird aktualisiert, der SCSS-Compiler sollte ihn kompilieren.

Sie können Ihren benutzerdefinierten SCSS-Code beibehalten scss/template/_custom.scssDatei. Es gibt viele Vorteile, Ihren Code in dieser Datei zu behalten.

Alle Aktualisierungen aus den SCSS-Dateien und anderen CSS-Dateien werden kompiliert css-compiled/template.css Datei
Sie können auf alle SCSS zugreifen, die in Ihrem Thema verwendet werden, und alle ihm zur Verfügung stehenden Variablen und Mix-Ins verwenden.
Zur einfacheren Entwicklung erhalten Sie Zugriff auf alle Merkmale und Funktionen von Standard-SCSS.

Ein Beispiel für _custom.scss Datei wird unten gezeigt -

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

Wenn Sie Ihr Thema aktualisieren, werden alle benutzerdefinierten CSS überschrieben. Dies ist der Hauptnachteil bei der Auswahl dieser Methode zum Anpassen eines Themas. Dies kann mithilfe der Themenvererbung gelöst werden.

Themenvererbung

Theme Inheritanceist die beste Methode zum Ändern oder Anpassen eines Themas und kann mit wenigen Einstellungen durchgeführt werden. Die Grundidee ist, dass ein Thema als das Basisthema definiert ist, von dem Sie erben, und nur einige Bits geändert werden können und der Rest der Dinge vom Basisthema behandelt wird. Der Vorteil der Verwendung der Themenvererbung besteht darin, dass das angepasste geerbte Thema nicht direkt beeinflusst wird, wenn das Basisthema aktualisiert wird. Um dies zu erreichen, müssen Sie diese Schritte ausführen.

Erstellen Sie zum Speichern Ihres neuen Themas einen neuen Ordner mit dem Namen mytheme/ Innerhalb /user/themes/ Mappe.
Als nächstes müssen Sie eine neue Theme-YAML-Datei mit dem Namen erstellen mytheme.yaml unter dem neu geschaffenen /user/themes/mytheme/ Ordner mit folgendem Inhalt.

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

Erstellen Sie eine YAML-Datei mit dem Namen blueprints.yaml unter dem /user/themes/mytheme/ Ordner mit folgendem Inhalt.

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

Wir werden jetzt verstehen, wie man ein Thema definiert blueprints.yamldas besteht aus Grundelementen. Weitere Details zu Formulardefinitionen können zur Steuerung Ihrer Formularfunktionen bereitgestellt werden. Dasblueprints.yaml Datei kann für weitere Details zu diesem untersucht werden.

In deiner user/config/system.yaml Datei bearbeiten pages: theme: Option, um Ihr Standardthema wie unten gezeigt in ein neues Thema zu ändern.

pages:
   theme: mytheme

Jetzt wird ein neues Thema erstellt und Antimaterie wird das Basisthema für dieses neue sein mythemeThema. Wenn Sie ein bestimmtes SCSS ändern möchten, müssen Sie den SCSS-Compiler so konfigurieren, dass er Ihrem Aussehen entsprichtmytheme Thema erstens und zweitens das Antimaterie-Thema.

Es verwendet die folgenden Einstellungen -

Kopieren Sie zuerst die template.scss Datei, die in der platziert wird antimatter/scss/ Ordner und fügen Sie es in den mytheme/scss/Mappe. Diese Datei enthält alle@import fordert für verschiedene Dateien wie template/_custom.scss und Unterdateien.
Das load-path verweist auf antimatter/scss/Ordner, der eine große Anzahl von SCSS-Dateien enthält. Um den SCSS-Compiler auszuführen, müssen Sie angebenload-path to it as shown below.

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

Erstellen Sie nun eine Datei mit dem Namen _custom.scss unter mytheme/scss/template/. Diese Datei enthält alle Ihre Änderungen.

Wenn die benutzerdefinierte SCSS-Datei geändert wird, werden automatisch alle SCSS-Dateien erneut kompiliert template.css welches sich unter dem befindet mytheme/css-compiled/ Ordner und dann verweist der Grav genau darauf.