Den b4um Installer ein zweites mal verwenden

Unsere Root-Seite funktioniert jetzt und auch der Home-Link in der Navigation verweist auf die richtige Seite. Damit können wir uns weitere Möglichkeiten des b4um Installers ansehen.

Eine Besonderheit des Installers ist, dass wir ihn auch später erneut ausführen können. Das ist beispielsweise praktisch, wenn wir bei der ersten Einrichtung noch nicht alle optionalen Komponenten installieren wollten.

Wir starten den Installer deshalb ein zweites Mal:

bin/rails generate b4um:install

Diesmal existieren bereits verschiedene Dateien aus unserem ersten Durchlauf.

Der Installer erkennt das und zeigt uns entsprechend an, welche Dateien bereits vorhanden und unverändert sind.

bcrypt und Active Storage

Zunächst werden wir wieder gefragt, ob wir bcrypt installieren möchten:

Install bcrypt for password support? (y/n) n
  bcrypt skipped.

Für unsere einfache Beispielanwendung benötigen wir momentan keine Passwortunterstützung und antworten deshalb mit:

Anschließend folgt Active Storage:

Install Active Storage for image attachments? (y/n) n
  Active Storage skipped.

Auch diese Funktion benötigen wir für unsere statischen Seiten zunächst nicht und wählen:

Das zeigt bereits einen wichtigen Punkt:

Wir müssen beim b4um Installer nicht jede Option mit y bestätigen. Wir installieren nur die Funktionen, die unsere Anwendung tatsächlich benötigt.

Falls wir bcrypt oder Active Storage später benötigen, können wir den Installer erneut verwenden.

Bereits vorhandene Dateien

Da der Installer bereits einmal ausgeführt wurde, erscheinen jetzt zahlreiche Meldungen wie:

identical  app/assets/stylesheets/b4um.css
identical  app/assets/stylesheets/b4um/cards.css
identical  app/assets/stylesheets/b4um/footer.css
identical  app/assets/stylesheets/b4um/forms.css
identical  app/assets/stylesheets/b4um/navigation.css

identical bedeutet, dass die entsprechende Datei bereits vorhanden ist und mit der Version übereinstimmt, die der Generator installieren würde.

Der Installer muss an dieser Stelle nichts verändern.

Auch eine Meldung wie:

exist  app/assets/stylesheets/b4um

ist zunächst kein Fehler.

Sie zeigt lediglich, dass das entsprechende Verzeichnis bereits vorhanden ist.

Beim erneuten Ausführen erkennt der b4um Installer bereits vorhandene und unveränderte Dateien automatisch.

Hero installieren

Als Nächstes fragt uns der Installer:

Add a hero section? (y/n)

Für unsere Beispielanwendung möchten wir einen Hero-Bereich verwenden und antworten:

Der Installer meldet beispielsweise:

identical  app/views/shared/_hero.html.erb
Hero section installed.

Da unser Hero in diesem Beispiel bereits vorhanden ist, muss die Datei nicht erneut angelegt werden.

Footer verwenden

Danach folgt die Frage:

Add a footer? (y/n)

Wir möchten einen Footer verwenden und antworten:

Da unser Footer bereits vorhanden ist, erkennt der Installer dies:

Footer already exists; keeping existing footer.

Unser bestehender Footer bleibt also erhalten.

Jetzt kommt eine besonders interessante Möglichkeit des b4um Generators.

Sitemap zum Footer hinzufügen

Nachdem wir den Footer bestätigt haben, fragt der Installer:

Add a sitemap to the footer? (y/n)

Für unsere Anwendung möchten wir eine Sitemap verwenden.

Deshalb antworten wir:

Anschließend können wir festlegen, wie unsere Sitemap aufgebaut werden soll.

Anzahl der Sitemap-Spalten bestimmen

Der Installer fragt zunächst nach der gewünschten Anzahl der Spalten:

Number of sitemap columns [4]:

Die Zahl in den eckigen Klammern ist der vorgeschlagene Standardwert.

Wir möchten unsere Sitemap in drei thematische Bereiche unterteilen und geben deshalb ein:

Damit arbeiten wir anschließend mit:

column_1
column_2
column_3

Der b4um Generator unterstützt dabei bis zu fünf Sitemap-Spalten. Wir müssen jedoch nicht alle verwenden.

Für unsere Beispielanwendung reichen drei Bereiche vollkommen aus.

Überschriften der Sitemap festlegen

Nachdem wir drei Spalten ausgewählt haben, fragt uns der Installer nacheinander nach deren Überschriften.

Für die erste Spalte erscheint:

Sitemap column 1 title [Kontakt]:

Wir geben ein:

Unternehmen

Für die zweite Spalte:

Sitemap column 2 title [Inhalte]:

verwenden wir:

Apps

Und für die dritte Spalte:

Sitemap column 3 title [Service]:

geben wir ein:

Rechtliches

Unsere Konfiguration sieht damit so aus:

column_1 → Unternehmen
column_2 → Apps
column_3 → Rechtliches

Der Installer richtet anschließend die Sitemap ein:

