Bootstrap 4 in Drupal 8/9 mit Bootstrap Barrio

Wir werden Bootstrap 4 in Drupal 8/9 mit Bootstrap Barrio verwenden. Das Bootstrap Barrio-Design für Drupal 8/9 integriert Bootstrap 4 (oder Bootstrap 5, wenn Sie möchten) in Ihre Drupal-Site.

Bootstrap ist ein sehr beliebtes Framework zum Erstellen von Websites. Es bietet Designern und Entwicklern eine gemeinsame Sprache zur Kommunikation, was den Entwicklungsprozess erheblich vereinfacht.

Das Erstellen eines Unterthemas von Barrio ist ein unkomplizierter Prozess. In diesem Tutorial werden die grundlegenden Konfigurationsoptionen des Themas untersucht, die über eine vollständige grafische Benutzeroberfläche verwaltet werden.

Lesen Sie weiter, um zu erfahren, wie!

Schritt # 1.- Installieren Sie das Thema

Bevor wir beginnen, stellen Sie sicher, dass Ihre Website mindestens einen Artikel enthält, damit Sie nach dem Ändern der Designeinstellungen einen Vergleich vornehmen können. Platzieren Sie als zweites auch einen Block in der Seitenleiste der Region (Struktur > Blocklayout > Block platzieren).

• Öffnen Sie die Terminalanwendung Ihres Betriebssystems.
• Platzieren Sie den Cursor im Stammverzeichnis Ihrer Drupal-Installation.
• Typ : Composer benötigt drupal/bootstrap_barrio

Dadurch wird die neueste stabile Version des Designs heruntergeladen in: /web/themes/contrib/bootstrap_barrio

Schritt Nr. 2.- Erstellen Sie ein Unterthema

• Platzieren Sie den Cursor auf dem Themenverzeichnis bootstrap_barrio
• Typ :

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

Dadurch wird das Skript namens create_subtheme im Skriptordner ausführbar und auch ausgeführt.

Das Skript fragt nach einem Computernamen und einem beschreibenden Namen für Ihr benutzerdefiniertes Unterdesign.

Geben Sie die für Sie am besten geeigneten Werte ein. Denken Sie daran, dass der Maschinenname in Kleinbuchstaben geschrieben werden muss und keine Leerzeichen enthalten darf.

Dieser Schritt ist optional:

• Öffnen Sie das Verzeichnis Ihres Unterdesigns (/web/themes/custom/mytheme) in einem Code-Editor
• Ersetzen Sie alle Instanzen von „Bootstrap Barrio“ durch „Name Ihres Themas“.
• Speichern Sie alle Dateien

Hier ändern wir nur den beschreibenden Text, es wäre also überhaupt kein Problem, wenn Sie dies so lassen würden, wie es ist.

Schritt # 3.- Die Bootstrap Barrio-Einstellungen

• Klicken Sie im Backend Ihrer Drupal-Site auf Aussehen
• Scrollen Sie nach unten zu Ihrem benutzerdefinierten Thema
• Klicken Sie auf Installieren und als Standard festlegen

Nachdem das Design installiert wurde,

• Klicken Sie auf den Link Designeinstellungen

Auf der linken Seite des Bildschirms sehen Sie eine Gruppe vertikaler Registerkarten mit den folgenden Optionen:

1. Layout (aktiver Reiter)
2. Komponenten
3. Affix
4. Scroll-Spion
5. Schriftarten und Symbole
6. Farben

Layout

Standardmäßig ist die Registerkarte „Layout“ aktiv. Die erste Option „Container“ gibt an, ob die Elemente Ihrer Seite eine feste Breite haben oder im Gegenteil über die gesamte Bildschirmgröße angezeigt werden. Lassen Sie diese Option jetzt unberührt.

Innerhalb des Abschnitts „Region“ ist es möglich, den Regionen der Website benutzerdefinierte CSS-Klassen zuzuweisen.

• Fügen Sie einer bestimmten Region Ihre eigene benutzerdefinierte Klasse hinzu

