||||
-|-|
| Zusammenfassung | DiscoTOC ermöglicht es dir, mit einem Klick eine interaktive Inhaltsverzeichnis für deine Themen zu erstellen!
| 
| Vorschau | Vorschau auf Discourse Theme Creator |
| Repository-Link | https://github.com/discourse/DiscoTOC
| Neu bei Discourse-Themes? | Einsteigeranleitung zur Nutzung von Discourse-Themes
Dieses Theme-Component installieren
Beispiele
Desktop
Mobil
Funktionen
toc = Inhaltsverzeichnis
-
Generiert automatisch das gesamte toc über eine Schaltfläche im Menü der Einstellungen im Editor
-
Das toc bleibt immer im Bild - es scrollt mit dem Inhalt, ähnlich wie das Fortschritts-Widget des Themas
-
Wenn du an Abschnitten im Thema vorbeiscrollst, wird das aktive Element im Inhaltsverzeichnis als aktiv markiert (blaue Hervorhebung)
-
Fügt Überschriften id-Attribute hinzu (du kannst von einem anderen Thema/Beitrag aus auf einen bestimmten Abschnitt verlinken)
-
Ein Klick auf einen beliebigen Link im toc weist den Browser an, zum entsprechenden Abschnitt zu navigieren (sanftes Scrollen)
-
Fügt neben jeder Überschrift einen kopierbaren Link hinzu (falls du darauf verlinken möchtest)
-
Unterstützung für RTL (Rechts-nach-Links)
-
Die Farben basieren auf deiner aktuell aktiven Farbpalette
Wie funktioniert es?
Kurz gesagt sucht es nach Überschriften in Themen, die so markiert sind, dass sie ein toc haben (über die Editor-Schaltfläche), und wenn sich herausstellt, dass das aktuelle Thema markiert ist, nimmt es alle Überschriften und fügt sie in das toc ein (verschachtelt in der Reihenfolge der Überschriftenebenen) - das bedeutet, dass dein Markdown syntaktisch korrekt sein muss.
# Überschrift 1
## Überschrift 2
### Überschrift 3
#### Überschrift 4
##### Überschrift 5
###### Überschrift 6
Du kannst frei zwischen den Überschriftenebenen hin- und herwechseln, aber die Reihenfolge muss korrekt sein.
# Überschrift 2
## Überschrift 3
## Überschrift 3
### Überschrift 4
## Überschrift 3
# Überschrift 2
usw...
Damit die Links im toc funktionieren, müssen Überschriften id-Attribute haben. Das Component überprüft, ob die Überschriften bereits IDs haben, und wenn ja, werden diese respektiert. Dies ist praktisch, wenn du jemals manuell ein toc erstellt hast.
Wenn die Überschriften keine IDs haben, generiert es eine ID für jede Überschrift basierend auf ihrem Text (unerwünschte Zeichen werden entfernt).
Sobald all das erledigt ist, fügt es auch einen Link neben jeder Schaltfläche hinzu, der direkt zu diesem Abschnitt führt:
Einstellungen
| Name | Beschreibung
|-|
| Mindestes Vertrauenslevel zum Erstellen eines TOC | Das Mindestvertrauenslevel, das ein Benutzer haben muss, um die TOC-Schaltfläche im Editor zu sehen
| TOC-Text im Editor | Text, der oben im Vorschaubereich des Editors erscheint, um anzuzeigen, dass das Thema ein Inhaltsverzeichnis haben wird
| Automatische TOC-Kategorien | TOC automatisch für Themen in diesen Kategorien aktivieren
| Automatische TOC-Tags | TOC automatisch für Themen mit diesen Tags aktivieren
| TOC Mindestüberschriften | Mindestanzahl von Überschriften in einem Thema, damit das Inhaltsverzeichnis angezeigt wird
Übersetzungen
| Übersetzung | Standardwert
|-|
| table_of_contents | Inhaltsverzeichnis
| insert_table_of_contents | Inhaltsverzeichnis einfügen
| jump_bottom | Zum Ende springen
| toggle_toc.show_timeline | Zeitstrahl
| toggle_toc.show_toc | Inhalt
Das Theme enthält drei Zeichenfolgen, die du übersetzen oder ändern kannst.
table_of_contents: "Inhaltsverzeichnis"
Dies wird für die Schaltfläche verwendet, die das toc auf Mobilgeräten öffnet.
insert_table_of_contents: "Inhaltsverzeichnis einfügen"
Dies wird als Text für die TOC-Schaltfläche im Menü der Einstellungen im Editor verwendet.
topic_will_contain_a_table_of_contents: "Dieses Thema wird ein Inhaltsverzeichnis enthalten"
Dies ist der Text, der in der Editor-Vorschau angezeigt wird, um anzudeuten, dass ein toc für das Thema generiert wird.
Wie erstelle ich ein toc?
- Schreibe ein Thema mit syntaktisch korrekten Überschriften
- Klicke auf die TOC-Schaltfläche im Menü der Einstellungen (erscheint nur beim Erstellen eines normalen Themas - Antworten und PMs werden ignoriert)
- Profit.
Was passiert mit dem Fortschritts-Widget des Themas, wenn ein Thema ein toc hat?
Wie du wahrscheinlich ahnen kannst, gibt es keinen Platz, um beide gleichzeitig anzuzeigen, daher funktioniert dieses Component wie folgt:
In einem Thema mit einem toc wird das Fortschritts-Widget des Themas ausgeblendet, solange der erste Beitrag im Bild ist, und du siehst stattdessen das toc.
Sobald du am ersten Beitrag vorbeiscrollst, scrollt das toc nicht mit dir, und das Fortschritts-Widget des Themas wird angezeigt, während du Antworten liest.
Also: Erstbeiträge erhalten das toc, und nachfolgende Beiträge erhalten das reguläre Fortschritts-Widget des Themas.
Das passiert sowohl auf dem Desktop als auch auf Mobilgeräten.
Gibt es Nachteile bei der Verwendung dieses Components?
Mir ist keiner bekannt. Alle Änderungen werden clientseitig durchgeführt. Du kannst das Component also problemlos entfernen, und deine Beiträge sehen wieder so aus wie vor der Installation.
Einschränkungen
Dieses Component geht vom standardmäßigen Themenlayout aus. Daher funktioniert es nicht mit Themes, die dieses Layout ändern, wie z. B. dem Vincent-Theme. Die Unterstützung für beliebte Themes, die das Layout ändern, wird später in Form von Component-Einstellungen hinzugefügt.
Credits
Ich habe mit Greg Frankos tocify.js Bibliothek begonnen. Allerdings scheint sie seit einiger Zeit nicht mehr aktualisiert worden zu sein, daher ist dies im Wesentlichen ein Hard-Fork, der viele unnötige Funktionen entfernt und den Rest für Discourse integriert und gestaltet.
Es gibt also keine externen Anfragen, und die Gesamtgröße beträgt ~ 4 kb gzip.
Vielen Dank an @erlend_sh für viel wertvolles Feedback und an @david für seine Hilfe bei den Übersetzungen.
Von uns gehostet? Theme-Components sind auf unseren Pro-, Business- und Enterprise-Plänen verfügbar.
Danke!
