Ich habe ein Bookmarklet erstellt, um die Inhaltsübersicht für Forum-Posts zu erstellen

[ShunS (Shun Sakurai)]

Inhaltsverzeichnis:

• Zusammenfassung
  
• Anwendung
  
•     Installation
  
•             Was der Code tut
  
•     Generieren des Inhaltsverzeichnisses
  
•     Verwenden des Inhaltsverzeichnisses
  
• Technische Hinweise für technisch versierte Personen
  
• Screenshots
  

Ich habe ein Bookmarklet erstellt, um ein einklappbares Inhaltsverzeichnis (ToC) wie das oben gezeigte zu generieren.

Ich hoffe, es hilft eifrigen Community-Mitgliedern, die lange Texte schreiben!

Zusammenfassung

Ich schreibe manchmal lange Themen/Beiträge und benötigte ein Inhaltsverzeichnis für einfacheres Lesen.
Ich habe einige bestehende Arbeiten gefunden, wie z. B. DiscoTOC - automatic table of contents, aber ich benötigte ein Werkzeug nur für mich, ohne etwas in der gesamten Community installieren zu müssen.

Nachdem Sie einen strukturierten Beitrag veröffentlicht haben, klicken Sie auf das Bookmarklet, und das Inhaltsverzeichnis wird in Ihre Zwischenablage kopiert. Bearbeiten Sie den Beitrag und fügen Sie das Inhaltsverzeichnis oben ein!

Anwendung

Installation

1. Speichern Sie eine Seite als Lesezeichen.
2. Bearbeiten Sie den Namen, z. B. “ Forum-Inhaltsverzeichnis in die Zwischenablage kopieren.”
3. Bearbeiten Sie die URL und fügen Sie den folgenden Code ein. Passen Sie den Code bei Bedarf an – siehe zwei “Optionale” Punkte unten.

javascript:(function() {
	const copyForumTocToClipboard = function() {
		const urlMatch = window.location.href.match(/\/t\/[^\/]*\/\d+\/?(\d*)/);
		if (!urlMatch) return;

		const postIndex = urlMatch ? urlMatch[1] : 1;
		const anchors = document.querySelectorAll('#post_' + postIndex + ' div.cooked h6 a.anchor,h5 a.anchor,h4 a.anchor,h3 a.anchor,h2 a.anchor,h1 a.anchor');
		if (!anchors) return;

		let toc = '';
		anchors.forEach(anchor => {
			toc +=
				' '.repeat((anchor.parentNode.nodeName[1] - 1) * 4) +
				`<a href="${anchor.href}">${anchor.parentNode.textContent}</a><br>\n`;
		});
		if (!toc) return;

		navigator.clipboard.writeText('<details open><summary>Table of contents: </summary><ul>\n' + toc + '</ul></details>');
	};

	copyForumTocToClipboard();
})();

Was der Code tut

