Cum să creați un generator de aspect personalizat în Drupal 8

Publicat: 2019-10-15

Drupal 8 face lucrurile mult mai ușoare pentru autorii de conținut. Unul dintre cele mai importante motive este adăugarea modulului Layout Builder în Drupal 8 de bază. Cu o interfață ușoară de glisare și plasare, abilități de previzualizare și personalizare, generatorul de layout devine în curând un instrument favorit de creare și proiectare a paginilor.

În articolul meu anterior, am scris despre cum puteți începe să instalați și să utilizați constructorul Layout al Drupal 8. Aici, vreau să-mi împărtășesc cunoștințele despre personalizarea unui constructor de layout pentru cerințe unice.

Dacă site-ul dvs. drupal are nevoie de mai multe secțiuni cu mai multe blocuri, atunci nu puteți utiliza secțiunile implicite furnizate de Drupal. Pentru aceasta, vă puteți crea propriul aspect personalizat.

Noțiuni introductive cu Layout Builder:

Mai întâi vom crea un modul de generator de layout personalizat pentru constructorul nostru de layout personalizat. Vom numi folderul ca custom_layout. În continuare, vom crea un fișier info.yml. Ar trebui să specificăm cheile de bază pentru acesta. Generatorul de layout personalizat din drupal 8 va avea o dependență de modulul de constructor de layout. Să precizăm aici.

aspect personalizat
 Cod:
nume: „Aspect personalizat”
tip: modul
descriere: „Oferă o modalitate de amenajare a clădirii”
miez: 8.x
pachet: „Personalizat”
dependențe:
 - layout_builder:layout_builder

În continuare, vom crea fișierul layouts.yml pentru a specifica regiunile pentru aspectul nostru personalizat.

  • custom_layout: cheie pentru aspectul nostru personalizat pentru generatorul de layout.
  • etichetă: etichetă pentru aspectul nostru personalizat pentru generatorul de layout.
  • categorie: Categorie pentru aspectul nostru personalizat pentru generatorul de layout.
  • default_region: Regiunea implicită sunt regiunile care sunt implicite în toate tipurile de aspect.
  • icon_map: Pictogramă care va fi afișată în timp ce ne alegem aspectul.

De exemplu:

aspect personalizat

Pentru a crea harta pictogramelor de mai sus, trebuie să urmam pașii de mai jos.

1. Primul rând este „Header Left” și „Header Right”
Am specificat - [ header_left, header_left, header_right ] - header_left este
definit de 2 ori, astfel încât va lua 2 părți din lățimea totală a ecranului, apoi header_right va ocupa restul porțiunii, astfel încât raportul va fi „75%/25%”.
2. Al doilea rând este „Conținut” și „Bară laterală”
Am specificat - [ conținut, conținut, bară laterală ] aceeași logică de mai sus aplicată aici.
3. Al treilea rând este „Footer Left” și „Footer Right”
Am specificat - [ footer_left, footer_right] - deoarece există doar 2 regiuni, va fi nevoie de 50% fiecare.

  • regiuni: regiuni de care avem nevoie pentru aspectul nostru. Avem header_left, header_right, sidebar, content, footer_left, footer_right.
constructor de layout personalizat

Cod:

 custom_layout:
 etichetă: „Aspect personalizat”
 categorie: „Aspecte personalizate”
 default_region: conținut
 icon_map:
   - [header_left, header_left, header_right]
   - [conținut, conținut, bară laterală]
   - [conținut, conținut, bară laterală]
   - [conținut, conținut, bară laterală]
   - [footer_left, footer_right]

 regiuni:
   header_left:
     etichetă: antet stânga
   header_right:
     etichetă: antet dreapta
   bara laterala:
     etichetă: bară laterală
   conţinut:
     etichetă: Conținut
   footer_left:
     etichetă: Subsol stânga
   footer_right:
     etichetă: Subsol dreapta

Apoi, să creăm o structură html pentru aspectul nostru. Vom crea un folder numit „aspecte” în modulul nostru. În folder vom crea un alt folder numit „custom_layout”

