Cum să creezi o temă personalizată Drupal 9 în 9 pași simpli

Drupal 9 oferă dezvoltatorilor și proprietarilor de site-uri flexibilitatea de a crea componente personalizate care pot fi combinate pentru a construi experiențe digitale convingătoare. Temele sunt blocurile de design ale Drupal care reprezintă aspectul vizual al unui site web. Drupal 9 vine cu opțiuni de teme de bază și teme terțe, cea mai populară fiind tema Bootstrap. Cu toate acestea, dacă niciuna dintre temele Drupal 9 nu ți-a tăiat-o, probabil că ar trebui să te uiți la dezvoltarea temei personalizate. Cu temele personalizate Drupal 9, vă puteți adapta designul la cerințele exacte.

Drupal 9 oferă Bartik ca temă de interfață pentru Drupal, dar dacă aveți nevoie de o temă personalizată Drupal 9, atunci vă puteți crea propria dezvoltare a temei Drupal 9, îmbunătățindu-vă astfel abilitățile de tematică Drupal. Cel mai simplu mod de a înțelege cu adevărat dezvoltarea temei Drupal 9 este să exersați și să creați una de la zero.

Drupal 8 a ajuns acum la EOL. Acum este momentul să migrați la Drupal 9. Cu toate acestea, dacă încă vă încercați să creați o temă personalizată în Drupal 8, acești pași vor funcționa și pentru o configurare Drupal 8.

Noțiuni introductive cu dezvoltarea personalizată a temei Drupal 9

Să începem cu crearea unei teme Drupal 9 pentru site-ul nostru web Drupal.
PASUL 1: În primul rând, trebuie să creăm o temă personalizată în folderul „web/themes/custom” . Vom numi folderul ca custom_theme .

PASUL 2: În continuare, va trebui să creăm un fișier info.yml . Trebuie să specificăm cheile de bază pentru acesta. Să precizăm aici -

 COD:
nume : Tema personalizată
tip : temă
descriere : „Temă personalizată pentru site-ul meu”.
pachet : Altele
core_version_requirement : ^8 || ^9

PASUL 3 : Acum, să creăm un fișier libraries.yml pentru a specifica toate bibliotecile de care avem nevoie (CSS ȘI JS) pentru tema noastră personalizată Drupal 9. De asemenea, vom crea directorul CSS și JS și fișierele acestuia pentru a le lega aici. Vom numi biblioteca ca global-styling .

 COD:
stil global :
versiunea : 1.x
js :
js/script.js : {}
css :
tema :
css/style.css : {}

PASUL 4: După crearea fișierului libraries.yml , trebuie să-l conectăm la tema noastră. Pentru aceasta, îl vom adăuga în fișierul info.yml care o va aplica apoi întregii teme.

 COD:
biblioteci :
- personalizată_temă/global-styling

Deci, cheia va fi bibliotecile, iar calea va fi numele temei - ' custom_theme ' / numele bibliotecii - 'global-styling' .

PASUL 5: În continuare, trebuie să moștenim „Tema de bază”. În cazul nostru, vom moșteni tema „ classy ”, care este o temă de bază Drupal. Deci, cheia va fi tema de bază în info.ym l.

 COD:
tema de baza : clasic

PASUL 6: Acum, vom defini „regiunile” pentru tema noastră. În info.yml , trebuie să-l definim sub cheia „regiuni”.

 COD:
regiuni :
branding : branding
navigație : Navigație principală
căutare : Căutare
prezentate : prezentate
continut : continut
right_sidebar : Bara laterală dreaptă
footer_first : Subsolul întâi
footer_second : Footer Second
footer_third : Footer Third
footer_bottom : Subsolul de jos

Sub tasta „regiuni”, vă puteți defini regiunile pentru tema personalizată Drupal. Aici,
branding: este id-ul regiunii care ar trebui să fie litere mici.
Branding: este numele regiunii care poate fi cu litere mari.

