Blog-Template mit Sticky Sidebar
von Anna-Lena Klimaschka
In dieser Anleitung ist beschrieben, wie einem Nachrichtenbeitrag ein Inhaltsverzeichnis mit einer Sticky-Sidebar hinzugefügt werden kann.
Dies ist im Barebone Bundle vorkonfiguriert und ist mit ein paar wenigen Einstellungen schnell eingerichtet.
1. Template-Zuweisung für den Artikel
Weise dem Artikel, in dem der Nachrichtenleser integriert ist, das Template "mod_article_blog.html5" zu.
Dieses Template ist erforderlich, um das Standardverhalten der block-Klassen zu überschreiben, insbesondere für die Eigenschaft overflow: visible;.
2. Inhaltsverzeichnis-Template bereitstellen
a. Wechsle im Backend zu „Templates“.
b. Wähle das vorhandene Template "template_blog_tableofcontent.html.twig" aus.
c. Kopiere dieses Template in den Ordner: "content_element/template"
d. Leere ggf. den Contao-Cache, damit das Template als Inhaltselement zur Verfügung steht.
3. Nachrichtenbeitrag bearbeiten oder erstellen
a. Grid-Struktur anlegen
Erstelle ein Grid mit den bekannten Row- und Col-Elementen: Beispielaufteilung:
- col-4 für die Sidebar
- col-8 für den eigentlichen Inhalt
b. Sticky-Sidebar aktivieren
Wähle das col-Element der Sidebar aus und setze ganz unten unter „Experteneinstellungen“ das Häkchen bei „Sticky“.
c. Inhalt einfügen
Füge deine Inhalte in der col-8 ein.
d. Inhaltsverzeichnis in Sidebar anlegen
In der col-4 (Sticky-Sidebar):
1. Erstelle ein neues Inhaltselement vom Typ „Individuelles Template“.
2. Fülle die Felder wie folgt:
- Überschrift: Inhaltsverzeichnis
- Schlüssel / Wert-Paare:
- Schlüssel: Text des Menüpunktes
- Wert: Ankerlink, z. B. #menuepunkt1
- Bsp: „Menüpunkt1“ -> „#menuepunkt1“
3. Wähle als Template das in Schritt 2 bereitgestellte Template.
4. Optionale Anpassungen
a. Template überschreiben
Bei Bedarf kannst du unter „Templates“. das Inhaltsverzeichnis-Template anpassen und überschreiben.
b. CSS-Styling
Passe bei Bedarf das Styling über CSS an, z. B. zur Farbgebung oder Positionierung.
Hinweis: Stelle sicher, dass die Ankerlinks (id-Attribute) im Inhaltsbereich vorhanden sind, damit die Navigation korrekt funktioniert.