Grav - dostosowywanie motywu

W tym rozdziale przestudiujmy Theme Customization. Motyw można dostosować na kilka sposobów. Grav zapewnia wiele funkcji i kilka funkcji umożliwiających łatwe dostosowanie motywu.

niestandardowe CSS

Możesz podać własne custom.cssplik, aby dostosować motyw. Motyw Antymaterii odnosi się docss/custom.css plik za pośrednictwem Asset Manager. Jeśli nie zostanie znalezione żadne odniesienie do pliku CSS, rozszerzenieAsset Managernie doda odwołania do HTML. Tworzenie pliku CSS w Antimatter'scss/folder zastąpi domyślny CSS. Na przykład -

custom.css

body a {
   color: #FFFF00;
}

Domyślny kolor łącza jest zastępowany i ustawiany na żółty.

Niestandardowy SCSS / MNIEJ

Innym sposobem na zapewnienie niestandardowego pliku CSS jest użycie rozszerzenia custom.scssplik. SCSS (składniowo Wypasione Style Sheets) to preprocesor CSS, który pozwala zbudować CSS skutecznie dzięki wykorzystaniu operatorów, zmiennych struktur zagnieżdżonych, importu, podszablonów i mix-ins. Antymateria została napisana przy użyciu SCSS.

Aby używać SCSS, potrzebujesz kompilatora SCSS. Możesz użyć narzędzi wiersza polecenia i aplikacji GUI, aby zainstalować kompilatory SCSS na dowolnej platformie. Antymateria używa rozszerzeniascss/ folder, aby umieścić wszystkie swoje .scssakta. Skompilowane pliki są przechowywane w formaciecss-compiled/ teczka.

Plik SCSS pliki należy obserwować pod kątem aktualizacji, które można wykonać za pomocą następującego polecenia -

scss --watch scss:css-compiled

Powyższe polecenie mówi kompilatorowi SCSS, aby obserwował katalog o nazwie scss i zawsze, gdy plik css-compiled folder zostanie zaktualizowany, kompilator SCSS powinien go skompilować.

Możesz zachować swój niestandardowy kod SCSS w formacie scss/template/_custom.scssplik. Przechowywanie kodu w tym pliku ma wiele zalet.

Każda aktualizacja z plików SCSS i innych plików CSS jest kompilowana do css-compiled/template.css plik
Możesz uzyskać dostęp do dowolnego SCSS używanego w Twoim motywie i korzystać ze wszystkich dostępnych dla niego zmiennych i miksów.
W celu ułatwienia programowania otrzymujesz dostęp do wszystkich cech i funkcjonalności standardowego SCSS.

Przykład _custom.scss plik jest pokazany poniżej -

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

Po uaktualnieniu motywu wszystkie niestandardowe pliki CSS zostaną nadpisane. Jest to główna wada wyboru tego sposobu dostosowywania motywu. Można to rozwiązać za pomocą dziedziczenia motywu.

Dziedziczenie motywów

Theme Inheritanceto najlepszy sposób modyfikowania lub dostosowywania motywu i można go wykonać za pomocą kilku konfiguracji. Podstawową ideą jest to, że motyw jest zdefiniowany jako motyw podstawowy, z którego dziedziczysz, i tylko niektóre jego fragmenty mogą być modyfikowane, a resztą zajmuje się motyw podstawowy. Zaletą korzystania z dziedziczenia kompozycji jest to, że dostosowany dziedziczony motyw nie będzie miał bezpośredniego wpływu przy każdej aktualizacji motywu podstawowego. Aby to osiągnąć, musisz wykonać następujące kroki.

Aby zapisać nowy motyw, utwórz nowy folder o nazwie mytheme/ wewnątrz /user/themes/ teczka.
Następnie musisz utworzyć nowy plik YAML motywu o nazwie mytheme.yaml pod nowo utworzonym /user/themes/mytheme/ folder z następującą zawartością.

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

Utwórz plik YAML o nazwie blueprints.yaml pod /user/themes/mytheme/ folder z następującą zawartością.

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

Teraz zrozumiemy, jak zdefiniować temat blueprints.yamlktóry składa się z podstawowych elementów. Więcej szczegółów można podać w definicjach formularzy, aby kontrolować funkcje formularza. Plikblueprints.yaml plik można zbadać, aby uzyskać więcej informacji na ten temat.

W Twoim user/config/system.yaml Edycja plików pages: theme: opcja zmiany domyślnego motywu na nowy motyw, jak pokazano poniżej.

pages:
   theme: mytheme

Teraz jest tworzony nowy motyw, a Antymateria będzie motywem bazowym dla tego nowego mythememotyw. Jeśli chcesz zmodyfikować konkretny SCSS, musimy skonfigurować kompilator SCSS, aby wyglądał na twójmytheme temat po pierwsze, a po drugie temat Antymaterii.

Używa następujących ustawień -

Najpierw skopiuj template.scss plik, który jest umieszczony w antimatter/scss/ folder i wklej go w mytheme/scss/teczka. Ten plik będzie zawierał wszystkie rozszerzenia@import wymaga różnych plików, takich jak template/_custom.scss i pliki podrzędne.
Plik load-path punkty dla antimatter/scss/folder zawierający dużą liczbę plików SCSS. Aby uruchomić kompilator SCSS, musisz podaćload-path to it as shown below.

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

Teraz utwórz plik o nazwie _custom.scss pod mytheme/scss/template/. Ten plik będzie zawierał wszystkie Twoje modyfikacje.

Kiedy niestandardowy plik SCSS zostanie zmieniony, automatycznie wszystkie pliki SCSS zostaną ponownie skompilowane do template.css który znajduje się pod mytheme/css-compiled/ folder, a następnie Grav odwołuje się do tego dokładnie.