Benachrichtigungsbanner

:information_source: Zusammenfassung Die Notification Banners Theme-Komponente bietet eine anpassbare und flexible Möglichkeit, Nachrichten auf Ihrer Website zu teilen.
:eyeglasses: Vorschau Theme Creator
:hammer_and_wrench: Repository https://github.com/gormus/discourse-notification-banners
:question: Installationsanleitung So installieren Sie ein Theme oder eine Theme-Komponente
:open_book: Neu bei Discourse Themes? Anfängerleitfaden zur Verwendung von Discourse Themes

Installieren Sie diese Theme-Komponente

Die Notification Banners Theme-Komponente bietet eine anpassbare und flexible Möglichkeit, Nachrichten auf Ihrer Website zu teilen.

Hier sind einige Hauptmerkmale:

  • Vollständig anpassbar: Passen Sie jedes Banner an Ihre Bedürfnisse an, einschließlich Inhalt, Stil und Verhalten.
  • Flexible Anzeigeoptionen: Zeigen Sie Banner gestapelt oder als rotierendes Karussell für einfaches Durchsuchen an.
  • Gezielte Nachrichtenübermittlung: Zeigen Sie Banner nur bestimmten Benutzergruppen an, um eine personalisierte Kommunikation zu gewährleisten.
  • Theme-Unterstützung: Banner passen sich automatisch an helle oder dunkle Themes an, oder Sie können benutzerdefinierte Farben festlegen.
  • Markdown-Unterstützung: Verwenden Sie Markdown, um Ihre Banner-Nachrichten einfach zu formatieren.
  • Karussell angetrieben von Splide: Die Karussellfunktion wird von der Splide JavaScript-Bibliothek angetrieben, mit individuellen Einstellungen für jedes Banner.
  • Zeitplanung: Legen Sie bestimmte Start- und Enddaten fest, wann Banner erscheinen sollen.
  • Einfache Anzeigeordnung: Steuern Sie die Reihenfolge, in der Banner angezeigt werden, mit einfachen Einstellungen.

Diese Komponente erleichtert es, Ihr Publikum mit visuell ansprechenden, personalisierten und gut organisierten Benachrichtigungen zu fesseln.

Installation

  1. Befolgen Sie die offiziellen Anweisungen, um diese Theme-Komponente zu Ihrem Theme hinzuzufügen:
    https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#add-theme-components-to-a-theme-9

  2. Ändern Sie die Einstellung theme authorized extensions, um css- und js-Dateierweiterungen einzuschließen.

Funktionen

Jedes Benachrichtigungsbanner kann folgende Funktionen haben:

  • Titel, optional, wird als H2-Überschrift über der Nachricht angezeigt
  • Nachricht, 500 Zeichen lange einfache Benachrichtigungsnachricht. Markdown wird unterstützt.
  • Zielgruppe, wählen Sie die Benutzergruppen als Zielgruppe für die Benachrichtigung aus.
  • Kategorien; wählen Sie Kategorien aus, auf denen das Banner angezeigt werden soll. Leer lassen, um auf allen Kategorien anzuzeigen.
  • Hintergrundfarbe, kann so eingestellt werden, dass sich das Banner von anderen unterscheidet.
  • Plugin-Outlet, stellen Sie Benachrichtigungen über oder unter dem Website-Header ein oder verwenden Sie das Top-Notices-Outlet, um sie zusammen mit nativen Themenbannern anzuzeigen.
  • Im Karussell anzeigen, wenn ausgewählt, werden alle Banner in jedem Outlet in einem Karussell angezeigt. Erfordert mindestens 2 ausgewählte Banner für jedes Outlet.
  • Abweisbar, wenn ausgewählt, können Benutzer das Banner abweisen, und es wird für sie ausgeblendet.
  • Start- und Enddaten, wenn definiert, gehorcht die Sichtbarkeit des Banners diesen Daten. Sie können also ein Banner im Voraus einstellen, aber es wird erst am festgelegten Datum und zur festgelegten Uhrzeit für die ausgewählte Zielgruppe sichtbar; oder ähnlich können Sie das Banner automatisch entfernen, indem Sie das letzte Datum angeben, an dem es angezeigt werden soll.
  • Anzeigereihenfolge, definieren Sie, welches Banner oben und welches unten angezeigt werden soll. Ab v1.3.0 werden die nativen Neuordnung-Schaltflächen verwendet.

