Implementacja szablonu do stworzenia podstawowej struktury head, title i body
Zachować taką kolejność:
-------------------------------------
• page_top: renderowanie pierwszych znaczników. Koniecznie PRZED {{ page }}
• page: wyrenderowana strona: page.html.twig, node.html.twig, itp.
• page_bottom: renderowanie końcowych znaczników. Koniecznie PO {{ page }}
Dostępne zmienne:
--------------------------
• db_offline: flaga stanu połączenia z bazą danych - TRUE jeśli baza danych jest offline
• logged_in: flaga stanu - TRUE jeśli bieżący użytkownik jest zalogowany
• root_path: ścieżka główna bieżącej strony(niecały adres URL, tylko pierwszy człon)
• node_type: rodzaj zawartości dla bieżącego węzła (jeśli strona jest węzłem). Dla widoku nic nie zwróci.
• head_title: elementy składowe zmiennej head_title (może zawierać co najmniej jedną z nich):
- title: tytuł strony
- name: nazwa strony
- slogan: hasło reklamowe, górnolotny frazes
• placeholder_token:
Token do generowania danych:
- w head ( <head-placeholder )
- linków do plików css ( <css-placeholder )
- linków do js ( <js-placeholder)
- linków do js-bottom ( <js-bottom-placeholder ) - przed znacznikiem zamykającym BODY
Przykładowe sugestie nazw plików dla szczególnych zastosowań
html.html.twig - podstawowy, użyty na każdej podstronie
html--[internalviewpath].html.twig -
html--front.html.twig -
html--node.html.twig -
html--node--%.html.twig -
html--node--[nodeid].html.twig - zastosowanie w węźle o wskazanym ID. Np.: html--node--20.html.twig
Łącze Przejdź do głównej treści
<a href="#main-content" class="visually-hidden focusable">{{ 'Skip to main content'|t }}</a>
{# Łącze ułatwień dostępu za pomocą klawiatury. Przenosi do sekcji głównej na stronie page.html.twig #}
Można pominąć tłumaczenie, jeśli witryna jest tylko polskojęzyczna
{{ 'Skip to main content'|t }} na {{ 'Przejdź do głównej zawartości strony' }}
Własne klasy w elemencie <body>
Dodatkowe klasy można ustawić/dopisać dodając poniższy kod w pliku *.theme
Klasa
function nazwa_motywu_preprocess_html(&$variables){
$variables['attributes']['class'][] = 'klasa-dodana-do-body';
}
// pamiętać o pustych nawiasach kwadratowych []
Klasa dla Node
function nazwa_motywu_preprocess_html(&$variables) {
$node = \Drupal::routeMatch()->getParameter('node');
if (is_object($node)) {
$variables['attributes']['class'][] = 'klasa-dodana-do-body-dla-node';
}
}
Klasa dla Node na podstawie ID
function nazwa_motywu_preprocess_html(&$variables) {
$node = \Drupal::routeMatch()->getParameter('node');
if (is_object($node)) {
$variables['attributes']['class'][] = 'node-' . $node->id();
}
}
Dodatkowa klasa w połączeniu z plikiem *.theme oraz plikiem szablonu HTML.html.twig
1. Pobranie ID i dodanie zmiennej
function nazwa_motywu_preprocess_html(&$variables) {
$node = \Drupal::routeMatch()->getParameter('node');
if (is_object($node)) {
$variables['node_id'] = 'id-'.$node->id();
}
}
2. W pliku szablonu
{%
set body_classes = [
logged_in ? 'user-logged-in',
not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
node_type ? 'page-node-' ~ node_type|clean_class,
node_id ? 'node node-' ~ node_id|clean_class,
db_offline ? 'db-offline',
]
%}
Kategoria
Projekt