1. Prüft, ob die URL einem Community-Beitrag zu entsprechen scheint: https://{domain}/t/{title}/{topicID}(/{postIndex}).
2. Prüft, ob Anker (Überschriften wie <h1> und # ) im Beitrag enthalten sind.
3. Generiert HTML-Code für das Inhaltsverzeichnis.
4. Kopiert den Code in die Zwischenablage.

Generieren des Inhaltsverzeichnisses

1. Veröffentlichen Sie einen Beitrag mit Struktur (HTML <h1>, <h2>, … und Markdown # , ## , …). Discourse weist jeder Überschrift Anker zu.
2. Stellen Sie sicher, dass Ihr Beitrag ausgewählt ist, indem Sie den Fortschrittsbalken (z. B. 1/22) oder die URL (z. B. /1) überprüfen.
3. Klicken Sie auf das Bookmarklet in der Lesezeichenleiste.
4. Das Inhaltsverzeichnis wird in Ihre Zwischenablage kopiert.

Verwenden des Inhaltsverzeichnisses

1. Klicken Sie auf das Stiftsymbol, um den Beitrag zu bearbeiten.
2. Fügen Sie den Code oben ein.
3. Überprüfen Sie, ob die Elemente des Inhaltsverzeichnisses korrekt angezeigt werden (Bekanntes Problem: Das Bookmarklet übersieht einige Emojis).
4. (Optional) Ändern/übersetzen Sie “Table of contents”.
5. (Optional) Löschen Sie open, wenn Sie das Inhaltsverzeichnis standardmäßig einklappen möchten.
6. Klicken Sie auf “Bearbeitung speichern”. Wenn Sie dies einige Minuten nach der Veröffentlichung des Beitrags tun, wird das “bearbeitete” Stiftsymbol nicht zu Ihrem Beitrag hinzugefügt.

Technische Hinweise für technisch versierte Personen

• Sie können den JavaScript-Code auch in die Entwicklerkonsole kopieren und einfügen.
  • Ich habe den Code in eine Funktion verpackt, da return; außerhalb von Funktionen nicht funktioniert.
• Der Ansatz mit '\u0026nbsp;'.repeat() sieht in der Vorschau des Themas unordentlich aus, sieht aber meiner Meinung nach im tatsächlichen Beitrag am besten aus (im Vergleich zur Verwendung von <li></li>).
• Als ich querySelectorAll testete, wurde irgendwie das erste Element in h6 a.anchor,h5 a.anchor, ... nicht gefunden. Ich habe h6 am Anfang platziert, da dies wahrscheinlich am seltensten verwendet wird.
• Das Bookmarklet funktioniert möglicherweise nicht mehr, wenn Discourse seine Benutzeroberfläche/DOM ändert. Bitte antworten Sie mir, wenn Sie Fehler finden.

Screenshots

Als neuer Benutzer von meta.discourse.org kann ich keine mehreren Bilder hinzufügen, daher fasse ich alle Screenshots in einem Bild zusammen:

[anderer]

Oh, schön – könnte das erweitert werden, um ein Inhaltsverzeichnis für den gesamten Beitrag mit allen Antworten zu erstellen?

[Lhc_fl (Linca)]

Beiträge werden normalerweise etwa 20 gleichzeitig geladen, ich schätze, es wäre schwierig, ein Inhaltsverzeichnis aller Beiträge auf einmal zu erstellen

[mcwumbly (Dave McClure)]

Sehr cool! Danke fürs Teilen, @ShunS!

Ich finde es toll, wie Sie das Problem, das Sie mit diesem Tool lösen, dargestellt haben und wie es darauf ausgelegt ist, die Bedürfnisse wichtiger Nutzer auf Websites zu erfüllen, die selbst möglicherweise keine Berechtigungen haben, Dinge auf der Website zu ändern, wie sie heute existieren.

[ShunS (Shun Sakurai)]

Vielen Dank für die Antworten

Wie @Lhc_fl sagt, ist der DOM-Ansatz (HTML/JavaScript) in der Anzahl der Elemente, die wir verwalten können, begrenzt. Die Discourse API könnte bei solchen Aktionen helfen.
Ein weiteres Problem bei der Erstellung von Inhaltsverzeichnissen für Antworten ist, dass es nicht einfach ist zu definieren, was der Titel für jede Antwort sein soll. Wir könnten Informationen wie den Autor und das Datum verwenden, aber ich bin mir nicht sicher, ob das nützlicher ist als die vorhandene Fortschrittsleiste.

Danke @mcwumbly!

[Lilly (Lillian Louis)]

@ShunS das ist sehr cool, danke fürs Teilen. Willkommen bei Meta

[RBoy]

Das ist fabelhaft und genau das, wonach ich gesucht habe. Es scheint dieses Problem zu lösen

Automatic TOC inline/top of post

here is an alternative solution that’s very cool and outside the box

Warum reichen Sie dies nicht bei Discourse ein, um es als offizielles Plugin oder Feature aufzunehmen? Es könnte in die Werkzeugleiste des Komponisten/Editors aufgenommen werden, um automatisch ein Inhaltsverzeichnis in den Beitrag einzufügen.

[RBoy]

Ich habe einen Vorschlag: Ist es möglich, am Anfang jeder Zeile im Inhaltsverzeichnis einen Punkt hinzuzufügen? In meinem Fall ist jede Überschrift eine lange Zeile, daher hilft der Punkt, einen Eintrag vom nächsten zu unterscheiden.

[ShunS (Shun Sakurai)]

Hallo @RBoy, danke für das Feedback und den Vorschlag!

Ein Editor-Plugin wäre großartig, aber es wäre viel Aufwand, den Quellcode von Discourse zu lesen, um die Logik der Emoji-Verarbeitung und der Definition des Überschriften-/Ankertextes zu verstehen und ein Repository für das Plugin zu erstellen.

Ein (scheinbar) einfaches Plugin wie Spoiler Alert ist ein großes Repository und ich habe nicht die Bandbreite, um mich voll und ganz der Entwicklung zu widmen. Daher hoffe ich, dass Discourse Feature-Anfragen wie Automatic Table of Contents generation priorisiert und in der Zwischenzeit eine native Funktion entwickelt

---

Unten ist die Version mit den Aufzählungspunkten. Die Abstände zwischen <ul> und </ul> sind eher zu groß, daher habe ich die ursprüngliche, nicht mit Aufzählungspunkten versehene Version bevorzugt.

Screenshot:

Code:

javascript:(function() {
	const copyForumTocToClipboard = function() {
		const urlMatch = window.location.href.match(/\/t\/[^/]*\/\d+\/?(\d*)/);
		if (!urlMatch) return;

		const postIndex = 1;
		const anchors = document.querySelectorAll('#post_' + postIndex + ' div.cooked h6 a.anchor,h5 a.anchor,h4 a.anchor,h3 a.anchor,h2 a.anchor,h1 a.anchor');

		let toc = '';
		let currentLevel = 1;
		anchors.forEach(anchor => {
			newLevel = anchor.parentNode.nodeName[1];
			levelChange = newLevel - currentLevel;
			toc +=
				((levelChange >= 0) ? '<ul>'.repeat(levelChange) : '</ul>'.repeat(levelChange * -1)) +
				`<li><a href="${anchor.href}">${anchor.parentNode.textContent}</a></li>`;
			currentLevel = newLevel;
		});
		if (newLevel > 1) toc += '</ul>'.repeat(newLevel - 1);
		toc = '<details open><summary>Table of contents: </summary><ul>\n' + toc + '</ul></details>';

		navigator.clipboard.writeText(toc);
	};

	copyForumTocToClipboard();
})();

[supermathie (Michael Brown)]

@RBoy

ein offizielles Plugin oder eine Funktion

Wir haben bereits ein ToC-Plugin und es muss nicht die ToC im Beitragstext beibehalten werden.

Ich würde dieses auf jeden Fall empfehlen, wenn es installiert ist, da es nicht aus dem Takt geraten kann.

Dieses Tool sieht jedoch großartig aus, wenn DiscoToC nicht verfügbar ist. Gute Arbeit!

[Lhc_fl (Linca)]

Dies kann mit einer Theme-Komponente erfolgen. Sie können sich die Methode decorateCookedElement der api ansehen, sie sollte nützlich sein.

[ShunS (Shun Sakurai)]

Hallo @supermathie, danke für die Antwort.

wenn DiscoToC nicht verfügbar ist
Ja, das ist die Unterscheidung. Ich habe das Bookmarklet erstellt, weil ich nicht entscheiden kann, welche „Theme-Komponente“ im Forum, in dem ich normalerweise bin, installiert werden soll, und nur wenige Leute lange Texte schreiben, die ein Inhaltsverzeichnis benötigen.

---

Danke @Lhc_fl, das ist sehr hilfreich!

Ich habe das GitHub-Repository durchsucht und diese Methode gefunden. Ich werde die Entwicklung davon in Betracht ziehen (nur), wenn ich viel Zeit habe und eine hohe Nachfrage nach der Funktion sehe.

Wenn jedoch eine Theme-Komponente zur Community hinzugefügt werden kann, gibt es bereits DiscoTOC, wie @supermathie sagte

[RBoy]

Leider ist dieses Plug-in völlig unbrauchbar, wenn die Überschrift mehr als ein paar Wörter lang ist, da es die Dinge komplett durcheinanderbringt. Wenn die Überschriften ein oder zwei Zeilen lang sind (z. B. auf einer FAQ-Seite), dann bringt das Disco TOC-Plug-in die Seite komplett durcheinander, weshalb ich diese Anfrage für ein Inline-TOC (das dieses hier bietet) gestellt habe, das für solche Seiten perfekt ist.

Automatic TOC inline/top of post

Is it possible to have the TOC within the post itself at the very top (kind of like what Word does with generating an automatic TOC). The issue is that it’s making the side look very cluttered because the heading are actually long sentences in our case and that’s making the whole page unreadable. Having it embedded within the topic itself at the very top would solve this issue and still allow us easy updates to the Wiki while having the plugin automatically update the TOC and not clutter the si…

Bei dem Genie/Talent unter den Teams, die Discourse entwickeln, sollte es nicht so schwer sein, diese erstaunliche Funktion als Alternative zu DiscoTOC einzubauen, um ihr ein viel breiteres Anwendungsspektrum zu geben.