kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Automatisches Inhaltsverzeichnis mit jQuery

Ein Inhaltsverzeichnis in den Beiträgen eines Blogs oder in komplexen Unterseiten einer Website bietet sich aus verschiedenen Gründen an. Einerseits bietet ihr euren Lesern einen Mehrwert, andererseits verbessert ihr die Struktur des Beitrags für Suchmaschinen. Wenn ihr ein Inhaltsverzeichnis erstellen möchtet, solltet ihr dafür einen Automatismus einsetzen. Andernfalls müsst ihr das Inhaltsverzeichnis jedes Mal aufwändig anpassen, sobald die Inhalte der Seite verändert werden. In diesem Beitrag archiviere ich ein jQuery-Snippet mit dessen Hilfe ein Inhaltsverzeichnis erzeugt und eingefügt werden kann.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Funktionsweise des Scripts

Das Inhaltsverzeichnis wird vollständig über JavaScript (jQuery) realisiert, was bedeutet, dass Anwender ohne JavaScript kein Inhaltsverzeichnis angezeigt bekommen. Aus meiner Sicht ist das in Ordnung, da der Beitrag selbst auch ohne das Inhaltsverzeichnis gelesen werden kann. Das Inhaltsverzeichnis ist ein zusätzlicher Komfort für Anwender mit aktiviertem JavaScript. Wir erweitern die Kern-Funktionalität also nach dem Konzept »Progressive Enhancement«.

Für ein funktionierendes Inhaltsverzeichnis müssen verschiedene Voraussetzungen erfüllt sein.

  1. Die HTML-Struktur des Beitrags muss verschiedene, sinnvoll verwendete Überschriften aufweisen.
  2. Wir müssen entscheiden welche Gliederungsebenen der Überschriften (z. B. <h2> und/oder <h3>) für das Inhaltsverzeichnis verwendet werden sollen.
  3. Alle Überschriften die im Inhaltsverzeichnis zum Einsatz kommen sollen, müssen eine ID erhalten.
  4. Das Inhaltsverzeichnis selbst muss erstellt werden und die einzelnen Punkte innerhalb des Verzeichnisses müssen auf die IDs der jeweiligen Überschriften verlinken.

Wenn das Inhaltsverzeichnis manuell konstruiert wird, müssen alle diese Punkte von Hand umgesetzt werden. Insbesondere die IDs und die Verlinkungen sind in der dauerhaften Pflege sehr lästig. Wir setzen daher alle Punkte mit JavaScript um.

jQuery-Script für das Inhaltsverzeichnis

Mit folgendem Code kann – auf Basis von jQuery – ein automatisches Inhaltsverzeichnis eingefügt werden. Ein Beispiel könnt ihr euch hier anschauen.

// Innerhalb von »article« wird nach h2-Elementen gesucht und jeweils eine ID hinzugefügt.  
$('article h2').attr('id', function(i) {
  return 'section'+(i+1);
});

// Der Anfang des Inhaltsverzeichnisses wird gebaut
var toc = "<nav id='toc'><strong>Inhaltsverzeichnis:</strong><ol>";

var toc_entry, toc_element, toc_headline, toc_anchor;

// Es wird nach allen h2-Elementen innerhalb des Artikels gesucht.
// Jede h2 wird ausgelesen und erzeugt im Inhaltsverzeichnis einen Eintrag
$("article h2").each(function() {

toc_element = $(this);
toc_headline = toc_element.text();
toc_anchor  = "#" + toc_element.attr("id");

toc_entry =
"<li>" +
  "<a href='" + toc_anchor + "'>" +
    toc_headline +
  "</a>" +
"</li>";

toc += toc_entry;

});

// Das Ende des Inhaltsverzeichnisses wird erstellt
toc += "</ol>" + "</nav>";

// Das Verzeichnis wird nach dem »#title« eingefügt.
$(toc).insertAfter( "#title" );

Beispiel anzeigen

