So generieren Sie automatisch Inhaltsverzeichnisse mit HTML-Slots
Inhaltsverzeichnis kann beispielsweise die Benutzererfahrung vieler Websites erheblich verbessern Dokumentationsstellen oder Online-Enzyklopädien wie Wikipedia. Ein durchdachtes Inhaltsverzeichnis gibt einen Überblick über die Seite und hilft Benutzern, schnell zu dem Bereich zu navigieren, an dem sie interessiert sind.
Normalerweise können Sie Inhaltsverzeichnisse entweder in HTML oder mit JavaScript erstellen. Die in letzter Zeit standardisierten HTML-Slots bieten jedoch eine Mittelweg zwischen den beiden. HTML-Slot ist ein Webstandard, der es Ihnen ermöglicht Platzhalter zu einer Webseite hinzufügen und später Fülle es dynamisch mit Inhalten.
Wann ist der
Sie können platzieren
Bei dieser Technik müssen Sie den HTML-Quellcode des Inhaltsverzeichnisses manuell erstellen. Nur JavaScript generiert automatisch den Textinhalt des Inhaltsverzeichnisses, basierend auf den Überschriften oder Unterüberschriften auf der Seite.
Wenn Sie nicht möchten, dass das Inhaltsverzeichnis im HTML-Code vorhanden ist, müssen Sie dies tun Generieren Sie sowohl das Layout als auch den Inhalt mit JavaScript.
1. Erstellen Sie den HTML-Code
Der HTML-Quellcode für das Inhaltsverzeichnis wird sein in einem Etikett. Der Code im Inneren wird erst gerendert, wenn es von JavaScript zum Dokument hinzugefügt wird. Unser TOC wird haben Platzhalter, festgehalten
Das Name Attribut von jedem Slot Attribut in den entsprechenden Überschriften und Unterüberschriften im Dokument.
Unten sehen Sie eine Beispiel-HTML Velociraptor (lateinisch "swift seizer") ist ein… Velociraptor war ein mittelgroßer Dromaeosaurid, mit Erwachsenen… Fossilien von Dromaeosauriden primitiver als… Während einer Expedition des American Museum of Natural History… Velociraptor ist Mitglied der Gruppe Eudromaeosauria, einer abgeleiteten Untergruppe von… Das 1971 gefundene Exemplar "Fighting Dinosaurs" bewahrt ein… 2010 veröffentlichten Hone und seine Kollegen ein Papier über… Velociraptor war bis zu einem gewissen Grad warmblütig, da er… Ein Schädel aus Velociratoptor mongoliensis trägt zwei parallele… Wie Sie sehen, ist jede Überschrift ein einzigartiges gegeben Und hier ist der HTML-Code des Inhaltsverzeichnisses, in einem Beachten Sie in den beiden obigen Codefragmenten die passend Bevor Sie sich den JavaScript-Code ansehen, wird das Inhaltsverzeichnis aus der Liste hinzugefügt Stellen Sie sicher, dass die Nun fügen wir das Skript hinzu fügt das Inhaltsverzeichnis über dem ein Der Code-Ausschnitt oben erstellt eine Kopie von Dann wurde der geklont Wenn wir den CSS-Zähler am zurücksetzen würden Hier ist der Screenshot der Ausgabe: Wenn du möchtest verknüpfen Sie die TOC-Titel mit ihren jeweiligen Überschriften und Unterüberschriften beim Hinzufügen Velociraptor (lateinisch "swift seizer") ist ein… Velociraptor war ein mittelgroßer Dromaeosaurid, mit Erwachsenen… Fossilien von Dromaeosauriden primitiver als… Wie Sie oben sehen können, die Und das Titel im Inhaltsverzeichnis sind verankert: In der extra Zeile darüber alle Siehe den Screenshot des verlinktes Inhaltsverzeichnis unten: Sie können den in diesem Beitrag verwendeten Code aus unserem Github Repo auschecken, herunterladen oder gruppieren. mit einigen Überschriften und Unterüberschriften. Das
Beschreibung
Gefieder
Geschichte der Entdeckung
Einstufung
Paläobiologie
Spülverhalten
Stoffwechsel
Pathologie
Slot Wert. Etikett.
Slot und Name Attribute innerhalb der Überschriften und der 2. Nummerieren Sie die Überschriften
zum Dokument, lass uns Fügen Sie mit den CSS-Zählern Seriennummern für die Überschriften hinzu. Artikel Gegen-Reset: Überschrift; Artikel h2 :: vor Gegeninkrement: Überschrift; Inhalt: '0'Counter (Überschrift)': ';
Gegen-Reset Die Regel gehört zu dem Element, das das ist unmittelbares Elternteil aller Titel, die die Slot Attribut (was ist das Element in unserem Code).3. Legen Sie das Inhaltsverzeichnis in das Dokument ein
Etikett, in der Container. templateContent = document.querySelector ('template'). Inhalt; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (article); und Fügt einen Schatten-DOM-Baum hinzu. Wir ... auch füge eine Kopie von hinzu Inhalt zu diesem Schatten-DOM-Baum. wird in die eingefügt Element ist jetzt auch im TOC vorhanden, Nur die Überschriften und Unterüberschriften, die einen Platzhalter im Inhaltsverzeichnis gefunden haben, sind jedoch sichtbar. Karosserie oder html Element statt Artikel, der Zähler hätte auch die Liste der Überschriften im Inhaltsverzeichnis gezählt. Deshalb solltest du Setzen Sie die Zähler am unmittelbar übergeordneten Element der Überschriften zurück.
4. Fügen Sie Hyperlinks hinzu
Ich würde zu den Überschriften und zum Verankern des entsprechenden Inhaltsverzeichnistextes müssen Sie das tun das repetitive entfernen Ich würde Werte aus dem geklonten Artikel.
Beschreibung
Gefieder
Ich würde Attribut ist zu jeder Überschrift und Unterüberschrift im Artikel hinzugefügt.
Ich würde Attribute sind aus dem geklonten Artikel entfernt Vor Anhängen des Shadow-DOM-Baums. templateContent = document.querySelector ('template'). Inhalt; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]'). forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true) )); document.querySelector ('# toc'). appendChild (article); 
Github Demo
