Dynamisches Inhaltsverzeichnis HTML/JavaScript?
Hallo liebe Community,
ich bin gerade dabei ein Word-Dokument in HTML Code zu konvertieren. Soweit passt alles, jedoch hab ich etwas Probleme beim Inhaltsverzeichnis (siehe Bild).
Mein Wunsch wäre es das Inhaltsverzeichnis dynamisch zu gestalten, doch ich hab leider keine Ahnung wie. Ich kenne mich mit JavaScript zu wenig aus um zu sagen, ob dies hiermit möglich ist.
Außerdem stellt sich mir dir Frage, wie ich die Punkte neben der Namen des Inhaltsverzeichnisses immer bis zum Seitenende füllen kann, da sich die Überschriften von der Länge auch variieren können.
Vielleicht hat aber auch jemand eine Idee, wie ich das gesamte Inhaltsverzeichnis so realisieren kann.
Danke!
3 Antworten
Mein Wunsch wäre es das Inhaltsverzeichnis dynamisch zu gestalten, (...)
Bau jede Kapitelüberschrift in dieser Form auf:
<h2 class="chapter-title" id="kapiteltitel">...</h2>
Wobei du dem id-Attribut stets einen eindeutigen / für das Dokument einzigartigen Namen (ohne Leerzeichen oder andere Sonderzeichen) gibst.
Ob du nun ein h2-Element verwendest, oder irgendein anderes Element, was sich dafür eignen würde, sei dir überlassen. Wichtig ist das class-Attribut, denn anhand diesen Selektors werden später die Überschriften ausfindig gemacht.
Für das Inhaltsverzeichnis legst du dir nur ein leeres ol-Element an:
<ol id="table-of-contents"></ol>
Mit JavaScript kannst du anschließend alle Überschriften einholen und dazu die passenden Einträge generieren.
const tableOfContents = document.getElementById("table-of-contents");
const chapterTitles = document.getElementsByClassName("chapter-title");
for (const chapterTitle of chapterTitles) {
const listEntry = document.createElement("li");
const anchor = document.createElement("a");
anchor.innerHTML = chapterTitle.innerHTML;
anchor.href = "#" + chapterTitle.id;
listEntry.appendChild(anchor);
tableOfContents.appendChild(listEntry);
}
Das dazugehörige script-Element wird kurz vor dem schließenden body-Element hinzugefügt.
Mit Hilfe des Hash und der ID kann ein Fragment Identifier erstellt werden. Dieser wird als Linkziel für jedes Listenelement definiert. Klickt man auf den Link, springt der Browser zu der entsprechenden Überschrift (sofern sie sich nicht bereits im sichtbaren Bereich befindet). Diese Funktionalität wird öfter auch als Sprungmarke bezeichnet.
Die Seitenzahl zu ermitteln, wäre allerdings nicht sinnvoll, da auf der Webseite ja keine visuelle Unterteilung in Seiten mehr erfolgt, so wie du es im Word-Dokument hättest.
Außerdem stellt sich mir dir Frage, wie ich die Punkte neben der Namen des Inhaltsverzeichnisses immer bis zum Seitenende füllen kann, (...)
Das lässt sich wiederum wieder mit CSS lösen.
#table-of-contents > li a {
display: flex;
gap: 5px;
}
#table-of-contents > li a:after {
border-bottom: 1px dotted black;
content: '';
flex: 1;
margin-bottom: 2px;
}
Verwende einfach das Flexbox-Layout für deine Einträge. Ein ::after-Pseudoelement kann die Aufgabe übernehmen, einen unteren gepunkteten Rahmen darzustellen. Dafür drückt das flex-Property die Breite so weit auf, wie notwendig, um die jeweilige Zeile zu füllen.
Nach dieser Übersetzung ist jede Zeile von Anfang bis Ende (es betrifft also auch die Punkte) zum jeweiligen Link zugehörig. Wenn dem nicht so sein soll, passe die CSS-Selektoren an, sodass sie sich auf das li-Element beziehen, statt auf das a-Element.
Das HTML Dokument ist Statisch.
Wenn du was am Dokument änderst musst du es erneut Exportieren und überschreiben.
Der HTML-Code von Word-Dokumenten ist nicht für Bearbeitung gedacht.
warum willst du das denn überhaupt mit JS machen?
Du wirst es wahrscheinlich nichtmal hinbekommen eine neue Überschrift in das HTML einzubauen... Hast du dir mal das HTML angesehen was Word exportiert? Das sieht aus wie eine Müllhalde.
Wenn du per Word das Inhaltsverzeichnis erstellt hast kannst du doch IN word neue Abschnitte hinzufügen und dann neu exportieren.
Die Punkte werden auch von Word schon gemanaged, am HTML was zu ändern ist viel zu umständlich...
Ich änder nicht den Code, welcher ich beim Export der Word Datei in HTML bekomme. Ich habe das gesamte Word Dokument selber in HTML Code umgewandelt.
Wie gesagt, ich kenn mich nicht in JS aus und wollte deshalb fragen, ob ich dies vielleicht damit realisieren kann
Mich würde ja allein schon nur interessieren, wie ich diese Punkte nach den Überschriftnamen einbaue. Die Überschriften können schließlich unterschiedlich lang sein und dadurch müsste sich auch die Anzahl der Punkte verändern
in Js erstellst du ein div-element welches zwischen Titel und Seitenzahl steht, welches den Platz vollständig abdeckt und setzt die bottom Boarder mit CSS auf "dotted".
und eine Möglichkeit, dass Inhaltsverzeichnis dynamisch zu gestalten, sprich ich erstelle eine neue Überschrift in einem h1-Tag z.B. und das Inhaltsverzeichnis nimmt diese auf. Gibt es die oder nicht?
natürlich gibt es die... Gehen tut alles
Die Frage ist warum und wozu? Die einfache Lösung liegt auf der Hand... Wenn du anfängst und da js reinbaust wirst du 10-100 Stunden je nach deinem Wissen damit verbringen, oder irgendwann aufgeben
Da dies meine Aufgabe ist und diese Dokumente schlussendlich an Kunden gehen...
im HTML Format? Und sollen die Kunden das verändern können oder weshalb dynamischer Content?
Was spricht denn immernoch dagegen einfach wenn sich was ändert die HTML-Datei neu zu exportieren?
Wenn du was richtig Dynamisches aufbauen möchtest macht man das auch nicht mit Word.
Was meinst du denn genau mit dynamisch?
Einfach sobald ich eine neue Seite hinzufüge, dass auch diese im Inhaltsverzeichnis erscheint. Falls dies nicht möglich ist, ist es aber auch nicht so schlimm, da dies das kleinste Problem ist. Es geht mir eher um die Darstellung und das ich am Ende per Klick auf jeden Punkt des Inhaltsverzeichnis, auch auf die richtige Seite gelange
Was meinst du genau mit "eine neue Seite"..? Ein neues Html Dokument?
Das Word-Dokument, welches ich konvertieren muss, hat ja verschiedene Seiten. Wenn ich hier eine neue Seite erstelle und dieser eine Überschrift verpasse, wird diese automatisch in das Inhaltverzeichnis von Word eingefügt. Wenn ich diese dann in meinem HTML-Dokument dann ergänze, wäre mein Wunsch, dass diese auch automatisch im Inhaltsverzeichnis erscheint
Das ist auch überhaupt nicht mein Ziel des ganzen. Ich möchte dieses Inhaltsverzeichnis nur in HTML darstellen und eventuell (falls dies möglich ist) dynamisch gestalten, sodass beim Einfügen einer neuen Überschrift, diese auch im Inhaltsverzeichnis eingebaut wird. Jedoch weiß ich nicht, ob dies über JavaScript realisierbar ist