Table of Contents automatisch aus den Überschriften erstellen

Hier können Tipps und Tricks rund um die Verwendung von BlackCat CMS gepostet werden.
Antworten
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Table of Contents automatisch aus den Überschriften erstellen

Beitrag von shadowcat »

Um aus den Überschriften einer Seite automatisch einen ToC zu erstellen, gibt es zwei Möglichkeiten:
  • Das Droplet CreateToc
  • Die hier beschriebene Lösung auf Basis von jQuery
Das Droplet CreateToc scannt den Seiteninhalt auf der Serverseite via PHP und verändert ihn entsprechend. Die hier vorgestellte Lösung verwendet hierfür jQuery, arbeitet also auf der Clientseite.

Screenshot einer Testseite
Screenshot einer Testseite
2017-02-15 18_31_39.png (146.38 KiB) 4359 mal betrachtet

Anleitung

Schritt 1: Das jQuery Plugin installieren

Im Backend unter Admin-Tools das Tool "jQuery Plugin Manager" aufrufen. Dort das angehängte jQuery Plugin hochladen.

Schritt 2: Das Droplet installieren

Im Backend unter Admin-Tools das Tool "Droplets" aufrufen. Über [Import] das angehängte Droplet hochladen.

Schritt 3: toc.js auf der Seite einbinden

Das kann entweder pro Seite oder global erfolgen. Seitenbasiert: Die Seite im Backend zum Bearbeiten öffnen, [Kopfdateien] anklicken, bei "Javascript Dateien" auf [+ Anlegen] klicken und aus dem Dialog "/jquery.toc/toc.js" wählen. Speichern.

Sofern im Frontend noch kein jQuery geladen wird, den Knopf bei "jQuery verwenden" auf "on" stellen.

Schritt 4: Droplet einbinden

Auf der Seite an der gewünschten Stelle das Droplet [[jQueryToC]] einbinden.


Anpassen

Die Standarddarstellung ist in obigem Screenshot zu sehen. Das "Panel" bleibt beim Scrollen an Ort und Stelle. Das Laden des Plugins erfolgt über die Datei loader.js im Verzeichnis ./modules/lib_jquery/plugins/jquery.toc. Diese könnt Ihr Euch nach Gusto anpassen. Zu beachten ist nur, dass die loader.js für alle Seiten gilt, auf denen das Droplet benutzt wird.

Code: Alles auswählen

$(function() {
    $('.toc').toc({
        header_text: "Auf dieser Seite:",
        navClass   : "toc toc_fixed toc_shadow"
    });
});

Parameter und Defaults

Code: Alles auswählen

$('.toc').toc({
        header_text   : "On this page:",
        navClass      : "toc",
        listClass     : "toc",
        itemClass     : "toc_item",
        listType      : "ul",
        selector      : "h1, h2, h3",
        template      : "<nav role='navigation' class='{{navClass}}'>" +
                        "<strong role='heading'>{{header_text}}</strong>" +
                        "{{toc}}" +
                        "</nav>"
});
Standardmäßig wird eine unsortierte Liste (<ul>) erstellt. Es werden die Überschriften der Ebenen 1 - 3 (h1, h2, h3) berücksichtigt. Wenn Ihr z.B. die Hauptüberschrift (h1) nur für den Seitentitel verwendet, könnt Ihr sie beim 'selector' weglassen und dafür z.B. die Ebene 4 hinzunehmen.

Code: Alles auswählen

$(function() {
    $('.toc').toc({
        header_text: "Auf dieser Seite:",
        navClass   : "toc toc_fixed toc_shadow",
        selector: "h2, h3, h4"
    });
});
In der Datei ./modules/lib_jquery/plugins/jquery.toc/toc.css, die ebenfalls über das Droplet eingebunden wird, kann die Darstellung angepaßt werden. Wenn Ihr bei 'navClass' z.B. nur "toc" angebt, erscheint der ToC als Block innerhalb der Seite und ohne Schatten.

Code: Alles auswählen

$(function() {
    $('.toc').toc({
        header_text: "Auf dieser Seite:",
        navClass   : "toc",
        selector: "h2, h3, h4"
    });
});
Die CSS-Datei ist nicht sehr umfangreich und sollte leicht zu verstehen sein, wenn man etwas CSS beherrscht. ;)

Demo: http://www.phpmanufaktur.info/de/addons ... tionen.php


Von hinten durch die Brust ins Auge...?

Das getrennte Laden der toc.js und loader.js ist leider nötig, da die Droplets Extension, die das Laden von CSS und JS für Droplets erlaubt, nur je eine Datei von jedem Typ in die Datenbank einträgt.
Dateianhänge
droplet_jQueryToC_2017-02-15.zip
Droplet
(388 Bytes) 202-mal heruntergeladen
jquery.toc.zip
jquery.toc
(1.63 KiB) 204-mal heruntergeladen
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Alternativ: Es geht auch ohne Droplet

Beitrag von shadowcat »

Wenn die toc.js, die loader.js und die toc.css über [Kopfdateien] eingebunden werden, könnt Ihr auch auf das Droplet verzichten. Ihr braucht dann nur irgendwo an passender Stelle einen DIV mit CSS-Klasse "toc".

Code: Alles auswählen

<div class="toc"></div>
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
creativecat
Beiträge: 1430
Registriert: Mi 6. Feb 2013, 12:41
Kontaktdaten:

Re: Table of Contents automatisch aus den Überschriften erstellen

Beitrag von creativecat »

Kannte ich noch gar nicht! Danke für den Tipp! :-)
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Table of Contents automatisch aus den Überschriften erstellen

Beitrag von shadowcat »

Hab ich ja auch grad erst gebaut. :mrgreen:
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
creativecat
Beiträge: 1430
Registriert: Mi 6. Feb 2013, 12:41
Kontaktdaten:

Re: Table of Contents automatisch aus den Überschriften erstellen

Beitrag von creativecat »

Ich meinte auch allgemein die Idee mit dem automatischen Menü mit Hilfe von Überschriften... bringt mich auf einige Ideen zur Umsetzung von OnePagern ;-)
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Table of Contents automatisch aus den Überschriften erstellen

Beitrag von shadowcat »

Ahso.
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Antworten