Jak stworzyć własny motyw Drupal 9 w 9 prostych krokach

Drupal 9 zapewnia programistom i właścicielom witryn elastyczność w tworzeniu niestandardowych komponentów, które można zestawiać w celu tworzenia atrakcyjnych doświadczeń cyfrowych. Motywy to bloki projektowe Drupala, które reprezentują wygląd strony internetowej. Drupal 9 oferuje wybór motywów podstawowych i motywów innych firm, z których najpopularniejszym jest motyw Bootstrap. Jeśli jednak żaden z motywów Drupala 9 nie jest dla Ciebie odpowiedni, prawdopodobnie powinieneś przyjrzeć się tworzeniu niestandardowych motywów. Dzięki niestandardowym motywom Drupal 9 możesz dostosować swój projekt do dokładnych wymagań.

Drupal 9 udostępnia Bartik jako motyw frontendowy dla Drupala, ale jeśli potrzebujesz niestandardowego motywu Drupal 9, możesz stworzyć własny rozwój motywu Drupal 9, poprawiając w ten sposób swoje umiejętności tworzenia motywów Drupal. Najłatwiejszym sposobem, aby naprawdę zrozumieć tworzenie motywu Drupal 9, jest przećwiczenie i stworzenie go od podstaw.

Drupal 8 osiągnął już EOL. Teraz nadszedł czas na migrację do Drupala 9. Jeśli jednak nadal próbujesz swoich sił w tworzeniu niestandardowego motywu w Drupal 8, te kroki będą działać również w przypadku konfiguracji Drupal 8.

Pierwsze kroki z tworzeniem niestandardowego motywu Drupal 9

Zacznijmy od stworzenia motywu Drupal 9 dla naszego serwisu Drupal.
KROK 1: Najpierw musimy utworzyć niestandardowy motyw w folderze „web/themes/custom” . Nazwiemy folder jako custom_theme .

KROK 2 : Następnie musimy utworzyć plik info.yml . Musimy określić dla niego podstawowe klucze. Określmy to tutaj -

 KOD:
Nazwa : niestandardowy motyw
typ : motyw
opis : 'Niestandardowy motyw dla mojej witryny.'
opakowanie : Inne
core_version_requirement : ^8 || ^9

KROK 3 : Teraz stwórzmy plik library.yml , aby określić wszystkie potrzebne nam biblioteki (CSS I JS) dla naszego niestandardowego motywu Drupal 9. Stworzymy również katalog CSS i JS oraz jego pliki, aby je tutaj połączyć. Zamierzamy nazwać bibliotekę global-styling .

 KOD:
globalny styl :
wersja : 1.x
js :
js/skrypt.js : {}
CSS :
temat :
css/style.css : {}

KROK 4: Po utworzeniu pliku library.yml musimy połączyć go z naszym motywem. W tym celu dodamy go w pliku info.yml który następnie zastosuje go do całego tematu.

 KOD:
biblioteki :
- custom_theme/global-style

Tak więc kluczem będą biblioteki, a ścieżka będzie nazwą motywu - ' custom_theme ' / nazwa biblioteki - 'global-styling' .

KROK 5: Następnie musimy odziedziczyć „motyw podstawowy”. W naszym przypadku odziedziczymy „ klasyczny ” motyw, który jest głównym motywem Drupala. Tak więc kluczem będzie motyw bazowy w info.ym l.

 KOD:
motyw podstawowy : z klasą

KROK 6: Teraz zdefiniujemy „regiony” dla naszego tematu. W info.yml musimy to zdefiniować pod kluczem 'regiony'.

 KOD:
regiony :
branding : Branding
nawigacja : Nawigacja główna
szukaj : Szukaj
polecane : polecane
treść : Treść
right_sidebar : Prawy pasek boczny
footer_first : Najpierw stopka
footer_second : Sekunda stopki
footer_third : Trzecia stopka
footer_bottom : Stopka na dole

Pod kluczem „regiony” możesz zdefiniować swoje regiony dla niestandardowego motywu Drupala. Tutaj,
branding: to identyfikator regionu, który powinien być pisany małymi literami.
Branding: To nazwa regionu, która może być pisana wielkimi literami.

