 |
Zusammenfassung | Community-Support - konfigurierbare Spenden |
 |
Vorschau | Theme Creator |
 |
Repository | GitHub - VaperinaDEV/community-support: Community Support - configurable donation · GitHub |
 |
Gefällt es dir? | ./support --coffee |
 |
Installationsanleitung | So installierst du ein Theme oder Theme-Component |
 |
Neu bei Discourse Themes? | Einsteigerleitfaden für die Verwendung von Discourse Themes |
Dieses Theme-Component installieren
Hallo 
Das Ziel war es, das Component flexibel genug zu gestalten, um sehr unterschiedlichen Community-Designs und Anwendungsfällen gerecht zu werden, während die Konfiguration vollständig innerhalb der Theme-Einstellungen erfolgt.
Funktionen
Spenden-/Support-Modal
Das Component kann optional automatisch ein Support-Modal anzeigen.
Das automatische Modal unterstützt:
- konfigurierbare Verzögerung beim Öffnen
- Sichtbarkeit basierend auf URL/Pfad
- Sichtbarkeit für Mitglieder/Anonyme
- minimales Vertrauensniveau
- ausgeschlossene Gruppen
- konfigurierbare Lebensdauer des Schließ-Cookies
- drei Modal-Größen:
normal,large,maximized
Das Modal kann auch manuell von überall aus geöffnet werden, indem verwendet wird:
#donate
Dies ist bewusst unabhängig von den automatischen Sichtbarkeitsregeln, sodass eine Community einen #donate-Link teilen oder ihn in die Seitenleiste aufnehmen kann, während sie weiterhin steuert, wo automatische Support-Aufforderungen angezeigt werden.
Spenden-/Support-Methoden
Mehrere Support-Methoden können über den Objekt-Einstigungseditor von Discourse konfiguriert werden.
Jede Methode kann Folgendes haben:
- Name
- Beschreibung
- Anbieter
- Inhaber
- Icon
- URL
- Button-Text
- kopierbarer Wert
- hervorgehobener Status
- Übersetzungen
Dies ist anbieterunabhängig, sodass das Component keinen bestimmten Zahlungsanbieter erfordert.
Zum Beispiel kann eine Methode einfach auf eine bestehende PayPal-, Revolut-, Wise- oder andere Zahlungs-/Support-Seite verweisen.
Lokalisierung pro Methode
Spendenmethoden unterstützen eigene Übersetzungen.
Der Sprachauswahlbereich enthält die verfügbaren Discourse-Lokale, und für jede Methode können folgende Elemente übersetzt werden:
- Name
- Beschreibung
- Button-Text
- Kopier-Label
- Inhaber
- Anbieter
Wenn ein exaktes Lokal nicht verfügbar ist, fällt das Component auf das Basislokal zurück und dann auf Englisch/eine andere verfügbare Übersetzung.
Supportziel & Fortschrittsbalken
Das Component enthält ein optionales Supportziel und einen Fortschrittsbalken.
Du kannst Folgendes konfigurieren:
- aktueller Betrag
- Zielbetrag
- Währung
- Support-Label
- Support-Zeitraum
- Fortschrittsanzeige
- wo der Support-Balken angezeigt wird
Unterstützte Zeiträume:
- einmalig
- monatlich
- jährlich
Der Fortschrittsbalken behandelt auch Support über dem Ziel.
Anstatt einfach bei 100 % zu stoppen, wird der tatsächliche Prozentsatz weiterhin angezeigt:
75% → normaler Fortschritt
100% → Ziel erreicht
125% → 25 % in den nächsten Zielzyklus
220% → 20 % in den dritten Zielzyklus
Der visuelle Fortschrittsbalken bleibt ein einzelner kompakter Balken.
Vor dem ersten Ziel:
background: tertiary-low
fill: tertiary
Bei genau 100 %, 200 %, 300 % usw.:
background: success
fill: success
Zwischen den Meilensteinen:
background: success-low
fill: success
Das bedeutet, dass eine Community weiterhin einen sinnvollen Fortschritt anzeigen kann, selbst wenn sie ihr ursprüngliches Ziel deutlich überschreitet.
Avatare der Unterstützer
Der Support-Balken kann optional Avatare der Unterstützer anzeigen.
Unterstützer werden derzeit manuell über die supporters-Objekteinstellung konfiguriert.
Jeder Unterstützer kann Folgendes haben:
- Benutzername
- Beitragsbetrag
- Währung
Der Benutzername wird mit dem Benutzerprofil abgeglichen, sodass die Profil-/Avatar-Informationen des Benutzers automatisch angezeigt werden können.
Die Anzahl der Avatare, die direkt im Support-Balken angezeigt werden, ist konfigurierbar.
Zum Beispiel:
◉ ◉ ◉ ◉ ◉ +8
Wenn es mehr Unterstützer gibt als die konfigurierte Anzahl sichtbarer Avatare, sind die verbleibenden Unterstützer über ein DMenu zugänglich.
Das Unterstützer-Menü kann Folgendes anzeigen:
- Avatar
- Benutzername
- Profil-Link
- Beitragsbetrag
- Währung
Beitragsbeträge können unabhängig voneinander aktiviert oder deaktiviert werden.
Unterstützer können auch aus einer oder mehreren Gruppen über die supporter_groups-Einstellung befüllt werden. Dies ergänzt die manuell konfigurierte Unterstützerliste, anstatt sie zu ersetzen.
Mehrere Designs
Das Component enthält drei unabhängige visuelle Designs:
- Klassisch: ausgewogene, community-orientierte Darstellung
- Minimal: reduzierte visuelle Elemente und kompakte Darstellung
- Modern: stärkere Hierarchie und auffälligere Karten
Das Design ist unabhängig von der ausgewählten Ansicht, sodass beide frei kombiniert werden können.
Mehrere Ansichten
Das Component unterstützt mehrere Darstellungsmodi:
- Vollständig: vollständige Support-Inhalte mit Hero, hervorgehobener Methode und Spendenmethoden
- Kompakt: reduzierte Darstellung für kleinere Platzierungen
- Minimal: methodenfokussierte Darstellung
- Fortschritt: nur Supportziel und Fortschritt
Dies ermöglicht es, dasselbe Component an sehr unterschiedlichen Orten zu verwenden, ohne Konfiguration oder Styling zu duplizieren.
Post-Einbettungen
Support-Inhalte können direkt in Posts eingebettet werden.
Aktiviere enable_post_embed und verwende dann:
[wrap=donate]
[/wrap]
Zusätzliche Ansichten sind direkt über den Wrapper verfügbar:
[wrap=donate-compact]
[/wrap]
[wrap=donate-minimal]
[/wrap]
[wrap=donate-progress]
[/wrap]
Der Wrapper steuert die Ansicht, während die globale design-Einstellung das visuelle Design steuert.
Dies ist nützlich, wenn die Support-Inhalte Teil des Kontexts eines bestimmten Posts sein sollen, anstatt als globales UI-Element zu erscheinen.
Unterstützung für Plugin-Outlets
Das Component kann das Support-Widget über Plugin-Outlets rendern.
Aktiviere outlet_enabled und gib die gewünschten Outlet-Namen in outlet_locations an, getrennt durch |.
Die Outlet-Ansicht und das Design können unabhängig konfiguriert werden:
outlet_viewoutlet_design
Dies macht es möglich, das Support-Component an Orten wie Themenlisten, Kopfbereichen, Fußbereichen und anderen unterstützten Outlets zu verwenden.
Kompatibilität mit Discourse Ads
Das Component kann auch mit dem Discourse Ads-Plugin verwendet werden.
Anstatt direkt vom Ads-Plugin abzuhängen, bietet Community Support einen stabilen HTML-Einbettungs-Marker:
<div data-donation-widget="support"></div>
Dies kann in eine HTML-Werbung kopiert und in das gewünschte Ads-Outlet platziert werden.
Das Component besitzt das Markup und das CSS, sodass es nicht nötig ist, das Spenden-Styling innerhalb der Werbung selbst zu duplizieren.
Die Ansicht und das Design können optional überschrieben werden:
<div
data-donation-widget="support"
data-view="compact"
data-design="minimal"
></div>
Das bedeutet, dass dasselbe Support-System über verschiedene Ads-Platzierungen hinweg wiederverwendet werden kann, während ein konsistentes Design beibehalten wird.
Generische HTML-Einbettungen
Der gleiche Einbettungsmechanismus kann auch in anderen HTML-fähigen Platzierungen verwendet werden:
<div data-donation-widget="support"></div>
Der HTML-Marker bleibt bewusst einfach, während das Theme-Component die eigentliche Darstellung übernimmt.
Dies macht es möglich, das Design oder die Component-Implementierung zu ändern, ohne jede einzelne Einbettung neu schreiben zu müssen.
Sichtbarkeitssteuerungen
Automatisch und global gerenderte Support-Inhalte können über mehrere Einstellungen gesteuert werden:
- Für Mitglieder anzeigen
- Für anonyme Benutzer anzeigen
- Minimales Vertrauensniveau
- Ausgeschlossene Gruppen
- Auf der Startseite anzeigen
- URL-/Pfadabgleich
Ausgeschlossene Gruppen werden auf automatisch gerenderte Support-Inhalte angewendet, wie z. B. das Modal, Plugin-Outlet-Widgets und generische Einbettungen.
Kontextuelle Inhalte bleiben verfügbar:
#donate[wrap=donate]
Dies macht es möglich, bestimmte Benutzer von werbenden/automatischen Support-UIs auszuschließen, ohne sie daran zu hindern, auf einen explizit geteilten Support-Link oder einen kontextuellen Support-Block zuzugreifen.
Schließen-/Cookie-Steuerung
Wenn das automatisch geöffnete Modal geschlossen wird, kann das Component diese Entscheidung speichern.
Die Cookie-Lebensdauer kann wie folgt konfiguriert werden:
- keine
- Minute
- Tag
- Woche
- Monat
- Jahr
Dies verhindert, dass das automatische Modal demselben Besucher gemäß der gewählten Lebensdauer wiederholt angezeigt wird.
Grundlegende Beispiele
Das Support-Modal öffnen
#donate
Support-Inhalte in einem Post einbetten
[wrap=donate]
[/wrap]
Kompakte Post-Version
[wrap=donate-compact]
[/wrap]
Generische HTML-Einbettung
<div data-donation-widget="support"></div>
Einbettung mit benutzerdefinierter Darstellung
<div
data-donation-widget="support"
data-view="compact"
data-design="minimal"
></div>