Vielseitiges Banner

[Discourse]

	Zusammenfassung	Versatile Banner fügt eine anpassbare Leiste zu Ihrer Website hinzu.
	Vorschau	Vorschau im Discourse Theme Creator
	Link zum Repository	https://github.com/discourse/discourse-versatile-banner
	Neu bei Discourse Themes?	Anfängerleitfaden zur Verwendung von Discourse Themes

Diese Theme-Komponente installieren

Da dies eine #offizielle Theme-Komponente ist, die vom Discourse-Team gepflegt wird, können #Support-, #Bug-, #UX- und #Feature-Anfragen in den jeweiligen Kategorien hier auf Meta gestellt und mit dem entsprechenden Theme-Komponenten-Tag versehen werden. Klicken Sie auf einen der untenstehenden Links, um einen neuen Beitrag zu starten.

 Support  Bug  UX  Feature

Funktionen

Diese Theme-Komponente ist eine Weiterentwicklung früherer Banner-Ansätze. Das Ziel ist es, durch die Verwendung von Theme-Einstellungen mehr Einfachheit und Flexibilität zu bieten.

Nachfolgend eine Übersicht der Funktionen:

• Anzeige nur für angemeldete Benutzer oder anonyme Benutzer beschränken
• Anzeige ausschließlich auf mobilen Geräten oder Desktop-Computern beschränken
• Anzeige auf bestimmten Seiten beschränken
• Optionen zum Schließen, Erweitern und dauerhaften Anzeigen
• Option für volle Browserbreite
• Farbverwaltung
• Anpassung von Überschrift und Spalten mit HTML (siehe unten für mehr Details)
• Option für persistenten Zustand (siehe unten für mehr Details)

Anpassung des Banner-Inhalts

Der Banner-Inhalt ist in die Hauptüberschrift und Spalten unterteilt. Sie können bis zu 5 Spalten im Banner haben, jedoch wird aufgrund von Breiteneinschränkungen eine Anzahl von 3 oder weniger empfohlen. HTML-Vorlagen werden bereitgestellt und können an Ihre individuellen Bedürfnisse angepasst werden. Sie können auch die Breite jeder Spalte steuern und jedes gewünschte Bild oder Font Awesome-Symbol oben in jede Spalte hinzufügen.

Verwendung der Option für persistenten Zustand

Die Option für persistenten Zustand verwendet bis zu zwei Cookies. Diese Cookies enthalten einen Namen für das Banner und einen Wahr/Falsch-Wert, der den Zustand des Banners widerspiegelt. Wenn Sie Bedenken bezüglich der Verwendung von Cookies auf Ihrer Website haben, ist es am besten, diese Einstellung zu vermeiden. Die Auswahl einer relativen Zeitoption für die Einstellung cookie_lifespan stellt sicher, dass das Banner für diesen Zeitraum nach dem Drücken der entsprechenden Taste geschlossen/erweitert/eingeklappt bleibt. Ohne diese Einstellung wird das Banner bei jedem vollständigen Seitenneuladen zurückgesetzt. Wenn Sie eine Änderung am Banner vornehmen und sicherstellen möchten, dass alle Benutzer diese Änderungen sehen, auch diejenigen, die das Banner zuvor geschlossen haben, ändern Sie unbedingt den „Cookie-Namen“. Dies setzt im Wesentlichen jeden persistenten Zustand zurück und ermöglicht dem Benutzer erneut, das Banner zu schließen.

Einstellungen

