b4um Generator – Sitemap mit wenigen Befehlen füllen

b4um Generator – Sitemap mit wenigen Befehlen füllen

Im vorherigen Revisit-Tutorial haben wir den b4um Generator eingerichtet und dabei bereits die Grundlage für unseren Footer und die Sitemap geschaffen.
Unsere Anwendung besitzt vier Sitemap-Spalten:
  • Kontakt
  • Inhalte
  • Service
  • Mehr
Außerdem haben wir bereits festgelegt, dass unsere rechtlichen Seiten später in der dritten Spalte Service erscheinen sollen.
Unsere config/b4um.yml enthält deshalb zunächst:
---
sitemap:
  - key: column_1
    title: Kontakt
  - key: column_2
    title: Inhalte
  - key: column_3
    title: Service
  - key: column_4
    title: Mehr
legal_links:
  placement: column_3
Damit ist die Vorbereitung abgeschlossen.
In diesem Tutorial sehen wir uns an, wie einfach wir diese Sitemap jetzt mit echten Seiten füllen können.
Anders als früher müssen wir die Links nicht anschließend von Hand zusammensuchen und eintragen. Der b4um Controller-Generator kann die neuen Seiten direkt beim Erstellen der gewünschten Sitemap-Spalte zuordnen.

1. Unser Ziel

Unsere vier Spalten sollen am Ende folgendermaßen aussehen:
Kontakt              Inhalte             Service             Mehr
────────────────     ────────────────    ────────────────    ────────────────
Über uns             Budgetblick         Impressum
Kontakt              Reisemappe          Datenschutz
                     bDay                AGB
Die vierte Spalte Mehr lassen wir zunächst bewusst leer.
Sie steht uns später für weitere Inhalte zur Verfügung.
Für die ersten drei Bereiche benötigen wir lediglich drei Aufrufe des b4um Controller-Generators.

2. Column 1 – Kontakt

Wir beginnen mit der ersten Spalte:
Kontakt
Dort möchten wir zwei Seiten unterbringen:
Über uns
Kontakt
Dafür führen wir aus:
bin/rails g b4um:controller Unternehmen ueber_uns kontakt --sitemap=column_1
Der erste Parameter:
Unternehmen
bestimmt den Namen unseres Controllers.
Danach folgen die beiden Actions:
ueber_uns
kontakt
Entscheidend für unsere Sitemap ist der letzte Parameter:
--sitemap=column_1
Damit teilen wir dem b4um Generator bereits beim Erstellen mit, dass diese Seiten in die erste Sitemap-Spalte gehören.
Der Generator erstellt unter anderem:
app/controllers/unternehmen_controller.rb

app/views/unternehmen/ueber_uns.html.erb
app/views/unternehmen/kontakt.html.erb
und richtet die entsprechenden Routen ein.
Gleichzeitig ergänzt er unsere bestehende b4um Konfiguration.
Der erste Bereich in config/b4um.yml sieht danach so aus:
- key: column_1
  title: Kontakt
  links:
  - title: Über uns
    route: unternehmen_ueber_uns_path
  - title: Kontakt
    route: unternehmen_kontakt_path
Wir müssen die beiden Sitemap-Links also nicht selbst eintragen.
Der Generator übernimmt das für uns.

3. Column 2 – Inhalte

Als Nächstes füllen wir:
Inhalte
In dieser Spalte möchten wir drei Beispiel-Apps anzeigen:
Budgetblick
Reisemappe
bDay
Dafür genügt wieder ein einzelner Befehl:
bin/rails g b4um:controller Apps budgetblick reisemappe bday --sitemap=column_2
Diesmal erstellt der Generator den:
AppsController
mit den Actions:
budgetblick
reisemappe
bday
Durch:
--sitemap=column_2
werden die neuen Seiten gleichzeitig unserer zweiten Sitemap-Spalte zugeordnet.
Die Konfiguration wird automatisch erweitert:
- key: column_2
  title: Inhalte
  links:
  - title: Budgetblick
    route: apps_budgetblick_path
  - title: Reisemappe
    route: apps_reisemappe_path
  - title: Bday
    route: apps_bday_path
