Automatisches Inhaltsverzeichnis mit jQuery
In diesem Beitrag findet ihr den jQuery-Code für ein automatisches Inhaltsverzeichnis auf Basis der HTML-Struktur.
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.
- Die HTML-Struktur des Beitrags muss verschiedene, sinnvoll verwendete Überschriften aufweisen.
- Wir müssen entscheiden welche Gliederungsebenen der Überschriften (z. B.
<h2>
und/oder<h3>
) für das Inhaltsverzeichnis verwendet werden sollen. - Alle Überschriften die im Inhaltsverzeichnis zum Einsatz kommen sollen, müssen eine ID erhalten.
- 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" );
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
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
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
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.
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.