Erstellen Sie automatisch generiertes Inhaltsverzeichnis mit HTML-Slots

Inhaltsverzeichnis kann die Benutzerfreundlichkeit vieler Websites erheblich verbessern, zum Beispiel Dokumentationswebsites oder Online-Enzyklopädien wie Wikipedia. Ein gut gestaltetes Inhaltsverzeichnis bietet einen Überblick über die Seite und hilft Benutzern, schnell zu dem Abschnitt zu navigieren, an dem sie interessiert sind.

Traditionell können Sie ein Inhaltsverzeichnis entweder in HTML oder mit JavaScript erstellen, aber die kürzlich standardisierten HTML-Slots bieten einen Mittelweg zwischen den beiden . HTML Slot ist ein Webstandard, mit dem Sie Platzhalter zu einer Webseite hinzufügen und diese später dynamisch mit Inhalt füllen können .

Wann man das benutzt Etikett

Sie können platzieren Tags in das Inhaltsverzeichnis in Ihrer HTML-Datei, so dass die Slots später mit den entsprechenden Überschriften und Zwischenüberschriften gefüllt werden können. Wenn die Überschriften geändert werden, werden die Slots automatisch aktualisiert .

Bei dieser Technik müssen Sie den HTML-Quellcode des Inhaltsverzeichnisses manuell erstellen. JavaScript generiert den Textinhalt des Inhaltsverzeichnisses basierend auf den Überschriften oder Unterüberschriften auf der Seite automatisch.

Wenn Sie nicht möchten, dass das Inhaltsverzeichnis im HTML vorhanden ist, müssen Sie sowohl das Layout als auch den Inhalt mit JavaScript generieren .

1. Erstellen Sie den HTML-Code

Der HTML-Quellcode für das Inhaltsverzeichnis (Inhaltsverzeichnis) befindet sich in einem