Das Karussell

Die Diashow- oder Karussellfunktionalität wird von der Splide Bibliothek bereitgestellt; sie steht unter der MIT-Lizenz.

Jedes Karussell kann auf der Theme-Komponenten-Seite mit den Splide-Optionen konfiguriert werden.

Bannerfarben

Standardmäßig verwenden die Banner die gleichen Farben wie das Banner-Thema:

.notification-banner {
    background: var(--tertiary-low);
    color: var(--primary);
}

Wenn jedoch eine Hintergrundfarbe in den Banner-Einstellungen definiert ist, wird je nach Helligkeit automatisch Schwarz oder Weiß als Vordergrundfarbe ausgewählt.

Verfügbare CSS-Klassen

.notification-banners--above-site-header,
.notification-banners--below-site-header,
.notification-banners--top-notices {

  .notification-banner {

    &__wrapper {
    }

    &__close {
    }

    &__header {
    }

    &__content {
    }
  }

  &.splide {
    .notification-banner {
    }
  }
}

.notification-banners--top-notices {
  .notification-banner {

    &__content {
    }
  }
}

v1.3.0 hat Breaking Changes (für einige)

Vergessen Sie nicht, die Änderungen zu testen und Ihre Anpassungen zu überprüfen, bevor Sie Ihre Produktionsseiten aktualisieren.

28 „Gefällt mir“

Wow! Das sieht fantastisch aus – und ist super flexibel.

Haben Sie darüber nachgedacht, es auf eine Kategorie / Kategorien zu beschränken?

9 „Gefällt mir“

Danke!

Eigentlich hatte ich überlegt, das einzubauen, was ich zuvor mit meiner Theme-Komponente Filtered Topic Lists gemacht habe; siehe den Abschnitt „Show on“.

Ich war besorgt, dass es komplizierter werden könnte, deshalb habe ich diese Option nicht aufgenommen. Stattdessen habe ich mich dafür entschieden, die Benutzergruppen als Zielgruppe für die Banner zu verwenden.

Aber ich würde es gerne einbauen, wenn Bedarf dafür besteht.

5 „Gefällt mir“

Sehr gut, @gormus, danke, dass du diese Komponente mit der Community teilst. :discourse: :clap:

3 „Gefällt mir“

Danke @Lilly, es ist mir eine Freude : )

3 „Gefällt mir“

Wenn ich auf die Schaltfläche X klicke, um dieses Banner-Popup zu schließen, gibt es dann eine Möglichkeit, es wieder anzuzeigen? Ich habe im Banner Hintergrund wiederholen: wiederholen; wiederholen-x; wiederholen-y ausgewählt, aber es funktioniert nicht?

2 „Gefällt mir“

Großartig! Ich werde es in der Praxis ausprobieren und sehen, ob es tatsächlich benötigt wird oder nicht, bevor ich Sie damit belästige.

4 „Gefällt mir“

Derzeit nicht. Ich habe keine Möglichkeit in Betracht gezogen, dass ein Benutzer eine abgelehnte Benachrichtigung wiederherstellen möchte.
Glauben Sie, dass es dafür eine Option geben sollte?

Könnten Sie bitte klarstellen, was Sie meinen?

2 „Gefällt mir“

Ich verstehe, was Sie meinen, danke!

3 „Gefällt mir“

Ich wäre auch an dieser Funktion interessiert (die für bestimmte Kategorien verfügbar ist). Vielen Dank für Ihre Berücksichtigung.

4 „Gefällt mir“

Kategorien werden jetzt als Zielgruppe unterstützt. Einzelne oder mehrere Kategorien können pro Banner ausgewählt werden.

Lassen Sie mich bitte wissen, was Sie denken : )

