Grav - podstawy motywów

Motywy kontrolują wygląd Twojej witryny Grav. Motywy w Grav są zbudowane za pomocą potężnego silnika Twig Templating .

Strony zawartości i szablony Twig

Tworzone strony odwołują się do określonego pliku szablonu według nazwy lub przez ustawienie zmiennej nagłówka szablonu dla strony. Użycie nazwy strony jest zalecane w celu ułatwienia konserwacji.

Po zainstalowaniu pakietu Grav Base, znajdziesz plik defauld.mdplik w folderze user / pages / 01. home. Nazwa pliku, tj.default mówi Gravowi, że ta strona powinna być renderowana przy użyciu szablonu twig default.html.twig umieszczony wewnątrz themes/<mytheme>/templates teczka.

Na przykład, jeśli masz plik o nazwie contact.md, zostanie wyrenderowany z szablonem gałązki jako themes/<mytheme>/templates/contact.html.twig.

Organizacja tematyczna

W kolejnych rozdziałach omówimy organizację tematu, tj. Jego definicję, konfigurację i nie tylko.

Definicja i konfiguracja

Informacje o temacie zostaną zdefiniowane w user/themes/antimatter/blueprints.yamlDefinicje plików i formularzy do użycia w panelu administracyjnym są dostępne opcjonalnie. Zobaczysz następującą zawartość wuser/themes/antimatter/blueprints.yaml plik dla Antimatter theme.

name: Antimatter
version: 1.6.0
description: "Antimatter is the default theme included with **Grav**"
icon: empire
author:
   name: Team Grav
   email: [email protected]
   url: http://getgrav.org
homepage: https://github.com/getgrav/grav-theme-antimatter
demo: http://demo.getgrav.org/blog-skeleton
keywords: antimatter, theme, core, modern, fast, responsive, html5, css3
bugs: https://github.com/getgrav/grav-theme-antimatter/issues
license: MIT

form:
   validation: loose
   fields:
      dropdown.enabled:
         type: toggle
         label: Dropdown in navbar
         highlight: 1
         default: 1
         options:
            1: Enabled
            0: Disabled
         validate:
            type: bool

Aby skorzystać z opcji konfiguracji motywu, musisz podać domyślne ustawienia w pliku o nazwie user/themes/<mytheme>/<mytheme>.yaml.

Example

enable: true

Wydarzenia związane z tematami i wtyczkami

Możliwość interakcji motywu z Gravem poprzez architekturę wtyczek to kolejna potężna funkcja Grav. Aby to osiągnąć, po prostu utwórzuser/themes/<mytheme>/<mytheme>.php (na przykład, antimatter.php dla domyślnego motywu Antimatter) i użyj następującego formatu.

<?php
namespace Grav\Theme;

use Grav\Common\Theme;

class MyTheme extends Theme {
   public static function getSubscribedEvents() {
      return [
         'onThemeInitialized' => ['onThemeInitialized', 0]
      ];
   }
   public function onThemeInitialized() {
      if ($this->isAdmin()) {
         $this->active = false;
         return;
      }
      
      $this->enable([
         'onTwigSiteVariables' => ['onTwigSiteVariables', 0]
      ]);
   }
   public function onTwigSiteVariables() {
      $this->grav['assets']
         ->addCss('plugin://css/mytheme-core.css')
         ->addCss('plugin://css/mytheme-custom.css');

      $this->grav['assets']
         ->add('jquery', 101)
         ->addJs('theme://js/jquery.myscript.min.js');
   }
}

Szablony

Struktura motywu Grav nie ma ustalonych reguł, z wyjątkiem tego, że muszą być powiązane szablony gałązek w szablonach / folderze dla zawartości każdego typu strony.

Ze względu na ścisłe powiązanie między zawartością strony a szablonem twig, dobrze jest tworzyć ogólne motywy w oparciu o pakiety Skeleton dostępne na stronie pobierania .

Załóżmy, że chcesz obsługiwać modułowy szablon w swoim motywie, musisz go utworzyć modular/folder i przechowuj w nim pliki szablonów gałązek. Jeśli chcesz wesprzeć formularze to powinieneś stworzyćform/ folder i przechowuj w nim szablony formularzy.

Plany

Aby zdefiniować formularze dla opcji i konfiguracji dla każdego pliku szablonu blueprints/folder jest używany. Nie będzie można ich edytować za pomocąAdministrator Paneli jest opcjonalnie używany. Motyw jest w pełni funkcjonalny bezblueprints teczka.

SCSS / MNIEJ / CSS

Jeśli chcesz rozwijać witrynę z SASS lub LESS, musisz utworzyć podfoldery w user/themes/<mytheme>/scss/lub less/ jeśli chcesz MNIEJ wraz z css / folderem.

W przypadku automatycznie generowanych plików, które są kompilowane z SASS lub LESS, rozszerzenie css-compiled/folder jest używany. W motywie antymateriiscss używany jest wariant SASS.

Wykonaj poniższe czynności, aby zainstalować SASS na swoim komputerze.

  • W katalogu głównym motywu wpisz polecenie podane poniżej, aby wykonać skrypt powłoki scss.

$ ./scss.sh
  • Wpisz następujące polecenie, aby bezpośrednio go uruchomić.
$ scss --sourcemap --watch scss:css-compiled

Plik css-compiled/ będzie zawierać wszystkie skompilowane pliki scss, a plik css zostanie wygenerowany w twoim motywie.

Inne foldery

Zaleca się tworzenie osobnych images/, fonts/ i js/ foldery w Twoim user/themes/<mytheme>/ folder na obrazy, czcionki i pliki JavaScript używane w motywie.

Przykład motywu

Ogólna struktura folderów Antimatter temat, który omawialiśmy do tej pory, jest pokazany poniżej.