Și în acel folder, vom crea fișierul twig numit „custom-layout.html.twig”

constructor de layout personalizat


Trebuie să specificăm fișierul twig în layouts.yml

  • cale: Specifică în ce folder va fi scrisă structura dvs. html
  • șablon: specifică ce șablon crenguță să folosești pentru acest aspect sub cale.

aspect personalizat
 Cod:

custom_layout:
 etichetă: „Aspect personalizat”
 cale: layouts/custom_layout
 categorie: „Aspecte personalizate”
 șablon: aspect personalizat
 default_region: conținut
 icon_map:
   - [header_left, header_left, header_right]
   - [conținut, conținut, bară laterală]
   - [conținut, conținut, bară laterală]
   - [conținut, conținut, bară laterală]
   - [footer_left, footer_right]

 regiuni:
   header_left:
     etichetă: antet stânga
   header_right:
     etichetă: antet dreapta
   bara laterala:
     etichetă: bară laterală
   conţinut:
     etichetă: Conținut
   footer_left:
     etichetă: Subsol stânga
   footer_right:
     etichetă: Subsol dreapta

În continuare vom scrie structura html pentru regiunile noastre în fișierul „custom-layout.html.twig”.
Vom seta clasele cu „layout” și „layout--custom-layout” și vom împacheta întregul conținut în el.
Vom specifica regiunile care au fost definite în layouts.yml , putem accesa acele regiuni precum „{{ content.header_left }}”

constructor de layout

Cod:

{% set de clase = [
„aspect”,
„aspect--aspect-personalizat”,
] %}
{% if content %}
<div{{ attributes.addClass(clasele) }}>
{% if 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') }}>
{{ content.content }}
</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 %}

După ce structura html este scrisă, va trebui să scriem css pentru fiecare regiune. Vom crea acum libraries.yml în modulul nostru personalizat.

constructor de machete

Cod:

 custom_layout:
versiune: VERSIUNE
css:
   temă:
     css/custom_layout.css: {}

Vom defini acea bibliotecă în layouts.yml

constructor de amenajare

Cod:

 custom_layout:
 etichetă: „Aspect personalizat”
 cale: layouts/custom_layout
 categorie: „Aspecte personalizate”
 șablon: aspect personalizat
 bibliotecă: custom_layout/custom_layout
 default_region: conținut
 icon_map:
   - [header_left, header_left, header_right]
   - [conținut, conținut, bară laterală]
   - [conținut, conținut, bară laterală]
   - [conținut, conținut, bară laterală]
   - [footer_left, footer_right]

 regiuni:
   header_left:
     etichetă: antet stânga
   header_right:
     etichetă: antet dreapta
   bara laterala:
     etichetă: bară laterală
   conţinut:
     etichetă: Conținut
   footer_left:
     etichetă: Subsol stânga
   footer_right:
     etichetă: Subsol dreapta

Acum să începem cu stilizarea blocului nostru de regiuni. Vom specifica structura pentru fiecare regiune după cum urmează:

constructor de machete

Cod:

 .layout--custom-layout {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}

Ecran @media și (lățime minimă: 40 em) {
 .layout--custom-layout .layout__region--header_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   flex: 0 1 70%;
 }

 .layout--custom-layout .layout__region--header_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   flex: 0 1 30%;
 }

 .layout--aspect-personalizat .layout__region--conținut {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   flex: 0 1 70%;
 }

 .layout--custom-layout .layout__region--sidebar {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   flex: 0 1 30%;
 }

 .layout--custom-layout .layout__region--footer_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   flex: 0 1 50%;
 }

 .layout--custom-layout .layout__region--footer_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   flex: 0 1 50%;
 }
}

Apoi, permiteți-ne să activăm modulul nostru personalizat

modul-builder-aspect

Să mergem la Structură -> Tipuri de conținut și să facem clic pe „ Gestionați afișarea ” pentru orice tip de conținut. Deocamdată vom folosi tipul de conținut „ articol ”.

edit-layout-builder

După ce alegem aspectul nostru personalizat -

aspect personalizat