So erstellen Sie ein benutzerdefiniertes Drupal 9-Theme in 9 einfachen Schritten

Drupal 9 gibt Entwicklern und Site-Besitzern die Flexibilität, maßgeschneiderte Komponenten zu erstellen, die zusammengestellt werden können, um überzeugende digitale Erlebnisse zu schaffen. Themes sind die Designblöcke von Drupal, die das visuelle Erscheinungsbild einer Website darstellen. Drupal 9 bietet eine Auswahl an Kernthemen und Themen von Drittanbietern, wobei das Bootstrap-Thema am beliebtesten ist. Wenn jedoch keines der Drupal 9-Themes für Sie geeignet ist, sollten Sie sich wahrscheinlich mit der Entwicklung benutzerdefinierter Themen befassen. Mit den benutzerdefinierten Themen von Drupal 9 können Sie Ihr Design genau an die Anforderungen anpassen.

Drupal 9 bietet Bartik als Frontend-Theme für Drupal, aber wenn Sie ein benutzerdefiniertes Drupal 9-Theme benötigen, können Sie Ihre eigene Drupal 9-Themenentwicklung erstellen und so Ihre Drupal-Themen-Fähigkeiten verbessern. Der einfachste Weg, die Entwicklung von Drupal 9-Themen wirklich zu verstehen, besteht darin, sie von Grund auf zu üben und zu erstellen.

Drupal 8 hat jetzt EOL erreicht. Jetzt ist es an der Zeit, zu Drupal 9 zu migrieren. Wenn Sie jedoch immer noch versuchen, ein benutzerdefiniertes Design in Drupal 8 zu erstellen, funktionieren diese Schritte auch für ein Drupal 8-Setup.

Erste Schritte mit der Entwicklung von benutzerdefinierten Drupal 9-Designs

Beginnen wir damit, ein Drupal 9-Theme für unsere Drupal-Website zu erstellen.
SCHRITT 1: Zuerst müssen wir ein benutzerdefiniertes Design im Ordner 'web/themes/custom' erstellen. Wir benennen den Ordner als custom_theme .

SCHRITT 2: Als nächstes müssen wir eine info.yml-Datei erstellen. Wir müssen die grundlegenden Schlüssel dafür angeben. Lass es uns hier spezifizieren -

 CODE:
Name : Benutzerdefiniertes Thema
Typ : Thema
Beschreibung : 'Benutzerdefiniertes Design für meine Website.'
Paket : Andere
core_version_requirement : ^8 || ^9

SCHRITT 3 : Jetzt erstellen wir eine libraries.yml Datei , die alle Bibliotheken angeben , wir (CSS und JS) für unsere eigene Drupal 9 Thema benötigen. Wir werden auch ein CSS- und JS-Verzeichnis und seine Dateien erstellen, um es hier einzubinden. Wir werden die Bibliothek als global-styling benennen.

 CODE:
Global-Styling :
Version : 1.x
js :
js/script.js : {}
css :
Thema :
css/style.css : {}

SCHRITT 4: Nachdem wir die Datei library.yml erstellt haben, müssen wir sie mit unserem Theme verknüpfen. Dazu fügen wir es in die Datei info.yml ein die es dann auf das gesamte Thema anwendet.

 CODE:
Bibliotheken :
- custom_theme/global-styling

Der Schlüssel ist also Bibliotheken und der Pfad ist der Name des Themas - ' custom_theme ' / Bibliotheksname - 'global-styling' .

SCHRITT 5: Als nächstes müssen wir das 'Basisthema' erben. In unserem Fall werden wir das ' klassische ' Thema erben, das ein Drupal-Kernthema ist. Der Schlüssel wird also das Basisthema in info.ym l sein.

 CODE:
Grundthema : edel

SCHRITT 6: Jetzt werden wir die „Regionen“ für unser Thema definieren. In info.yml müssen wir es unter dem Schlüssel 'regions' definieren.

 CODE:
Regionen :
Markenzeichen : Markenzeichen
Navigation : Hauptnavigation
Suche : Suche
Vorgestellt : Vorgestellt
Inhalt : Inhalt
right_sidebar : Rechte Seitenleiste
footer_first : Fußzeile zuerst
footer_second : Fußzeile Sekunde
footer_third : Footer Third
footer_bottom : Fußzeile unten

Unter dem Schlüssel 'Regionen' können Sie Ihre Regionen für das benutzerdefinierte Drupal-Theme definieren. Hier,
branding: Ist die ID der Region, die aus Kleinbuchstaben bestehen sollte.
Branding: Der Name der Region, der aus Großbuchstaben bestehen kann.