Auch die entsprechenden Rails-Routen wurden vom Generator angelegt:
/apps/budgetblick
/apps/reisemappe
/apps/bday

4. Die Schreibweise von bDay anpassen

Bei unserer Beispiel-App möchten wir die sichtbare Schreibweise:
bDay
verwenden.
Der Generator erzeugt aus dem Action-Namen:
bday
zunächst automatisch:
title: Bday
Das ist technisch vollkommen in Ordnung, entspricht aber nicht unserer gewünschten Schreibweise.
Deshalb ändern wir lediglich den sichtbaren Titel in:
- title: bDay
  route: apps_bday_path
Wichtig dabei:
Der Routenname bleibt unverändert:
apps_bday_path
Wir ändern ausschließlich den Text, den Besucher in der Sitemap sehen.
Unsere zweite Spalte sieht anschließend so aus:
- key: column_2
  title: Inhalte
  links:
  - title: Budgetblick
    route: apps_budgetblick_path
  - title: Reisemappe
    route: apps_reisemappe_path
  - title: bDay
    route: apps_bday_path

5. Column 3 – Service

Jetzt kommen unsere rechtlichen Seiten.
In der dritten Spalte:
Service
möchten wir:
Impressum
Datenschutz
AGB
anzeigen.
Hier zahlt sich die Vorbereitung aus dem vorherigen Tutorial aus.
Unsere config/b4um.yml enthält bereits:
legal_links:
  placement: column_3
Damit ist schon vor dem Erstellen der Seiten festgelegt, dass die rechtlichen Links in unserer dritten Sitemap-Spalte verwaltet werden sollen.
Jetzt führen wir aus:
bin/rails g b4um:controller Rechtliches impressum datenschutz agb --sitemap=column_3
Der Generator erstellt:
RechtlichesController
sowie die drei Views für:
Impressum
Datenschutz
AGB
und ergänzt automatisch die dritte Sitemap-Spalte:
- key: column_3
  title: Service
  links:
  - title: Impressum
    route: rechtliches_impressum_path
  - title: Datenschutz
    route: rechtliches_datenschutz_path
  - title: AGB
    route: rechtliches_agb_path
Damit befinden sich auch unsere rechtlichen Seiten dort, wo wir sie haben möchten.

6. Unsere fertige b4um Konfiguration

Nach den drei Generator-Aufrufen und der Anpassung von bDay sieht unsere config/b4um.yml folgendermaßen aus:
---
sitemap:
- key: column_1
  title: Kontakt
  links:
  - title: Über uns
    route: unternehmen_ueber_uns_path
  - title: Kontakt
    route: unternehmen_kontakt_path
- key: column_2
  title: Inhalte
  links:
  - title: Budgetblick
    route: apps_budgetblick_path
  - title: Reisemappe
    route: apps_reisemappe_path
  - title: bDay
    route: apps_bday_path
- key: column_3
  title: Service
  links:
  - title: Impressum
    route: rechtliches_impressum_path
  - title: Datenschutz
    route: rechtliches_datenschutz_path
  - title: AGB
    route: rechtliches_agb_path
- key: column_4
  title: Mehr
legal_links:
  placement: column_3
Das Entscheidende daran:
Diese Links haben wir nicht einzeln von Hand angelegt.
Wir haben lediglich angegeben, in welche Spalte die jeweiligen Seiten gehören.

7. Die vierte Spalte darf leer bleiben

Unsere vierte Sitemap-Spalte:
- key: column_4
  title: Mehr
enthält momentan keine Links.
Das ist kein Problem.
Wir müssen nicht sofort jede beim Installer angelegte Sitemap-Spalte füllen.
Später könnten wir dort beispielsweise weitere Bereiche oder Seiten unterbringen.
Für unser jetziges Beispiel lassen wir Mehr bewusst leer.

8. Die erzeugten Routen kontrollieren

