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ń
- 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.
- 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).
- Definiowanie i dodawanie regionów (obszarów) - lista regionów motywu jest definiowana w pliku *.info.yml.
- 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
- Szablony systemowe
- 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.
Lokalizacja plików i katalogów
Dobrą, nieobowiązkową praktyką jest umieszczanie przesłanych i tworzonych motywów w podfolderach głównego katalogu themes.
- contrib - motywy podstawowe, pobrane z np. Drupal.org
- custom - autorskie motywy, rozszerzenia tych przesłanych
System instaluje nowe motywy w katalogu /themes.
Wciąż można umieszczać katalogi motywów w lokalizacjach:
- /sites/all/themes/nazwa_motywu
- /sites/nazwa_strony/themes
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.