STEP 7: Nachdem wir unsere Regionen für unser eigenes Drupal Thema definiert haben, müssen wir außer Kraft setzt page.html.twig unsere ‚regions'instead des noblen Thema der greifen. Wir erstellen das Verzeichnis templates/system, unter dem wir die page.html.twig erstellen.

 CODE:
< header aria-label ="Site header" class ="header" id ="header" role ="banner" >
{{ page.branding }}
{{ page.navigation }}
{{ page.search }}
</ header >
<Section class = "gekennzeichnet" id = "gekennzeichnet" role = "komplementär">
{{ page.featured }}
</ Abschnitt >
<Section class = "main" id = "main">
< main aria-label ="Site-Hauptinhalt" class ="content" id ="content" role ="main" >
{{ Seiteninhalt }}
</ main >
< aside class ="right--sidebar" id ="sidebar" role ="complementary" >
{{ page.right_sidebar }}
</ beiseite >
</ Abschnitt >
< 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 >
</ footer >

In page.html.twig erstellen wir die HTML-Struktur für unsere Regionen. Wie Sie in {{ page.branding }} sehen – Hier,

page - Ist der Schlüssel zum Rendern von 'Regionen' auf der Seite

branding- Ist die Region, die wir in der Datei info.yml definiert haben.

Jetzt haben wir unsere Regionen erstellt und auf der Seite gerendert.

Schritt 8: Gehen Sie auf Ihrer Drupal-Site zu Erscheinungsbild . Sie können Ihr benutzerdefiniertes Drupal- Design im Abschnitt Deinstallierte Designs sehen .

Sie müssen auf die Option " Installieren und als Standard festlegen" klicken, um Ihr Drupal-Theme auf der Site zu installieren.

Gehen Sie nach der Installation zu Struktur -> Blocklayout . Ihr benutzerdefiniertes Design wird unter dem Blocklayout angezeigt.

Sie sehen einen Link für "Blockregionen demonstrieren (benutzerdefiniertes Design ) ". Klicken Sie auf den Link. Sie können alle Regionen sehen , dass Sie in der info.yml und fügte hinzu , in page.html.twig erklärt hatte

Schritt 9 : Sie sind jetzt fast fertig mit der Themengestaltung in Drupal 9! Als nächstes müssen Sie Stile im CSS für jede Region gemäß Ihrem Design anwenden. In diesem Fall verwenden wir CSS ; Sie können sogar SCSS verwenden, wenn Sie möchten. Untersuchen Sie einfach die Branding-Region - Sie sollten die Regionsklasse sehen und dann das CSS zu dieser Klasse hinzufügen.

 . Kopfzeile {
 Anzeige : flexibel ;
 rechtfertigen-Inhalt : Zwischenraum ;
 Polsterung : 10 px ;
}


. Kopfzeile . Region {
 Polsterung : 5 px ;
}


. Kopfzeile . Region-Branding {
 biegsam : 0 1 20 %;
}


. Kopfzeile . region-navigation {
 biegsam : 0 1 50 %;
}


. Kopfzeile . Regionssuche {
 biegsam : 0 1 30 %;
}


. Region . Blockregion {
 Polsterung : 15 px ;
}


. vorgestellt {
 Polsterung : 40 px 20 px ;
 Hintergrundfarbe : indischrot ;
}


. Haupt {
 Auffüllen : 50 px 0 ;
 Anzeige : flexibel ;
 rechtfertigen-Inhalt : Zwischenraum ;
}
		



. Haupt . Inhalt {
 biegsam : 0 1 65 %;
}


. Haupt . rechts - Seitenleiste {
 biegsam : 0 1 30 %;
}


. footer--top {
 Anzeige : flexibel ;
 rechtfertigen-Inhalt : Zwischenraum ;
 Polsterung : 10 px ;
}


. Fußzeile - oben . Region {
 Polsterung : 5 px ;
}


. Region-Fußzeile-zuerst , . Region-Fußzeile-Sekunde , . region-footer-dritter {
 biegsam : 0 1 30 %;
}

Das Ergebnis:

Ihr benutzerdefiniertes Drupal 9-Theme ist fertig!

Wenn Sie Hooks schreiben oder Vorschläge für Ihre Zweigdatei erstellen müssen, können Sie die .theme-Datei zu Ihrem benutzerdefinierten Drupal-Theme hinzufügen (siehe unten).