5 „Gefällt mir“

Derzeit läuft meine Discourse-Seite mit Version 3.4.0.beta3-dev und weist einen Fehler auf, der die Seite beim Installieren des Banners nicht anzeigt. Sie können dies erneut überprüfen und frühe Updates für die Community erhalten. Vielen Dank für Ihre Mitteilung.

2 „Gefällt mir“

Hallo @hoangphuctran93,

Danke für die Meldung des Problems. Ich konnte es bei einer sauberen Installation von Notification Banners auf Discourse 3.4.0.beta3-dev (d3f09f8f61) bestätigen.

Ich habe gerade eine Korrektur veröffentlicht. Bitte aktualisieren Sie die Instanz auf Ihrer Website und führen Sie bei Bedarf einen Hard Refresh der Seite durch.

2 „Gefällt mir“

Vielen Dank, sie haben gut funktioniert. Ich freue mich auf Ihre neuen Ideen und Updates. Ich habe folgende Vorschläge:

  1. Erweitern Sie das Eingabefeld
  2. Ermöglichen Sie die schnelle Auswahl von Bildern zusätzlich zur Gestaltung mit HTML.
  3. Fügen Sie ein Datenfeld hinzu, um das Banner zu benennen, anstatt es mit dem Titel zu verwenden. Dies hilft bei der Kategorisierung und Verwaltung, wenn mehrere Banner angewendet werden.

Dies ist das Ergebnis der Anwendung auf unsere Discourse-Seite.

1 „Gefällt mir“

Ich habe Probleme mit diesem Teil – der Link ist hier kaputt. Wie kann ich diese Erweiterungen auf meiner Website autorisieren?

Danke!

Sie müssen meta.discourse.org durch die URL Ihres Forums ersetzen. Sie können den Admin-Bereich hier nicht aufrufen.
https://meta.discourse.org/admin/site_settings/category/files?filter=theme%20authorized%20extensions

Oder Sie können zu Ihren Website-Einstellungen navigieren und nach theme authorized extensions suchen.

5 „Gefällt mir“

Ja, danke :slight_smile:

Eine weitere Frage: Wenn Sie von Terminplanung sprechen, gibt es eine Möglichkeit, dass das Banner jede Woche zur gleichen Zeit erscheint? Wir haben wöchentliche Sprechstunden, während derer ich dieses Banner anzeigen lassen möchte, damit jeder auf der Website sehen kann, dass die Sprechstunden gerade stattfinden und bei Bedarf teilnehmen kann.

1 „Gefällt mir“

Sie können ein Banner aktivieren, das zu einem bestimmten Datum und einer bestimmten Uhrzeit angezeigt und zu einem anderen entfernt wird.

Sie können also nur einen Zeitplan für Start- und Enddatum und -uhrzeit haben.

Was Sie anfordern, erfordert eine aufwändigere Planungsfunktion, die Notification Banners nicht bietet.

Sie können jedoch dennoch das erreichen, was Sie benötigen, indem Sie Kopien desselben Banners mit unterschiedlichen Start- und Enddaten erstellen.

Ich würde Ihnen dringend empfehlen, dieses Szenario zu testen, bevor Sie in die Produktion gehen.

Und denken Sie daran, unabhängig davon, in welcher Zeitzone Sie sich befinden, müssen die Datums- und Zeitwerte in UTC eingegeben werden und dem Format entsprechen, das in den Feld beschreibungen angezeigt wird.

4 „Gefällt mir“

Vielen Dank für Ihre Eingabe!

Ich hatte auf eine stärker automatisierte Lösung gehofft, da wir jede Woche 3 verschiedene Sprechstunden-Sitzungen haben, sodass es ziemlich viel manuelle Arbeit wäre, Duplikate für all diese Sitzungen zu erstellen.

Ich habe mir das Automations-Plugin als weitere Option angesehen, aber auch die Banner-Automatisierung erlaubt nur Aktionen zu einem bestimmten Zeitpunkt und keine wiederkehrenden Aktionen.

2 „Gefällt mir“