Plugin Table of Content

Automatische Inhaltsverzeichnisse sind in elektronischen Dokumentationen zum Standard geworden, in diesem Code ein einfacher Ansatz.

home » flight cms » plugin table of content

Das TOC Plugin für FlightCMS

Um ein automatisches Inhaltsverzeichnis im Beitrag zu erzeugen, gibt es verschiedene Möglichkeiten. Der nachfolgende Code ist eine sehr einfache Variante für das FlightCMS.

echo '<ul class="toc">';
foreach(explode("\n",$content) as $value)
{
    if (preg_match('(<h[1-6].id=)', $value) && preg_match('(</h[1-6]>)', $value))
    {
        $link    = explode('"',explode('id="', $value)[1])[0];
        $title   = str_replace(array('-','_'),' ',$link);
        $kapitel = strip_tags($value);
        echo '<li class="fs-6">';
        echo '<a href="#'.$link.'" title="'.$title.'">'.$kapitel.'</a>';
        echo '</li>';
    } else {
        if (preg_match('(<h[1-6])', $value) && preg_match('(</h[1-6]>)', $value))
        {
            echo '<li class="fs-6">';
            echo strip_tags($value);
            echo '</li>';
        }
    }
}
echo '</ul>';

Code

Code-Beschreibung

Zunächt offensichtlich, das gesamte Codesegment ist mit einem Listen Tag <ul>...</ul> umrahmt, damit eine geschlossene Liste erzeugt werden kann. Im Inneren werden dann Schritt für Schritt die Listenelemente <li>...</li> aus dem Beitragsinhalt $content extrahiert.

Der zentrale RegEx beginnt mit dem Start-Pattern (<h[1-6].id=) und bedingt das Ende-Pattern (</h[1-6]>), dadurch soll sichergestellt werden, das sich in einer aktuellen Zeile der foreach() ein öffnendes und schließendes Überschriften Tag befindet. Das Tag darf die Ziffern von 1 bis 6 enthalten, während das öffnende Tag noch auf den Passus id= untersucht wird.

Dafür ist Bedingung, das der Beitragsautor oder der Redakteur eine Überschrift in der Form ## Überschrift ## {#Name-der-ID} verfasst. In diesem Fall wird das Inhaltsverzeichnis mit klickbaren Links erzeugt.

Der Linkname bzw. ID-Name muss HTML-Konform ohne Leerzeichen und Sonderzeichen abgefasst werden. Ideal sind Bindestriche oder Unterstriche, die durch das Plugin für die Anzeige problemlos in Leerzeichen umgewandelt werden können.

Ist dies nicht der Fall, wird die verschachtelte if-Klausel aktiv und prüft ebenfalls auf das eingangs beschriebene Pattern, lässt jedoch die Maskierung auf id= weg, da keine ID vom Redakteur vorgesehen ist. Es wird ein Inhaltsverzeichnis ohne Links angezeigt.

Damit auch noch ein alternatives title=-Attribut erzeugt wird, extrahiert str_replace() den Link-Text des Autors und wandelt Bindestriche und Unterstriche in Leerzeichen um.


FlightCMS
2023-12-21
Logbuch,Log,Status
post

JavaScript - Das umfassende Handbuch. JavaScript lernen und verstehen. Inkl. objektorientierter und funktionaler Programmierung - Umfassender Einstieg in JavaScript, praktische Beispiele und eine Darstellung professioneller Techniken. Eignet sich für Anfänger, die JavaScript von Grund auf lernen, als auch für Profis, die wissen wollen, wie man moderne, dynamische Webanwendungen entwickelt. Hier finden Sie alle Techniken: Ajax, jQuery, Node.js, DOM und mehr. Neueste Trends, Techniken und Entwicklungen bis hin zur Steuerung von Microcontrollern. Objektorientierung, ECMAScript 21 und funktionale Programmierung mit praxisnahen Beispielen für sofortigen Einsatz.

Wir können mit so genannten Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

Impressum


CMSWorkbench ist ein Tec- und Entwickler-Seite, rund um die Webtechniken der Content Management Systeme.

Datenschutz


Diese Webseite nutzt keine Cookies oder sonstige Speichermechanismen, die einen Rückschluss auf das Leserverhalten zulassen.

Kontakt


Sie können mit der Redaktion oder dem Administrator via eMail unter der Adresse: Kontakt@Oliver-Lohse.de aufnehmen.