KROK 7 : Po zdefiniowaniu naszych regionów dla naszego niestandardowego motywu Drupala, musimy nadpisać page.html.twig, aby pobrać nasze „regiony” zamiast klasycznych motywów. Stworzymy katalog templates/system, pod którym utworzymy page.html.twig .

 KOD:
< header aria-label ="Nagłówek witryny" class ="header" id ="header" role ="banner" >
{{ strona.branding }}
{{ strona.nawigacja }}
{{ page.search }}
</ nagłówek >
< section class ="polecane" id ="polecane" role ="complementary" >
{{ strona.polecane }}
</ sekcja >
< section class ="main" id ="main" >
< main aria-label ="Główna treść witryny" class ="treść" id ="treść" role ="główna" >
{{ zawartość strony }}
</ główna >
< aside class ="right--sidebar" id ="sidebar" role ="complementary" > >
{{ page.right_sidebar }}
</ na bok >
</ sekcja >
< footer aria-label ="Stopka witryny" class ="footer" id ="footer" role ="informacje o treści" >
< div class ="footer--top" >
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
</ div >
< div class ="footer--bottom" >
{{ page.footer_bottom }}
</ div >
</ stopka >

W page.html.twig stworzymy strukturę HTML dla naszych regionów. Jak widać w {{ page.branding }} – Tutaj,

page — jest kluczem do renderowania „regionów” na stronie

branding- To region, który zdefiniowaliśmy w pliku info.yml .

Więc teraz stworzyliśmy nasze regiony i wyrenderowaliśmy je na stronie.

Krok 8 : Przejdź do Wygląd na swojej stronie Drupal. Swój niestandardowy motyw Drupal możesz zobaczyć w sekcji Odinstalowane motywy .

Musisz kliknąć opcję „ Zainstaluj i ustaw jako domyślny ”, aby zainstalować motyw Drupala na stronie.

Po zainstalowaniu przejdź do Struktura -> Układ blokowy . Twój motyw niestandardowy pojawi się pod układem blokowym.

Zobaczysz łącze do „Pokaż regiony blokowe (motyw niestandardowy) ”. Kliknij łącze. Możesz zobaczyć wszystkie regiony, które zadeklarowałeś w info.yml i dodałeś w page.html.twig

Krok 9 : Tematy w Drupalu 9 są już prawie gotowe! Następnie musisz zastosować style w CSS dla każdego regionu zgodnie ze swoim projektem. W tym przypadku użyjemy CSS ; Możesz nawet użyć SCSS, jeśli chcesz. Po prostu sprawdź region brandingu — powinieneś zobaczyć klasę regionu, a następnie dodać CSS do tej klasy.

 . nagłówek {
 wyświetlacz : flex ;
 justify-content : spacja-między ;
 dopełnienie : 10 px ;
}
		



. nagłówek . region {
 dopełnienie : 5 px ;
}


. nagłówek . branding regionu {
 giętkość : 0 1 20 %;
}


. nagłówek . nawigacja po regionie {
 giętkość : 0 1 50 %;
}


. nagłówek . wyszukiwanie w regionie {
 giętkość : 0 1 30 %;
}


. region . region blokowy {
 dopełnienie : 15 px ;
}


. polecane {
 dopełnienie : 40 px 20 px ;
 kolor tła : indianred ;
}


. główny {
 dopełnienie : 50 px 0 ;
 wyświetlacz : flex ;
 justify-content : spacja-między ;
}


. główna . treść {
 giętkość : 0 1 65 %;
}


. główna . prawy pasek boczny {
 giętkość : 0 1 30 %;
}


. stopka — góra {
 wyświetlacz : flex ;
 justify-content : spacja-między ;
 dopełnienie : 10 px ;
}
		



. stopka — góra . region {
 dopełnienie : 5 px ;
}


. region-stopka-najpierw , . region-stopka-sekunda , . region-stopka-trzecia {
 giętkość : 0 1 30 %;
}

Wynik:

Twój niestandardowy motyw Drupal 9 jest gotowy!

Jeśli potrzebujesz napisać jakieś haki lub stworzyć sugestie dla swojego pliku twig, możesz dodać plik .theme do niestandardowego motywu Drupala (pokazanego poniżej).