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.

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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. ZD14
    schrieb am 12.09.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

    Antworten
  2. Kim Peter
    schrieb am 11.06.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

    Antworten
  3. Manuel
    schrieb am 29.12.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

    Antworten
    • Jonas Hellwig
      schrieb am 29.12.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.

      Antworten
      • Matthias
        schrieb am 07.01.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.

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →