Discourse Qingwa Timelines – Benutzerdefiniertes BBCode für schöne Timeline-Layouts

[scavin]

	Zusammenfassung	Eine Discourse-Themenkomponente zur Erstellung schöner Zeitleistenlayouts
	Vorschau	https://meta.appinn.net/t/topic/76953
	Repository	GitHub - scavin/discourse-qingwa-timelines
	Installationsanleitung	So installieren Sie ein Thema oder eine Themenkomponente
	Neu bei Discourse Themes?	Anfängerleitfaden zur Verwendung von Discourse Themes

Installieren Sie diese Themenkomponente

Ich freue mich, eine neue Themenkomponente vorstellen zu können, die elegante Zeitleistenlayouts zu Ihrer Discourse-Community hinzufügt!

Dies ist meine erste Themenkomponente, die mit Hilfe von LLM erstellt wurde.

Was ist das?

Discourse Timelines ist eine Themenkomponente, die benutzerdefiniertes BBCode [timelines]...[/timelines] zur Erstellung schöner, minimalistischer Zeitleistenlayouts implementiert. Perfekt für Projekt-Roadmaps, Schritt-für-Schritt-Anleitungen, Firmengeschichten, Kapitelunterteilungen und mehr.

Veröffentlichte Zeitleisten-Effekt

Composer-Symbolleistenschaltfläche

Markdown-Editor-Ansicht

Hauptmerkmale

Benutzerdefinierter BBCode - Einfache [timelines]-Syntax
Symbolleistenschaltfläche im Composer - Keine manuelle Eingabe von Tags erforderlich (löst das Problem der automatischen Maskierung von Klammern im neuen Editor!)
Schönes Design - Vertikale Farbverlauflinie mit sauberer, minimalistischer Ästhetik
Markdown-Unterstützung - Behält die gesamte Formatierung innerhalb von Zeitleisten bei
Mehrsprachig - Integrierte Übersetzungen für 9 Sprachen (EN, ZH_CN, ZH_TW, DE, ES, FR, JA, KO, RU)
Themenkompatibel - Funktioniert sowohl im hellen als auch im dunklen Modus
Anpassbar - Farben können einfach über die Admin-Einstellungen geändert werden
Responsiv - Mobilfreundliches Layout
Sicher - XSS-Schutz integriert
Keine Abhängigkeiten - Verwendet nur native Discourse-APIs

Verwendung

Verwendung der Symbolleistenschaltfläche (am einfachsten!)

1. Öffnen Sie den Composer
2. Klicken Sie auf die Schaltfläche “+” (Optionen) in der Menüleiste
3. Wählen Sie “Timeline einfügen”
4. Bearbeiten Sie Ihren Inhalt
5. Veröffentlichen!

Die Symbolleistenschaltfläche löst das Problem, dass der neue Discourse-Editor manuell eingegebene eckige Klammern automatisch maskiert.

Beispiel-Syntax

[timelines]
## Januar 2024 - Projektstart
Das Projekt wurde offiziell gestartet und das Team gebildet.
​
## März 2024 - Erste Veröffentlichung
Die Entwicklung der Kernfunktionalität wurde abgeschlossen und die Beta-Tests begonnen.
​
## Juni 2024 - Version 2.0
Großes Update mit neuen Funktionen:
- Funktion A
- Funktion B
- Funktion C
[/timelines]

Anpassung

Alle Farben können über die Theme-Einstellungen angepasst werden:

