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

:information_source: Zusammenfassung Eine Discourse-Themenkomponente zur Erstellung schöner Zeitleistenlayouts
:eyeglasses: Vorschau https://meta.appinn.net/t/topic/76953
:hammer_and_wrench: Repository GitHub - scavin/discourse-qingwa-timelines
:question: Installationsanleitung So installieren Sie ein Thema oder eine Themenkomponente
:open_book: 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

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

20 „Gefällt mir“

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

3 „Gefällt mir“

Unterstützt dies auch Bilder/Videos?

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

Hier ist eine kurze Demo[DEMO LINK]

Screen-20251114144915@2x
Screen-20251114144924@2x

1 „Gefällt mir“

Wirklich sehr süß. Tolle Arbeit!