Falls wir überprüfen möchten, welche Routen der Generator angelegt hat, können wir beispielsweise ausführen:
bin/rails routes | grep unternehmen
Für unsere Apps:
bin/rails routes | grep apps
und für die rechtlichen Seiten:
bin/rails routes | grep rechtliches
Damit können wir kontrollieren, dass alle erzeugten Seiten über eigene Rails-Routen erreichbar sind.

9. Das Ergebnis im Browser ansehen

Jetzt starten wir – falls noch nicht geschehen – unsere Rails-Anwendung:
bin/rails server
Anschließend öffnen wir:
http://localhost:3000
Im Footer sehen wir jetzt unsere vier Sitemap-Spalten.
Die ersten drei wurden automatisch mit den zuvor erzeugten Seiten gefüllt:
Kontakt              Inhalte             Service             Mehr
────────────────     ────────────────    ────────────────    ────────────────
Über uns             Budgetblick         Impressum
Kontakt              Reisemappe          Datenschutz
                     bDay                AGB
Ganz unten befinden sich weiterhin der Copyright-Bereich und unsere Cookie-Einstellungen.
Im Bereich Service stehen dagegen wie geplant:
Impressum
Datenschutz
AGB
Damit sehen wir auch, warum wir bereits vor dem Erstellen dieser Seiten:
legal_links:
  placement: column_3
festgelegt haben.
Die rechtlichen Links befinden sich jetzt direkt in unserer Sitemap und werden nicht zusätzlich als normale Legal Links im unteren Footer-Bereich ausgegeben.

Sitemap
Sitemap

  • Home-Navigation
  • Hero
  • Home-Inhalt
  • Kontakt
  • Inhalte
  • Service
  • die noch leere Spalte Mehr
  • Copyright
  • Cookie-Einstellungen
  • Dark-Mode-Schalter

10. Drei Befehle für unsere komplette Sitemap

Wenn wir uns ansehen, was wir tatsächlich tun mussten, ist der entscheidende Teil erstaunlich kurz.
Für Kontakt:
bin/rails g b4um:controller Unternehmen ueber_uns kontakt --sitemap=column_1
Für Inhalte:
bin/rails g b4um:controller Apps budgetblick reisemappe bday --sitemap=column_2
Für Service:
bin/rails g b4um:controller Rechtliches impressum datenschutz agb --sitemap=column_3
Das war es im Wesentlichen bereits.
Der Generator erstellt dabei nicht nur Controller, Actions und Views.
Er erzeugt auch die Rails-Routen und trägt die Seiten direkt in die gewünschte Sitemap-Spalte ein.

Was haben wir in diesem Tutorial gemacht?

Im vorherigen Revisit-Tutorial hatten wir unsere Sitemap bereits vorbereitet.
Wir hatten vier Bereiche:
Kontakt
Inhalte
Service
Mehr
und außerdem festgelegt:
legal_links:
  placement: column_3
Darauf konnten wir jetzt direkt aufbauen.
Mit:
bin/rails g b4um:controller Unternehmen ueber_uns kontakt --sitemap=column_1
haben wir unsere Unternehmensseiten erstellt und der ersten Spalte zugeordnet.
Mit:
bin/rails g b4um:controller Apps budgetblick reisemappe bday --sitemap=column_2
haben wir drei App-Seiten erzeugt und direkt unter Inhalte eingetragen.
Und mit:
bin/rails g b4um:controller Rechtliches impressum datenschutz agb --sitemap=column_3
haben wir Impressum, Datenschutz und AGB erstellt und unserer vorbereiteten Service-Spalte zugeordnet.
Lediglich die gewünschte Schreibweise von:
Bday
haben wir anschließend in:
bDay
geändert.
Unsere vierte Spalte Mehr bleibt vorerst leer und kann später jederzeit verwendet werden.
Damit zeigt sich einer der Vorteile des aktuellen b4um Generators besonders deutlich:
Wir definieren zuerst die Struktur unserer Anwendung – und beim Erstellen neuer Seiten teilen wir dem Generator einfach mit, wo diese hingehören.
Controller, Views, Routen und Sitemap arbeiten anschließend direkt zusammen.

Meld dich an und schreibe ein Kommentar