PASUL 7: După ce ne-am definit regiunile pentru tema personalizată Drupal, trebuie să suprascriem page.html.twig pentru a prelua „regiunile” noastre în loc de temele clasice. Vom crea șabloane/ director de sistem sub care vom crea pagina.html.twig .

 COD:
< header aria-label ="Site header" class ="header" id ="header" role ="banner" >
{{ page.branding }}
{{ page.navigation }}
{{ page.search }}
</ antet >
< section class ="identificator" id =" rol prezentat ="complementar" >
{{ page.featured }}
</ secțiune >
< section class ="main" id ="principal" >
< main aria-label ="Conținutul principal al site-ului" class ="conținut" id ="conținut" rol ="principal" >
{{ page.content }}
</ principal >
< aside class ="right--sidebar" id ="sidebar" rol ="complementar" >
{{ page.right_sidebar }}
</ deoparte >
</ secțiune >
< footer aria-label ="Site footer" class ="footer" id ="footer" role ="contentinfo" >
< div class ="footer--top" >
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
</ div >
< div class ="footer--bottom" >
{{ page.footer_bottom }}
</ div >
</ subsol >

În page.html.twig, vom crea structura HTML pentru regiunile noastre. După cum vedeți în {{ page.branding }} – Aici,

pagina - Este cheia pentru a reda „regiunile” în pagină

branding- Este regiunea pe care am definit-o în fișierul info.yml .

Așa că acum, ne-am creat regiunile și le-am redat pe pagină.

Pasul 8: Accesați Aspect pe site-ul dvs. Drupal. Puteți vedea tema Drupal personalizată prezentă în secțiunea Teme dezinstalate .

Trebuie să faceți clic pe opțiunea „ Instalați și setați ca implicită ” pentru a vă instala tema Drupal pe site.

După ce este instalat, mergeți la Structură -> Aspect bloc . Tema dvs. personalizată va apărea sub aspectul bloc.

Veți vedea un link pentru „ Demonstrați regiunile bloc (temă personalizată) ”. Faceți clic pe link. Puteți vedea toate regiunile pe care le-ați declarat în info.yml și adăugate în page.html.twig

Pasul 9: Acum aproape ați terminat cu tematica în Drupal 9! Apoi, trebuie să aplicați stiluri în CSS pentru fiecare regiune conform designului dvs. Vom folosi CSS în acest caz; Puteți chiar să utilizați SCSS dacă doriți. Doar inspectați regiunea de branding - ar trebui să vedeți clasa regiune și apoi să adăugați CSS la acea clasă.

 . antet {
 display : flex ;
 justify-content : spațiu-între ;
 umplutură : 10 px ;
}


. antet . regiune {
 umplutură : 5 px ;
}


. antet . regiune-branding {
 flex : 0 1 20 %;
}
		



. antet . regiune-navigație {
 flex : 0 1 50 %;
}


. antet . căutare-regiune {
 flex : 0 1 30 %;
}


. regiune . regiune-bloc {
 umplutură : 15 px ;
}


. prezentat {
 umplutură : 40 px 20 px ;
 culoare de fundal : indianred ;
}


. principal {
 umplutură : 50 px 0 ;
 display : flex ;
 justify-content : spațiu-între ;
}


. principal . continut {
 flex : 0 1 65 %;
}


. principal . dreapta--bara laterală {
 flex : 0 1 30 %;
}


. footer--top {
 display : flex ;
 justify-content : spațiu-între ;
 umplutură : 10 px ;
}


. subsol--sus . regiune {
 umplutură : 5 px ;
}


. regiune-footer-în primul rând , . regiune-subsol-secundă , . regiune-footer-third {
 flex : 0 1 30 %;
}

Rezultatul:

Tema dvs. personalizată Drupal 9 este gata!

Dacă trebuie să scrieți cârlige sau să creați sugestii pentru fișierul twig, puteți adăuga fișierul .theme în tema Drupal personalizată (afișată mai jos).