Motyw | Kompozycja graficzna w szablonach dla Drupala

Wszystko o temacie motywów w systemie Drupal 8 / 9

Zmian można dokonywać funkcjami Hook albo w pliku szablonu bez konieczności pisania kodu PHP w pliku *.theme.

Jeśli jakieś zmiany można wprowadzić zarówno w plikach szablonów Twig i w PHP pliku *.theme to zaleca się zrobienie tego w plikach Twig (przy zachowaniu bardzo czytelnej formy). Ponieważ bardziej złożone zmiany są nieco łatwiejsze i bardziej czytelne w PHP niż w Twig.

Jak włączyć/wyłączyć komentarze (sugestie) w źródle strony?

W pliku sites/default/services.yml

parameters:
  twig.config:
    debug: true # originally false

Katalog motywu - struktura

  | - nazwa_motywu.breakpoints.yml
  | - nazwa_motywu.info.yml
  | - nazwa_motywu.libraries.yml
  | - nazwa_motywu.theme
  | - nazwa_motywu.config
  |  | - install
  |  |  | - nazwa_motywu.settings.yml
  |  | - schema
  |  |  | - nazwa_motywu.schema.yml
  | - css
  |  | - style.css
  | - js
  |  | - nazwa_motywu..js
  | - images
  |  | - buttons.png
  |  | - logo.svg
  | - screenshot.png
  | - templates
  |  | - maintenance-page.html.twig
  |  | - node.html.twig

Kolejność działań

1. Definiowanie pliku *.info.yml - w pierwszej kolejności należy utworzyć plik nazwa_motywu.info.yml w głównym katalogu kompozycji o tej samej nazwie.
2. Definiowanie pliku *.libraries.yml - w drugiej kolejności można utworzyć plik nazwa_motywu.libraries.yml. Pozwala to zdefiniować podstawowy wygląd witryny (pierwsze style CSS).
3. Definiowanie i dodawanie regionów (obszarów) - lista regionów motywu jest definiowana w pliku *.info.yml.
4. Przekopiowanie plików szablonów motywu do własnych modyfikacji
   • Szablony systemowe
     • core / modules / system / templates /
     • core / modules / node / templates /
     • core / modules / views / templates /
     • . . . i inne
   • Szablony Stable
     • core / themes / stable / templates / block
     • core / themes / stable / templates / content
     • core / themes / stable / templates / field
     • core / themes / stable / templates / views
     • . . . i inne
   • Szablony Classy
     • core / themes / classy / templates / block
     • core / themes / classy / templates / content
     • core / themes / classy / templates / field
     • core / themes / classy / templates / views
     • . . . i inne
5. Dodatkowy kontener DIV class="dialog-off-canvas-main-canvas"
   Usunięcie (jeśli to konieczne) dodatkowego kontenera jest możliwe dzięki edycji pliku szablonu OFF-CANVAS-PAGE-WRAPPER.html.twig.

Lista plików

Konwencje nazewnictwa w szablonach Twig są ściśle określone na stronie Twig Template naming conventions
UWAGA: nie używać wielkich liter.

Same pliki*.html.twig można umieszczać w katalogach gdyby ich ilość znacząco się rozrosła.
Dwa sensowne sposoby na grupowanie plików szablonów:

Grupowanie według tematu:

| - admin
|  | - node.edit.form.html.twig
|  | - admin-block.html.twig
|  | - admin-page.html.twig
|  | - . . . inne
| - block
|  | - block.html.twig
|  | - block--system-branding-block.html.twig
|  | - block--system-menu-block.html.twig
|  | - . . . inne
| content
|  | - node.html.twig
|  | - off-canvas-page-wrapper.html.twig
|  | - page-title.html.twig
|  | - taxonomy-term.html.twig
|  | - . . . inne
| field
|  | - field.html.twig
|  | - field--node--title.html.twig
|  | - file-link.html.twig
|  | - image.html.twig
|  | - . . . inne
| layout
|  | - html.html.twig
|  | - layout.html.twig
|  | - maintenance-page.html.twig
|  | - page.html.twig
|  | - region.html.twig
|  | - . . . inne
| . . . itd.

Grupowanie według modułów:

| block
|  | - block.html.twig
|  | - block--system-branding-block.html.twig
|  | - block--system-menu-block.html.twig
|  | - . . . inne
| book
|  | - book-node-export-html.html.twig
|  | - book-tree.html.twig
|  | - book-navigation.html.twig
|  | - . . . inne
| . . . itd.

Źródło: Porównanie struktur grupowych folderów