Links / Quellen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. Manuel

    Verfasst am 29. Dezember 2014 um 12:04 Uhr.

    Hey Jonas,

    wie immer sehr gut geschrieben und informativ, aber der erste Satz mit den Suchmaschinen könnte falsch verstanden werden. Eine gut strukturierte Seite ist definitiv positiv für Google & Co. aber das Inhaltsverzeichnis selbst trägt dazu meines Wissens nach nichts bei, vor allem nicht wenn es via jQuery erzeugt wurde oder irre ich mich da?
    Ich persönlich bin daher eher ein Fan davon, ein solches Verzeichnis beim Speichern des Beitrags plain in die DB zu schreiben, um somit quasi alle Vorteile nutzen zu können, auch wenn es programmiertechnisch sicherlich nicht die „sauberste“ Lösung ist… ;-)

    Lg und einen guten Rutsch!
    Manuel

    • Jonas Hellwig

      Verfasst am 29. Dezember 2014 um 20:14 Uhr.

      Hallo Manuel, ich war jetzt davon ausgegangen, dass Google mittlerweile auch JavaScript wie ein typischer moderner Browser erkennt und ausließt. Google schriebt dazu:

      »The Google indexing system renders webpages using the HTML of a page as well as its assets such as images, CSS, and Javascript files.«

      In den Developer-Bereichen finden sich dazu hier und hier interessante Quellen.

      • Matthias

        Verfasst am 7. Januar 2015 um 12:17 Uhr.

        Ja, Google sollte seit geraumer Zeit JavaScript ausführen, bevor die Seite indiziert wird. Allerdings wird so ein Inhaltsverzeichnis (unabhängig davon ob Server- oder Clientseitig aufgebaut) der Suchmaschine wenig Mehrwert liefern, da sie selbst unter anderem solche Strukturen ermittelt und auswertet.

        Der Vorteil für den Endnutzer bleibt natürlich, besonders wenn diese Inhaltsstruktur „sticky“ oder „fixed“ angezeigt wird und der Nutzer somit jederzeit im Inhaltsverzeichnis rumspringen kann.

  2. Kim Peter

    Verfasst am 11. Juni 2015 um 12:51 Uhr.

    Hallo Jonas,

    vielen Dank, dass kann ich sehr gut gebrauchen! Ich habe mir mittlerweile angewöhnt jeden Artikel mit einer Aufzähliung darüber zu beginnen was den Leser erwartet.

    Das ganze automatisiert mit Hilfe der h2 und h3 Überschriften zu verlinke ist genial.

    Viele Grüße
    Kim

  3. ZD14

    Verfasst am 12. September 2017 um 15:35 Uhr.

    Hallo Jonas,

    Eines gleich vorweg, ich kenne mich mit JavaScript eigentlich gar nicht aus. Verstehe aber die Logik von Programmiersprachen.

    Ich versuche gerade dein Script zu verwenden. Allerdings habe ich Probleme!

    Ich habe mir deine Beispieldatei angesehen. Die sieht ja wirklich gut aus. Jetzt habe ich mir gedacht, ich kopiere den Quellcode und passe den dann auf meine Bedürfnisse an. Allerdings musste ich feststellen, dass bei meiner neuen Datei (dessen Quellcode exakt jenem von deiner Beispieldatei entspricht) kein Inhaltsverzeichnis angezeigt wird. Des Weiteren ist bei mir der Article-Bereich nicht weiß hinterlegt. Im Gegenteil, mir kommt vor, dass der Article-Bereich nicht erkannt wird, da der Text auf der ganzen Seite steht und alles grau hinterlegt ist.

    Nun zum Script:
    Ich habe mittels dem Einbauen von ‚alert(„Hallo!“);‘ herausgefunden, dass das Script schon bei der ersten Anweisung für Probleme sorgt. Füge ich die Alert-Box davor ein, wird sie angezeigt. Wenn sie danach ist, kommt gar nichts.
    Erste Anweisung:
    $(‚article h2‘).attr(‚id‘, function(i) {
    return ’section’+(i+1);
    });

    Kannst du mich aufklären, woran das liegen könnte?!

    Vielen Dank und liebe Grüße,
    ZD14

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.