• timeline_gradient_start - Obere Farbverlaufsfarbe (Standard: #ff7a18)
• timeline_gradient_end - Untere Farbverlaufsfarbe (Standard: #ffb800)
• timeline_heading_color - Farbe des Überschriften-Textes (Standard: #d96d14)
• timeline_dot_color - Farbe des Zeitleistenpunkts (Standard: #ff7a18)
• timeline_heading_color_dark - Farbe der Überschrift im Dunkelmodus (Standard: #ff9854)
• timeline_dot_border_color_dark - Randfarbe des Punkts im Dunkelmodus (optional)

Ich hoffe, Sie finden diese Komponente nützlich! Bitte lassen Sie mich wissen, wenn Sie Fragen, Feedback oder Vorschläge haben.

[Heliosurge (Dan DeMontmorency)]

Dies ist eine sehr schöne Komponente! Sehr nützlich.

[Heliosurge (Dan DeMontmorency)]

Unterstützt dies auch Bilder/Videos?

[scavin]

Ja, es unterstützt sowohl Bilder als auch Videos.

Hier ist eine kurze Demo[DEMO LINK]

[Heliosurge (Dan DeMontmorency)]

Wirklich sehr süß. Tolle Arbeit!

[jordanjay29]

Funktioniert dies mit dem DiscoTOC?

Es scheint sich auf die größeren Überschriften zu verlassen, was es in Bezug auf die TOC-Hierarchie etwas unflexibler macht.

[scavin]

Ich habe es mit DiscoTOC getestet und keine Probleme gefunden.

Ich habe ein Inhaltsverzeichnis auf der Demo-Seite hinzugefügt – öffnen Sie es gerne und sehen Sie, wie es funktioniert.

[jordanjay29]

Danke für diesen Verweis.

Wenn ich es in einem Beitrag mit dem AutoTOC verwende, sticht es hervor, da es sich auf die Überschriften-Markdown von Ebene 2 und 3 stützt. Gibt es eine Möglichkeit, es stattdessen/zusätzlich auf Überschriften der Ebene 4 oder 5 umzustellen, um mehr Flexibilität zu haben?

Wenn die Zeitleiste weiter unten in der TOC-Hierarchie erscheint, wie z. B. nach einer Überschrift der Ebene 2 oder 3, sieht das TOC visuell ungeordnet aus.

EDIT: Ich kann dies in [details]-Tags einschließen, und dadurch werden die Timeline-Überschriften nicht mehr im TOC angezeigt. Für meine Zwecke ein vernünftiger Workaround, fwiw.

[scavin]

Vielen Dank für den Vorschlag! Ich werde prüfen, wie ich das verbessern kann.

[scavin]

Sie können Ihre Zeitleistenüberschriften jetzt ohne Umwege aus dem Inhaltsverzeichnis (TOC) ausschließen:

Verwenden Sie Pseudo-Überschriften innerhalb von [timelines], indem Sie ein ##! (für H2-Formatierung) oder ###! (für H3-Formatierung) voranstellen.

Beispiel:

[timelines]

##! 2020 – Gründung
Inhalt…
[/timelines]

Diese werden innerhalb der Zeitleiste wie H2/H3 gerendert, aber nicht als echte Überschriften behandelt, sodass das autoTOC ordentlich bleibt, unabhängig davon, wo sich die Zeitleiste befindet.

Wenn die Überschriften einer Zeitleiste im Inhaltsverzeichnis erscheinen sollen, verwenden Sie weiterhin normale ##/###.

Im Moment überspringt das Inhaltsverzeichnis die gesamte Zeitleiste, wenn sich auch nur ein einziges ##! (oder ###!) innerhalb von [timelines] befindet.

Das Mischen beider Stile in derselben Zeitleiste wird noch nicht unterstützt.

Sie können sie jetzt mischen: ##/### werden weiterhin im Inhaltsverzeichnis angezeigt, während ##!/###! nur innerhalb der Zeitleiste gerendert werden und aus dem Inhaltsverzeichnis ausgeschlossen bleiben.

Bitte aktualisieren Sie die Komponente und probieren Sie es aus.

[jordanjay29]

Das ist eine clevere Umgehungsidee!

Das schien für

[timelines]
##! 2020 - Foudnation
Content...
###! March
Content
[/timelines]

einwandfrei zu funktionieren.

Aber nicht für zwei Pseudo-Überschriften, denen eine formatierte Liste folgt:

[timelines]
##! 2020 - Foundation
* Listicle
###! March
Dooooooom!
[/timelines]

Die erste Pseudo-Überschrift möchte auch inline mit dem öffnenden [timelines]-Tag stehen, um eine leere Zeile darüber zu vermeiden. Wie zum Beispiel:

[timelines]##! 2020 - Foundation
Content...
[/timelines]

Andernfalls entsteht eine Lücke über der ersten Pseudo-Überschrift, als wäre es eine reguläre, nicht-Überschriften-Timeline-Blockzeile.

Vielen Dank für Ihre Arbeit daran, es wird jetzt unglaublich flexibel in der Anwendung.

[scavin]

Danke für den Hinweis.

Ich sehe dasselbe. Im Moment werden diese korrekt dargestellt:

  [timelines]##! 2020 - Foundation
  Content...
  [/timelines]

und

  [timelines]

  ##! 2020 - Foundation
  Content...
  [/timelines]

Aber das funktioniert nicht:

  [timelines]
  ##! 2020 - Foundation
  Content...
  [/timelines]

Ich schaue es mir an, habe aber noch keine endgültige Lösung gefunden.

[jordanjay29]

Der Code scheint auch überall dort aktiviert zu werden, wo [timelines] im Beitrag vorhanden ist, selbst wenn er in Code-Backticks wie oben eingeschlossen ist. Auch das Escapen mit einem Backslash \\[timelines] scheint keinen Unterschied zu machen.

ETA: Die Tags [timelines] und [/timelines] scheinen Zeilenumbrüche zu ignorieren und erscheinen in Codeblöcken mit drei Backticks ``` in derselben Zeile wie der nächstgelegene Text.

Also

[timelines]
Blah
Blah
[/timelines]

Erscheint als

[timelines]Blah
Blah[/timelines]

Bin darauf gestoßen, als ich eine Anleitung zur Verwendung geschrieben habe, es handelt sich also wahrscheinlich nur um einen Randfall.