Cum să utilizați modulul suplimentar pentru elementele de meniu pentru Drupal 8

Mega meniurile nu mai sunt o tendință de design, ci o parte esențială a majorității site-urilor web legate de știri sau comerț electronic.

Modulul Menu Item Extras pentru Drupal 8 îmbunătățește sistemul de meniu implicit din Drupal, permițând constructorului site-ului să adauge câmpuri la elementele de meniu. În acest fel, este posibil să creați un mega meniu cu câțiva pași simpli.

Urmăriți pentru a afla cum să utilizați acest modul. Să începem!

Pasul #1: Instalați modulele necesare

În plus față de modulul Elemente suplimentare de meniu, va trebui să instalați Viewfield. Câmpul de vizualizare oferă un câmp care conține o referință la o vizualizare și o redă ori de câte ori este afișată entitatea care conține câmpul.

• Deschideți aplicația terminal a computerului dvs.
• Tip :
  • compozitorul necesită drupal/viewfield
  • compozitorul necesită drupal/menu_item_extras

Activați ambele module după descărcare.

• Faceți clic pe Extindere.
• Verificați ambele module.
• Faceți clic pe Instalare.

Pasul #2: Creați un sistem de taxonomie

Poate că cuvântul „sistem” nu este foarte potrivit, deoarece vom crea doar un vocabular cu zece termeni asociați. Cu toate acestea, acest exemplu va explica elementele de bază, astfel încât să puteți lucra cu sisteme de taxonomie mai complicate în viitor.

• Faceți clic pe Structură > Taxonomie > Adăugați vocabular.
• Introduceți numele „Subiecte” și faceți clic pe Salvare.
• Faceți clic pe Adăugați termen și adăugați toți termenii detaliați mai jos unul câte unul.
  • Subiecte
    • D8
    • Symfony
    • WP
    • Magento
    • CSS
    • HTML
    • JS
    • PHP
    • Piton
    • DevOps

Pasul 3: Creați tipurile de conținut

În scopul acestui tutorial, vom folosi 2 tipuri de conținut cu următoarele câmpuri:

• Servicii
  • Imagine de serviciu / Imagine / Număr de valori permis: 1
  • Text introductiv / Text (formatat) / Număr de valori permis: 1
  • Descriere / Câmp implicit

• Blog
  • Categorie / Termen de taxonomie / Număr de valori permis: nelimitat
  • Descriere / Câmp implicit

Asigurați-vă că selectați Tipul de referință (Subiecte) atunci când creați câmpul Taxonomie.

Pasul #4: Creați conținut

Vom crea 3 noduri de tip Service:

• Tutoriale
• Videoclipuri
• Cărți

Fiecare dintre aceste noduri va fi asociat cu un element de al doilea nivel în mega-meniul. Pe de altă parte, vom crea aproximativ 10 noduri de tip Blog cu termeni diferiți asociați acestora. Asigurați-vă că includeți 2 dintre termeni (ex.: D8, WP) cu mai multă frecvență decât ceilalți.

Ecranul Conținut ar trebui să arate la sfârșitul acestui proces mai mult sau mai puțin ca în imaginea de mai jos.

Pasul #5: Creați elementele de meniu

Primul nivel al meniului principal va avea următoarele elemente de meniu:

• Acasă
• Despre
• Resurse
• a lua legatura

Fiecare dintre elementele de meniu va avea un câmp suplimentar (extra). Acest câmp va fi setat la al doilea nivel al meniului, adică fiecare dintre elementele cardului din mega meniu. Acest câmp ne va permite să prezentăm fiecare dintre blocurile de vizualizare.

• Faceți clic pe Structură > Meniuri.
• Faceți clic pe meniul Editare, pentru a edita navigarea principală.

• Faceți clic pe Adăugați linkul de 3 ori pentru a adăuga elementele de meniu de la primul nivel care lipsesc.
• Faceți clic pe Salvare de fiecare dată când introduceți numele unui element de meniu.

Utilizați eticheta specială pentru a afișa numai textul linkului.

După ce ați creat și rearanjat linkurile meniului dvs.,

• Faceți clic pe Gestionare câmpuri > Adăugați câmp, pentru a adăuga un câmp la elementele de meniu.
• Selectați un câmp de tip Viewfield.
• Dați -i un nume propriu și o etichetă.
• Faceți clic pe Salvați și continuați.

• Setați numărul de valori permis la Nelimitat.
• Faceți clic pe Salvați setările câmpului

Veți avea opțiunea de a lega o vizualizare implicită la acest câmp special. Lăsați aceste câmpuri goale.

• Derulați în jos și faceți clic pe Salvare setări
• Faceți clic pe Gestionare afișaj.

• Ascundeți eticheta cardului de meniu.
• Faceți clic pe Salvare.

Pasul #6: Creați vizualizările

• Faceți clic pe Structură > Vizualizări > Adăugați vizualizare
• Afișați conținut de tip Servicii.
• Creați un bloc cu o listă de câmpuri neformatată.
• Alegeți să afișați 3 articole pe bloc.
• Faceți clic pe Salvați și editați.

• Adăugați câmpul Imagine de serviciu
• Setați stilul imaginii la Miniatură și legați imaginea la conținut.
• Faceți clic pe Aplicare

• Adăugați și câmpul de text Introducere.
• Rearanjați câmpurile.
• Faceți clic pe Salvare.

• Faceți clic pe Structură > Vizualizări > Adăugați vizualizare
• Afișați conținut de tip Blog.
• Creați un bloc cu o listă de câmpuri neformatată.
• Alegeți să afișați 1 articol pe bloc.
• Faceți clic pe Salvați și editați.

• Adăugați câmpul Categorie.
• Faceți clic pe Adăugare și configurați câmpuri.
• Faceți clic pe Setări de câmp multiple.
• Selectați Listă neordonată.
• Setați numărul de valori de afișat la 3.
• Faceți clic pe Aplicare.

• Eliminați criteriul de sortare
• Faceți clic pe Aplicare.
• Faceți clic pe Salvare pentru a salva vizualizarea.

Pasul #7: Adăugați blocurile de vizualizare la elementele de meniu

• Faceți clic pe Structură > Meniuri
• Editați navigarea principală.
• Editați elementul de meniu Resurse.
• Adăugați cele 2 blocuri pe care le-ați creat la pasul #5.
• Faceți clic pe Salvare.

Pasul #8: Stilurile CSS

Nu voi explica acest cod în detaliu, deoarece este în afara domeniului de aplicare al acestui tutorial. Cu toate acestea, puteți căuta mai multe despre Drupal Views și CSS Grid în acest articol. Dacă vrei să exersezi mai mult cu mega meniuri, aruncă o privire și pe acest articol.

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

Sper că v-a plăcut acest tutorial. Multumesc pentru lectura!