• Schließen Sie den Abschnitt "Region".
• Öffnen Sie die `Seitenleistenposition`
• Ändern Sie den Wert von "Position der Seitenleisten" auf Links
• Öffnen Sie „Erstes Seitenleisten-Layout“ und „Erstes Seitenleisten-Layout“.
• Ändern Sie die Werte in 3 Spalten bzw. 2 Spalten

Komponenten

• Klicken Sie auf die vertikale Registerkarte "Komponenten".
• Ändern Sie das Schaltflächenelement in das Gliederungsformat
• Aktivieren Sie Img -Fluid-Stil auf alle Inhaltsbilder anwenden

Dadurch werden die Bilder, die Sie über die Bildschaltfläche des Inhaltseditors einfügen, standardmäßig responsiv. Das Bild wird verkleinert, um es an die Größe des Bildschirms anzupassen.

Der Abschnitt „Navbar-Struktur“ befasst sich mit der Größe des Navbar-Containers. Man muss zwischen zwei Navbars (navbar-top und navbar) unterscheiden. Navbar ist das Hauptnavigationsmenü Ihrer Website.

• Ändern Sie die Position der Navbar in Fest unten und die Farbe der Navbar-Verbindung in Dunkel
• Aktivieren Sie Sliding Navbar im Abschnitt „Navbar-Verhalten“, um ein gleitendes Hauptmenü auf kleinen Bildschirmen anzuzeigen

Die 3 letzten Abschnitte der Konfigurationsoption "Komponenten" beziehen sich auf die Position der Nachrichten, die von Drupals internem Nachrichtensystem geliefert werden, die Registerkarten für lokale Aufgaben (wie die Registerkarte "Inhalt bearbeiten") und das Erscheinungsbild von Formularelementen. Lassen Sie diese Optionen unberührt.

Affix

Mit affix ist es möglich, ein Element zu fixieren, dh den Wert der CSS-Eigenschaft position auf fixed zu setzen.

Scrollspy

Scrollspy wird verwendet, um die Links eines Navigationsmenüs automatisch zu aktualisieren, basierend auf der Position des Cursors, dh wenn Sie auf der Website nach oben oder unten scrollen. Dieses Thema wird in einem zukünftigen Tutorial behandelt.

Schriftarten und Symbole

Hier haben Sie die Möglichkeit, zwischen verschiedenen Google Fonts-Schriftkombinationen für den Text Ihrer Website zu wählen. Darüber hinaus können Sie zwischen Sätzen vordefinierter Symbole wählen, die Sie in Ihren Posts verwenden können.

• Wählen Sie die Schriftartkombination und das Symbolset nach Ihren Wünschen

Farben

Sie haben hier Optionen, um die Farbe der internen Nachrichten von Drupal anzupassen. Es gibt Optionen zum Anpassen der Tabellen der Website, z. B. der mit dem Views-Modul generierten.

Wenn Sie weiter nach unten scrollen, finden Sie das `Farbschema` für Ihr Unterthema. Sie können die Text- und Hintergrundfarben der Standardthemenbereiche anpassen.

Sie können die Farbe jedes Elements nach Ihren Wünschen anpassen und es blockieren, indem Sie das Schlosssymbol verwenden.

Seitenelementanzeige, Logobild und Favicon

Dies sind Standardoptionen in allen Drupal-Designs.

Bibliothek laden

Sie können zwischen mehreren gebrauchsfertigen Bootswatch-Online-Bibliotheken wählen, um das Erscheinungsbild Ihres Themas mit nur einem Klick zu verbessern. Es lohnt sich, diese Optionen zu prüfen.

Hier kann ausgewählt werden, ob Bootstrap (Bootstrap CSS und JS) lokal oder über ein CDN geladen werden soll. Diese Konfiguration sollte hier nicht verändert werden. Es ist viel besser, den Code in der .info.yml -Datei zu ändern.

• Klicken Sie auf Konfiguration speichern

Schauen Sie sich Ihre Website an. Dieses Tutorial soll Ihnen nicht das UI-Design beibringen, sondern die Möglichkeiten erläutern, die mit dem Barrio-Thema verfügbar sind.

Sie können jetzt jedoch von einem Design ausgehen und versuchen, das Thema daran anzupassen.

Ich hoffe, Ihnen hat dieses Tutorial gefallen. Danke fürs Lesen!