Fortschrittsbalken

[Canapin (Coin-coin le Canapin)]

	Zusammenfassung	Eine Fortschrittsanzeige zu Ihrer Seite hinzufügen
	Vorschau	\[todo\]
	Repository	\u003chttps://github.com/Canapin/Discourse-progress-bar\u003e
	Installationsanleitung	Ein Theme oder Theme-Komponente installieren
	Neu bei Discourse Themes?	Ein Leitfaden für Anfänger zur Verwendung von Discourse Themes

Diese Theme-Komponente installieren

Discourse Fortschrittsanzeige

Beschreibung

Diese Komponente fügt eine Fortschrittsanzeige an jedem verfügbaren Platzhalter Ihrer Website hinzu.

Am besten wird sie mit Skripten verwendet, die den Wert der Fortschrittsanzeige automatisch aktualisieren, indem sie eine PUT-Anfrage an /admin/theme/[theme_component_ID]/setting mit der Nutzlast {\"name\":\"current_value\",\"value\":\"[yourNewValue]\"} senden.

Die Fortschrittsanzeige ist optimiert, um in die folgenden Platzhalter zu passen:

• above-main-container
• above-site-header
• before-header-panel
• below-site-header
• before-sidebar-sections

Anwendungsfall

Diese Komponente wurde entwickelt, um den Spendenfortschritt auf einem gemeinschaftsfinanzierten Forum öffentlich anzuzeigen.

Ein benutzerdefiniertes Skript verwendete die Webhooks von Ko-fi, um die Fortschrittsanzeige für jede Spende dynamisch zu aktualisieren.

Eine Fortschrittsanzeige zu haben, wurde zu einem riesigen Anreiz für die Community, zu spenden.
Zuvor wurde nur ein angeheftetes Thema verwendet, und das Spendenziel wurde über mehrere Monate erreicht.
Mit der Fortschrittsanzeige wurde das Spendenziel in den letzten Jahren in ein paar Tagen erreicht!

Diese Fortschrittsanzeige kann natürlich auch für andere Zwecke verwendet werden. Teilen Sie mit, wofür Sie sie verwenden!

Screenshots

Desktop

above-main-container

before-sidebar-sections

above-site-header

before-header-panel (nur Desktop)

below-site-header

Mobil

above-main-container und below-site-header

before-sidebar-sections

above-site-header

Einstellungen

Einstellung	Beschreibung
content_before	Text, der über der Fortschrittsanzeige angezeigt wird (HTML erlaubt). Standard: \u003cstrong\u003eSpendenfortschritt\u003c/strong\u003e
content_after	Text, der unter der Fortschrittsanzeige angezeigt wird (HTML erlaubt). Standard: leer
progress_bar_width	Breite des Fortschrittsanzeigen-Wrappers. Standard: 50%
progress_bar_height	Höhe der Fortschrittsanzeige. Standard: 10px
max_value	Maximalwert für die Fortschrittsanzeige. Standard: 300
current_value	Aktueller Wert der Fortschrittsanzeige. Standard: 150
value_display	Anzeigeformat des Wertes neben der Fortschrittsanzeige. Verfügbare Platzhalter: {current}, {max}, {percentage}. Beispiele:\u003cbr\u003e{percentage}% zeigt 33%.\u003cbr\u003e{current} von {max} Gummibärchen zeigt 9 von 15 Gummibärchen. Standard: {percentage}%
hide_when_full	Blendet die Fortschrittsanzeige aus, wenn sie voll ist. Standard: false
outlet_name	Speicherort auf der Website, an dem die Fortschrittsanzeige angezeigt wird. Empfohlene Platzhalter: above-main-container, above-site-header, before-header-panel, below-site-header, before-sidebar-sections. Standard: above-main-container
display_on_mobile	Zeigt die Fortschrittsanzeige auf mobilen Geräten an. Standard: true
display_on_homepage	Zeigt die Fortschrittsanzeige auf der Startseite an. Standard: true
url_must_contain	URLs, auf denen die Fortschrittsanzeige angezeigt wird. Standard: `/latest
progress_bar_color	Gültiger CSS-Hintergrundwert. Beispiele:\u003cbr\u003e#FC0FC0\u003cbr\u003ergb(252,15,192)\u003cbr\u003evar(--tertiary)\u003cbr\u003elinear-gradient(0deg, white 0%, var(--tertiary) 100%)\u003cbr\u003eHinweis: Wenn leer, wird eine dynamische Farbe von Rot (0%) bis Grün (100%) verwendet. Standard: var(--tertiary)

Dank

Danke an @Arkshine für allgemeine Code-Hilfe und Ratschläge