Jak stworzyć własny Layout builder w Drupalu 8

Opublikowany: 2019-10-15

Drupal 8 znacznie ułatwia pracę autorom treści. Jednym z najważniejszych powodów jest dodanie modułu Layout Builder w rdzeniu Drupal 8. Dzięki łatwemu interfejsowi przeciągania i upuszczania, podglądowi i możliwościom dostosowywania, layout builder wkrótce stanie się ulubionym narzędziem do tworzenia i projektowania stron.

W poprzednim artykule pisałem o tym, jak rozpocząć instalację i korzystanie z narzędzia do budowania układu Drupal 8. Tutaj chcę podzielić się swoją wiedzą na temat dostosowywania kreatora układów do unikalnych wymagań.

Jeśli Twój serwis Drupal wymaga wielu sekcji z wieloma blokami, nie możesz użyć domyślnych sekcji, które są dostarczane przez Drupala. W tym celu możesz stworzyć własny, niestandardowy układ.

Pierwsze kroki z Kreatorem układów :

Najpierw utworzymy moduł niestandardowego konstruktora układu dla naszego niestandardowego konstruktora układu. Nazwiemy folder custom_layout. Następnie utworzymy plik info.yml. Powinniśmy określić dla niego podstawowe klucze. Niestandardowy konstruktor układu w drupalu 8 będzie zależny od modułu konstruktora układu. Określmy to tutaj.

 Kod:
nazwa: „Układ niestandardowy”
typ: moduł
opis: 'Zapewnia sposób na układ budynku'
rdzeń: 8.x
pakiet: „Niestandardowy”
zależności:
 - layout_builder:layout_builder

Następnie utworzymy plik layouts.yml, aby określić regiony dla naszego niestandardowego układu.

custom_layout: klucz do naszego niestandardowego układu kreatora układów.
label: Etykieta naszego niestandardowego układu konstruktora układu.
kategoria: Kategoria dla naszego niestandardowego układu kreatora układów.
default_region: Domyślny region to regiony, które są domyślne we wszystkich typach układu.
icon_map: Ikona, która pojawi się, gdy wybierzemy układ.

Np:

Aby stworzyć powyższą mapę ikon musimy wykonać poniższe kroki.

1. Pierwszy wiersz to „Nagłówek lewy” i „Nagłówek prawy”
Określiliśmy - [ header_left, header_left, header_right ] - header_left is
zdefiniowany 2 razy, więc zajmie 2 części całkowitej szerokości ekranu, a header_right zajmie resztę części, więc stosunek będzie wynosił „75%/25%”.
2. Drugi wiersz to „Treść” i „Pasek boczny”
Określiliśmy - [ content, content, sidebar ] taką samą logikę, jaka została tutaj zastosowana.
3. Trzeci rząd to „Stopka lewa” i „Stopka prawa”
Określiliśmy - [ footer_left, footer_right] - ponieważ są tylko 2 regiony, każdy zajmie 50%.

regiony: regiony, których potrzebujemy do naszego układu. Mamy header_left, header_right, sidebar, content, footer_left, footer_right.

Kod:

 custom_layout:
 etykieta: „Układ niestandardowy”
 kategoria: „Układy niestandardowe”
 region_domyślny: treść
 icon_map:
   - [header_left, header_left, header_right]
   - [treść, treść, pasek boczny]
   - [treść, treść, pasek boczny]
   - [treść, treść, pasek boczny]
   - [footer_left, footer_right]

 regiony:
   header_left:
     etykieta: Nagłówek z lewej
   header_right:
     etykieta: Nagłówek po prawej
   Pasek boczny:
     etykieta: Pasek boczny
   zawartość:
     etykieta: Treść
   footer_left:
     etykieta: Stopka po lewej
   footer_right:
     etykieta: Stopka po prawej

Następnie stwórzmy strukturę html dla naszego układu. W naszym module utworzymy folder o nazwie „layouts”. W folderze utworzymy kolejny folder o nazwie „custom_layout”

W tym folderze utworzymy plik gałązki o nazwie „custom-layout.html.twig”

Musimy określić plik gałązki w layouts.yml

ścieżka: Określa, w którym folderze zostanie zapisana struktura html
szablon: określa, którego szablonu gałązki użyć dla tego układu pod ścieżką.

 Kod:

custom_layout:
 etykieta: „Układ niestandardowy”
 ścieżka: układy/układ_niestandardowy
 kategoria: „Układy niestandardowe”
 szablon: układ niestandardowy
 region_domyślny: treść
 icon_map:
   - [header_left, header_left, header_right]
   - [treść, treść, pasek boczny]
   - [treść, treść, pasek boczny]
   - [treść, treść, pasek boczny]
   - [footer_left, footer_right]

 regiony:
   header_left:
     etykieta: Nagłówek z lewej
   header_right:
     etykieta: Nagłówek po prawej
   Pasek boczny:
     etykieta: Pasek boczny
   zawartość:
     etykieta: Treść
   footer_left:
     etykieta: Stopka po lewej
   footer_right:
     etykieta: Stopka po prawej

Następnie napiszemy strukturę html dla naszych regionów w pliku „custom-layout.html.twig”.
Ustawimy klasy, które mają „layout” i „layout--custom-layout” i zawiniemy w nie całą zawartość.
Określimy regiony, które zostały zdefiniowane w layouts.yml , możemy uzyskać dostęp do tych regionów, takich jak „{{ content.header_left }}”

Kod:

{% ustawionych klas = [
'układ',
„układ — układ niestandardowy”,
] %}
{% jeśli zawartość %}
<div{{ atrybuty.addClass(klasy) }}>
{% jeśli content.header_left %}
<div {{ region_attributes.header_left.addClass('layout__region', 'layout__region--header_left') }}>
{{ content.header_left }}
</div>
{% endif %}
{% if content.header_right %}
<div {{ region_attributes.header_right.addClass('layout__region', 'layout__region--header_right') }}>
{{ content.header_right }}
</div>
{% endif %}
{% if content.content %}
<div {{ region_attributes.content.addClass('layout__region', 'layout__region--content') }}>
{{ treść.treść }}
</div>
{% endif %}
{% if content.sidebar %}
<div {{ region_attributes.sidebar.addClass('layout__region', 'layout__region--sidebar') }}>
{{ content.sidebar }}
</div>
{% endif %}
{% if content.footer_left %}
<div {{ region_attributes.footer_left.addClass('layout__region', 'layout__region--footer_left') }}>
{{ content.footer_left }}
</div>
{% endif %}
{% if content.footer_right %}
<div {{ region_attributes.footer_right.addClass('layout__region', 'layout__region--footer_right') }}>
{{ content.footer_right }}
</div>
{% endif %}
</div>
{% endif %}

Po napisaniu struktury html będziemy musieli napisać css dla każdego regionu. Utworzymy teraz library.yml w naszym niestandardowym module.

Kod:

 custom_layout:
wersja: WERSJA
CSS:
   temat:
     css/custom_layout.css: {}

Zdefiniujemy tę bibliotekę w layouts.yml

Kod:

 custom_layout:
 etykieta: „Układ niestandardowy”
 ścieżka: układy/układ_niestandardowy
 kategoria: „Układy niestandardowe”
 szablon: układ niestandardowy
 biblioteka: custom_layout/custom_layout
 region_domyślny: treść
 icon_map:
   - [header_left, header_left, header_right]
   - [treść, treść, pasek boczny]
   - [treść, treść, pasek boczny]
   - [treść, treść, pasek boczny]
   - [footer_left, footer_right]

 regiony:
   header_left:
     etykieta: Nagłówek z lewej
   header_right:
     etykieta: Nagłówek po prawej
   Pasek boczny:
     etykieta: Pasek boczny
   zawartość:
     etykieta: Treść
   footer_left:
     etykieta: Stopka po lewej
   footer_right:
     etykieta: Stopka po prawej

Teraz zacznijmy od stylizacji naszego bloku regionów. Określimy strukturę dla każdego regionu, jak poniżej-

Kod:

 .układ--układ-niestandardowy {
 wyświetlanie: -webkit-box;
 wyświetlacz: -ms-flexbox;
 wyświetlacz: elastyczny;
 -ms-flex-wrap: zawijaj;
 flex-wrap: owijka;
}

@media screen i (min-szerokość: 40em) {
 .layout--układ niestandardowy .layout__region--header_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   elastyczność: 0 1 70%;
 }

 .layout--układ niestandardowy .layout__region--header_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   elastyczność: 0 1 30%;
 }

 .layout--układ niestandardowy .layout__region--content {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   elastyczność: 0 1 70%;
 }

 .layout--układ niestandardowy .layout__region--sidebar {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   elastyczność: 0 1 30%;
 }

 .layout--układ niestandardowy .layout__region--footer_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   elastyczność: 0 1 50%;
 }

 .layout--układ niestandardowy .layout__region--footer_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   elastyczność: 0 1 50%;
 }
}

Następnie włączmy nasz niestandardowy moduł

Przejdźmy do Struktura -> Typy zawartości i kliknij „ Zarządzaj wyświetlaniem ” dla dowolnego typu zawartości. Na razie będziemy używać treści typu „ artykuł ”.

Po wybraniu naszego niestandardowego układu-