Name	Beschreibung
show for members	Banner für angemeldete Benutzer des Forums anzeigen
show for anon	Banner für anonyme Benutzer anzeigen
display on mobile	Banner auf mobilen Geräten anzeigen
display on desktop	Banner auf Desktop-Computern anzeigen
display on homepage	Banner auf der Startseite anzeigen
url must contain	Pfade eingeben, auf denen das Banner angezeigt werden soll. Fügen Sie * am Ende des Pfads als Platzhalter hinzu
dismissible	Erlauben, dass Benutzer das Banner schließen können
collapsible	Erlauben, dass Benutzer das Banner erweitern und einklappen können
default collapsed state	Standardzustand „eingeklappt“, wenn die Einstellung „collapsible“ aktiviert ist
cookie lifespan	Die Lebensdauer des Cookies, das verwendet wird, um zu speichern, ob das Banner geschlossen, erweitert oder eingeklappt wurde. Wenn auf „none“ gesetzt, werden KEINE Cookies mit dieser Komponente verwendet, und alle zuvor erstellten Cookies im Zusammenhang mit dem Banner werden beim nächsten vollständigen Seitenneuladen eines Benutzers gelöscht. Die Werte werden als einzelne Einheit gemessen, sodass die Einstellung „year“ ein Jahr, „week“ eine Woche usw. bedeutet.
cookie name	Wenn wichtige Änderungen am Banner vorgenommen werden, müssen Sie den Cookie-Namen ändern, um sicherzustellen, dass alle Benutzer die Änderungen sehen.
full width banner	Banner in voller Browserbreite anzeigen
swap default positioning	Wenn eine andere bannerbezogene Komponente aktiv ist, verwenden Sie dies, um ihre Position mit dem Versatile Banner zu tauschen
plugin outlet	below-site-header platziert es über der Seitenleiste, above-main-container platziert es über dem Inhalt neben der Seitenleiste
banner background image	Die Quell-URL für Ihr Hintergrundbild. Tipp: Sie können ein Bild in Ihr Haupt-Theme hochladen und die URL davon verwenden, aber stellen Sie sicher, dass Sie nicht den Abschnitt „Uploads“ dieser Komponente verwenden. Alle zu dieser Komponente hinzugefügten Uploads werden bei jeder Aktualisierung gelöscht.
banner background image dark	Die Quell-URL für Ihr Hintergrundbild, wenn der Dunkelmodus des Systems erkannt wird.
background color	Wird anstelle eines Hintergrundbildes verwendet
background color dark	Wird anstelle eines Hintergrundbildes verwendet, wenn der Dunkelmodus des Systems erkannt wird.
primary text color	Die Haupttextfarbe des Banners
primary text color dark	Die Haupttextfarbe des Banners, wenn der Dunkelmodus des Systems erkannt wird
secondary text color	Die Textfarbe der Icons und Textüberschriften sowie die Hintergrundfarbe der Schaltfläche.
secondary text color dark	Die Textfarbe der Icons und Textüberschriften sowie die Hintergrundfarbe der Schaltfläche, wenn der Dunkelmodus des Systems erkannt wird.
link text color	Die Textfarbe von Links im Banner
link text color dark	Die Textfarbe von Links im Banner, wenn der Dunkelmodus des Systems erkannt wird.

Übersetzung	Standard
close.title	Banner schließen
close.label	Schließen
toggle.title	Banner erweitern/einklappen
toggle.collapse_label	Einklappen
toggle.expand_label	Erweitern

Von uns gehostet? Theme-Komponenten sind in unseren Pro-, Business- und Enterprise-Plänen verfügbar.

[Dhruvi_Butti]

Hey Leute! Ich möchte den gesamten Text linksbündig ausrichten, aber das CSS-Thema funktioniert bei mir nicht. Kann mir jemand sagen, wie das genau geht?

[tshenry (Taylor)]

Geht das in die richtige Richtung?

Falls ja, hier ist ein schnelles und unkompliziertes CSS, das dir hoffentlich einen guten Start ermöglicht:

.banner-box {
  h1,
  h2,
  h3,
  .row .single-box {
    text-align: left;
    & .banner-list {
      display: block;
      ul {
        margin: 0 0 9px 25px;
      }
    }
  }

  .section-header {
    .x-title {
      padding: 25px 15px;
    }
    .description p {
      text-align: left;
    }
  }
}