identical  app/views/shared/_sitemap.html.erb
identical  app/javascript/controllers/sitemap_controller.js
Sitemap installed.

Die Sitemap des b4um Footers lässt sich bereits bei der Installation strukturieren. Für unser Beispiel verwenden wir drei Spalten mit den Überschriften „Unternehmen“, „Apps“ und „Rechtliches“.

Cookie Consent installieren

Als Nächstes fragt uns der Installer:

Add cookie consent? (y/n)

Für unser Beispiel bestätigen wir:

Der Installer richtet die benötigten Komponenten ein:

identical  app/views/shared/_cookie_consent.html.erb
identical  app/javascript/controllers/cookie_consent_controller.js
Cookie consent installed.

Ob Cookie Consent in einer realen Anwendung benötigt wird und wie es eingesetzt werden muss, hängt natürlich von den dort verwendeten Diensten und Cookies ab.

Vorsicht bei bereits veränderten Dateien

Jetzt erreichen wir beim zweiten Durchlauf einen besonders wichtigen Punkt.

Der Installer stellt fest, dass unsere Navigation bereits existiert und sich von der Version unterscheidet, die er installieren würde:

conflict  app/views/shared/_navigation.html.erb

Daraufhin werden wir gefragt, ob die vorhandene Datei überschrieben werden soll:

Overwrite .../app/views/shared/_navigation.html.erb? [Ynaqdhm]

Hier antworten wir bewusst:

Der Installer meldet anschließend:

skip  app/views/shared/_navigation.html.erb

Warum wählen wir hier n ?

Unsere Navigation haben wir bereits für die neue Root-Seite angepasst.

Darin befindet sich unser Home-Link:

<%= navigation_link_to "Home", root_path, controller: :pages, action: :home %>

Diese Änderung möchten wir behalten.

Würden wir die vorhandene Navigation jetzt einfach überschreiben, könnten unsere eigenen Änderungen verloren gehen.

Deshalb wählen wir:

und behalten die bestehende Datei.

Beim erneuten Ausführen des Installers überschreiben wir unsere bereits angepasste Navigation nicht. Mit n bleibt der vorhandene Home-Link erhalten.

Nicht jeder Konflikt muss gleich behandelt werden

Kurz danach erkennt der Installer auch einen Konflikt bei:

config/b4um.yml

Die Ausgabe sieht beispielsweise so aus:

conflict  config/b4um.yml
Overwrite .../config/b4um.yml? [Ynaqdhm] y
force     config/b4um.yml

In unserem Beispiel bestätigen wir das Überschreiben mit:

Der Unterschied zur Navigation ist wichtig.

Die Navigation haben wir bereits bewusst von Hand verändert und möchten diese Änderung behalten.

Die config/b4um.yml möchten wir dagegen mit unserer gerade neu vorgenommenen Sitemap-Konfiguration aktualisieren.

Deshalb bestätigen wir hier das Überschreiben.

Bei einem Konflikt sollte man also nicht automatisch immer y oder immer n wählen. Entscheidend ist, ob die vorhandene Datei eigene Änderungen enthält, die erhalten bleiben sollen, oder ob sie durch die neue Konfiguration aktualisiert werden soll.

Die b4um Konfiguration aktualisieren wir dagegen bewusst, damit unsere neue Sitemap-Konfiguration übernommen wird.

Vor dem Erstellen der Seiten: Legal Links konfigurieren

Unsere Sitemap ist jetzt vorbereitet:

column_1 → Unternehmen
column_2 → Apps
column_3 → Rechtliches

Bevor wir allerdings die einzelnen Controller und Seiten erzeugen, müssen wir noch eine wichtige Einstellung vornehmen.

Dieser Schritt muss vor dem Generieren von Impressum, Datenschutz und AGB erfolgen.

Warum ist dieser Schritt wichtig?

Der b4um Generator behandelt bestimmte rechtliche Seiten besonders.

Dazu gehören:

Impressum
Datenschutz
AGB

Standardmäßig sind diese als rechtliche Links für den Footer vorgesehen.

In unserer Anwendung möchten wir sie aber nicht zusätzlich im normalen Footer-Bereich anzeigen. Wir haben schließlich bereits eine eigene Sitemap-Spalte dafür vorbereitet:

Rechtliches
────────────
Impressum
Datenschutz
AGB

Deshalb müssen wir dem b4um Generator vor dem Erstellen dieser Seiten mitteilen, dass die Legal Links in column_3 gehören.

config/b4um.yml öffnen

Öffne:

config/b4um.yml

Dort befindet sich die Konfiguration:

legal_links:
  placement: footer

Für unsere Anwendung ändern wir diese Einstellung auf:

legal_links:
  placement: column_3

Damit sieht der entsprechende Bereich anschließend so aus:

legal_links:
  placement: column_3

Was bewirkt diese Einstellung?

Mit

placement: column_3

teilen wir dem b4um Generator mit:

Rechtliche Links sollen in der dritten Sitemap-Spalte und nicht im separaten Footer-Bereich verwaltet werden.

Das müssen wir vor dem Aufruf des Controller-Generators erledigen.

Der Ablauf ist deshalb:

Sitemap einrichten
        ↓
column_1 = Unternehmen
column_2 = Apps
column_3 = Rechtliches
        ↓
config/b4um.yml öffnen
        ↓
legal_links:
  placement: column_3
        ↓
ERST JETZT Controller und Seiten generieren

Bevor wir die rechtlichen Seiten generieren, setzen wir legal_links.placement auf column_3. Dadurch werden Impressum, Datenschutz und AGB unserer Sitemap-Spalte „Rechtliches“ zugeordnet und nicht als separate Footer-Links behandelt.

Wichtig: Die Reihenfolge einhalten

An dieser Stelle sollten wir noch keinen Controller für die rechtlichen Seiten erzeugt haben.

Die Einstellung

legal_links:
  placement: column_3

muss zuerst vorhanden sein.

Erst danach beginnen wir mit unseren eigentlichen Seiten.

Column 1 – Unternehmen erstellen

Unsere erste Sitemap-Spalte trägt die Überschrift:

Unternehmen

Dort möchten wir folgende Seiten anzeigen:

Über uns
Kontakt

Wir erzeugen beide Seiten mit einem einzigen Befehl:

bin/rails g b4um:controller Unternehmen ueber_uns kontakt --sitemap=column_1

Durch:

--sitemap=column_1

weiß der b4um Generator bereits beim Erstellen, dass diese Seiten in die erste Sitemap-Spalte gehören.

„Über uns“ und „Kontakt“ werden direkt beim Erstellen der Sitemap-Spalte „Unternehmen“ zugeordnet.

Column 2 – Apps erstellen

Unsere zweite Spalte ist für die Apps vorgesehen:

Apps

Dort möchten wir:

Budgetblick
Reisemappe
bDay

anzeigen.

Dafür verwenden wir:

bin/rails g b4um:controller Apps budgetblick reisemappe bday --sitemap=column_2

Der Action-Name lautet dabei:

bday

In der sichtbaren Sitemap verwenden wir für die App die Schreibweise:

bDay

Budgetblick, Reisemappe und bDay werden gemeinsam erstellt und direkt der zweiten Sitemap-Spalte „Apps“ zugeordnet.

Column 3 – Rechtliches erstellen

Jetzt kommt der Schritt, für den wir zuvor config/b4um.yml angepasst haben.

Unsere Konfiguration enthält bereits:

legal_links:
  placement: column_3

Erst jetzt erzeugen wir:

Impressum
Datenschutz
AGB

mit:

bin/rails g b4um:controller Rechtliches impressum datenschutz agb --sitemap=column_3

Da wir die Platzierung der Legal Links vorher auf column_3 gesetzt haben, kann der Generator die rechtlichen Seiten entsprechend unserer gewünschten Sitemap-Struktur behandeln.

Das Ergebnis soll sein:

Rechtliches
────────────
Impressum
Datenschutz
AGB

und nicht eine zusätzliche Ausgabe dieser Links im separaten Footer-Bereich.

Da legal_links.placement bereits auf column_3 gesetzt wurde, werden unsere rechtlichen Seiten passend zur zuvor vorbereiteten Sitemap-Struktur angelegt.

Die richtige Reihenfolge im Überblick

Für unsere Beispielanwendung ist die Reihenfolge damit:

1. b4um Installer ausführen

2. Root-Seite erstellen und vollständig einrichten

3. Root-Seite und Navigation testen

4. b4um Installer erneut ausführen

5. Footer aktivieren

6. Sitemap aktivieren

7. Drei Columns auswählen

8. Überschriften festlegen:
   column_1 → Unternehmen
   column_2 → Apps
   column_3 → Rechtliches

9. config/b4um.yml anpassen:

   legal_links:
     placement: column_3

10. ERST DANACH die Seiten generieren:

    Unternehmen
    → Über uns
    → Kontakt

    Apps
    → Budgetblick
    → Reisemappe
    → BDay

    Rechtliches
    → Impressum
    → Datenschutz
    → AGB

11. Ergebnis im Browser kontrollieren

Gerade Schritt 9 sollte nicht übersprungen oder erst nachträglich durchgeführt werden, da die Einstellung vom Generator beim Anlegen der rechtlichen Seiten berücksichtigt wird.

Das fertige Ergebnis

Nach diesen Schritten besitzt unser Footer eine dreispaltige Sitemap:

Unternehmen          Apps                 Rechtliches
────────────         ────────────         ────────────
Über uns             Budgetblick          Impressum
Kontakt              Reisemappe           Datenschutz
                     BDay                 AGB

Die Seiten wurden dabei nicht nachträglich von Hand zusammensortiert.

Wir haben die Struktur zuerst definiert und anschließend die Seiten mit --sitemap=column_X direkt den entsprechenden Bereichen zugewiesen.

Das fertige Ergebnis: Der b4um Footer zeigt die drei vorbereiteten Sitemap-Bereiche „Unternehmen“, „Apps“ und „Rechtliches“. Auch Impressum, Datenschutz und AGB befinden sich dank legal_links.placement: column_3 direkt im Bereich „Rechtliches“.

Meld dich an und schreibe ein Kommentar