Erstelle eine neue Komponente mit dem Namen „Vielseitige Banner-Anpassungen“ und füge das obige CSS im Abschnitt „Allgemein“ hinzu. Stelle sicher, dass du die neue Komponente zu allen aktiven Themes hinzufügst, die das „Vielseitige Banner“ verwenden, damit die Anpassungen übernommen werden.

[Dhruvi_Butti]

Das hat bei mir funktioniert. Vielen Dank.

[charlie788 (Charlie)]

Hallo,

ist es möglich, das Hintergrundbild in ein klickbares Bild umzuwandeln?

Vielen Dank für Ihre Rückmeldung.

[SidV]

@charlie788

Ist es möglich, das Hintergrundbild in ein klickbares Bild zu verwandeln?

Könntest du uns ein Beispiel geben?
Warum möchtest du das tun?
Ich meine… wird dann jedes Hintergrundbild zu einem Link?
Wenn ein Benutzer irgendwo auf das Banner klickt, wird er zu diesem Link weitergeleitet.
Ich kann mir den Verwendungszweck nicht vorstellen.

[Astra]

Wie kann ich die Höhe des Banners anpassen?

[LeCoyote (https://hec.fm)]

Hallo @tshenry, ich verwende die vielseitige Banner-Komponente, aber sie verschwindet, wenn ich „Auf Desktop anzeigen

[Astra]

Ist es möglich, dass die Links auch auf Mobilgeräten horizontal angezeigt werden? Ich war etwas überrascht, dass sie untereinander statt nebeneinander erscheinen.

[tshenry (Taylor)]

@LeCoyote

Wenn ich „Auf dem Desktop anzeigen“ deaktiviere, verschwinden sowohl die vielseitigen Banner auf dem Desktop als auch auf dem mobilen Gerät.

Danke für den Hinweis! Entschuldige bitte die verspätete Antwort. Ich kann das von dir beschriebene Problem nachvollziehen. Ich habe ziemlich sicher eine Idee, was los ist. Ich werde mich diese Woche noch darum kümmern und mich bei dir melden.

@Astra

Wie kann ich die Höhe des Banners anpassen?

@Astra

Ist es möglich, die Links auch auf mobilen Geräten horizontal anzuzeigen? Ich war etwas überrascht, dass sie untereinander und nicht horizontal angezeigt wurden.

Die Höhe des Banners hängt in erster Linie von seinem Inhalt ab, aber du kannst alles nach Bedarf mit deinem eigenen CSS anpassen. Ich bin mir nicht sicher, wie gut du drei Spalten auf mobilen Geräten horizontal unterbringen kannst, aber du kannst es natürlich auch mit benutzerdefiniertem CSS versuchen! Schau dir Making custom CSS changes on your site für einige Tipps an.

[MrDavis97 (Miles Davis)]

Ich glaube, ich habe einen Fehler auf meiner Website im Zusammenhang mit der Lebensdauer von Cookies beim Speichern des expandierten/verkleinerten Zustands festgestellt. Mein Ziel ist es, dass meine Website sich daran erinnert, wann Benutzer das Banner verkleinern oder expandieren, und diesen Zustand unabhängig von allem beibehält. Das funktioniert auch wie erwartet, solange ich auf der Startseite bleibe oder auf Themen klicke. Allerdings wird es seltsam, sobald ich zum Admin-Bereich, zu den Benutzereinstellungen, zur FAQ, zu „Über uns

[augustinecicc]

Ich habe gerade festgestellt, dass das vielseitige Banner auf der Anmeldeseite unseres Forums (es ist ein privates Forum) nicht mehr erscheint, wie früher.

Die Option „Banner für anonyme Benutzer anzeigen

[tshenry (Taylor)]

Ich habe gerade ein kleines Update für die Komponente veröffentlicht.

Fix show/hide on mobile/desktop behavior and remove ember selectors

@LeCoyote

Wenn ich „Auf Desktop anzeigen“ deaktiviere, verschwindet das Versatile Banner sowohl auf dem Desktop als auch auf mobilen Geräten.

Dies sollte mit dem obigen Update behoben sein. Es tut mir wirklich leid, dass es so lange gedauert hat, eine Lösung zu implementieren. Vielen Dank nochmals für deinen Bericht!

@augustinecicc

Ich habe gerade festgestellt, dass das Versatile Banner auf der Anmeldeseite unseres Forums (es ist ein privates Forum) nicht mehr angezeigt wird, wie früher.

Du musst /login zur Theme-Einstellung „URL muss enthalten“ hinzufügen. Weitere Details findest du in diesem Beitrag.

@MrDavis97

Ich glaube, ich erlebe einen Fehler auf meiner Seite bezüglich der Cookie-Lebensdauer beim Beibehalten des erweiterten/eingeklappten Zustands.

Dies wurde in der Vergangenheit ein- oder zweimal gemeldet. Leider konnte ich den Fehler bisher nie reproduzieren. Ich werde es versuchen, sobald ich Zeit habe, mit genau deinen Schritten, und schauen, ob ich mehr Glück habe.

[Dimitri_Nightmare (chris)]

Ich verwende das vielseitige Banner und versuche, das Banner in einen riesigen Link umzuwandeln, der zu einer anderen Website weiterleitet.
Wie kann ich das machen?

Ich habe versucht, dies über ein Skript zu ändern: api.changeWidgetSetting('banner-content-widget', 'href', '<site_adresse>'), aber das vielseitige Banner funktioniert danach nicht mehr.

[augustinecicc]

@tshenry

Du musst /login zur Theme-Einstellung „URL muss enthalten“ hinzufügen. Weitere Einzelheiten findest du in diesem Beitrag.

Danke, das ist großartig. Es funktioniert jetzt perfekt!

[tshenry (Taylor)]

Du könntest vielleicht so etwas wie Folgendes tun:

<script type="text/discourse-plugin" version="0.10.0">
  // Füge den Link zur Überschrift hinzu
  api.reopenWidget("banner-box-widget", {
    html(attrs) {
      let bannerBox = this._super();
      bannerBox[0].children[1].tagName = "A";
      bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
      return bannerBox;
    }
  });
  
  // Füge den Link zum Rest des Inhalts hinzu
  api.reopenWidget("banner-content-widget", {
    html(attrs) {
      let bannerContent = this._super();
      bannerContent.tagName = "A";
      bannerContent.properties.href = "https://meta.discourse.org";
      return bannerContent;
    }
  });
</script>

Und füge eine CSS-Regel hinzu, um die Linkfarbe anzupassen:

.banner-box a {
    color: var(--primary);
}

Es sei denn, du benötigst spezifische Funktionen, die das „Versatile Banner

[mercury233]

Ich installiere diese Komponente aus dem Git-Repository, aber es scheint, als hätte ich nicht den neuesten Code erhalten. Der Commit FIX: Work with new sticky header and move away from deprecated $.cookie · discourse/discourse-versatile-banner@0939120 · GitHub wurde auf meiner Seite https://ygobbs.com/ nicht aktualisiert.

[tshenry (Taylor)]

Dies liegt daran, dass Sie die Discourse-Version 2.6.0.beta2 ausführen. Der von Ihnen verlinkte Commit erfordert 2.6.0.beta3 und höher. Sie werden feststellen, dass der von Ihnen verlinkte Commit eine discourse-compatibility-Datei hinzugefügt hat, um sicherzustellen, dass Sie nicht auf einen Commit aktualisieren, der mit Ihrer Discourse-Version inkompatibel ist.

[mercury233]

Wow, es ist erstaunlich, dass Discourse eine ältere Version für mich findet, anstatt mich daran zu hindern, die Komponente zu installieren. Vielen Dank!

[gassim (Al-Gassim Sharaf Addin)]

Hallo @tshenry,

ich möchte die Komponente mehrmals installieren, um für verschiedene Kategorien unterschiedliche Banner anzuzeigen. Deshalb habe ich die Option „Auf der Startseite anzeigen