Vielseitiges Banner

[Discourse]

	Zusammenfassung	Versatile Banner fügt Ihrer Website ein anpassbares Banner hinzu.
	Vorschau	Vorschau auf Discourse Theme Creator
	Repository-Link	https://github.com/discourse/discourse-versatile-banner
	Neu bei Discourse-Themes?	Einsteigerleitfaden zur Verwendung von Discourse-Themes

Dieses Theme-Komponente installieren

Da dies eine #offizielle Theme-Komponente ist, die vom Discourse-Team gepflegt wird, können Support, Contribute > Bug, Contribute > UX und #contribute:feature-Anfragen in den jeweiligen Kategorien hier auf Meta gestellt und mit dem entsprechenden Tag der Theme-Komponente versehen werden. Klicken Sie auf einen der unten stehenden Links, um eine Anfrage zu starten.

 Support  Bug  UX  Feature

Funktionen

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

Im Folgenden werden die Funktionen hervorgehoben:

• Anzeige auf eingeloggte oder anonyme Benutzer beschränken
• Anzeige ausschließlich auf Mobilgeräten oder Desktop-Computern beschränken
• Anzeige auf bestimmten Seiten beschränken
• Optionen zum Schließen, Ein- und Ausklappen sowie immer sichtbar
• Option für volle Browserbreite
• Farbverwaltung
• Anpassung von Überschrift und Spalten mit HTML (siehe unten für mehr)
• Option für persistenten Zustand (siehe unten für mehr)

Anpassen des Bannerinhalts

Der Bannerinhalt ist in die Hauptüberschrift und Spalten unterteilt. Sie können bis zu 5 Spalten in Ihrem Banner haben, jedoch wird aufgrund von Breitenbeschrä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 oben in jeder Spalte beliebige Bilder oder Font-Awesome-Icons 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 sich auf den Zustand des Banners bezieht. Wenn Sie Bedenken hinsichtlich der Verwendung von Cookies auf Ihrer Website haben, ist es am besten, diese Einstellung zu vermeiden. Die Wahl einer relativen Zeitoption für die Einstellung cookie_lifespan stellt sicher, dass das Banner für diese Zeitspanne geschlossen/ausgeklappt/eingeklappt bleibt, nachdem der Benutzer auf die entsprechende Schaltfläche geklickt hat. Ohne diese Einstellung wird das Banner bei jedem vollständigen Seitenladen zurückgesetzt. Wenn Sie Änderungen am Banner vornehmen und sicherstellen möchten, dass alle Benutzer diese Änderungen sehen, auch diejenigen, die das Banner zuvor geschlossen haben, stellen Sie sicher, dass Sie den „Cookie-Namen“ ändern. Dies setzt im Wesentlichen jeden persistenten Zustand zurück und ermöglicht es dem Benutzer, das Banner erneut zu schließen.

Einstellungen

Name	Beschreibung
show for members	Banner für Benutzer anzeigen, die im Forum angemeldet sind
show for anon	Banner für anonyme Benutzer anzeigen
display on mobile	Banner auf Mobilgeräten anzeigen
display on desktop	Banner auf Desktop-Computern anzeigen
display on homepage	Banner auf der Startseite anzeigen
url must contain	Geben Sie Pfade ein, auf denen das Banner angezeigt werden soll. Fügen Sie * am Ende des Pfads als Platzhalter hinzu
dismissible	Benutzern erlauben, das Banner zu schließen
collapsible	Benutzern erlauben, das Banner ein- und auszuklappen
default collapsed state	Standardmäßig eingeklappter Zustand, wenn die Einstellung zum Ein- und Ausklappen aktiviert ist
cookie lifespan	Die Lebensdauer des Cookies, der sich daran erinnert, ob das Banner geschlossen, ausgeklappt oder eingeklappt wurde. Wenn auf „none“ gesetzt, werden KEINE Cookies mit dieser Komponente verwendet, und alle zuvor erstellten Cookies, die sich auf das Banner beziehen, werden beim nächsten vollständigen Seitenladen eines Benutzers gelöscht. Die Werte werden als einzelne Einheit gemessen, sodass „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 diese Einstellung, 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 daraus verwenden, aber stellen Sie sicher, dass Sie den Abschnitt „Uploads“ dieser Komponente nicht verwenden. Alle Uploads, die zu dieser Komponente hinzugefügt werden, werden bei jedem Update gelöscht.
banner background image dark	Die Quell-URL für Ihr Hintergrundbild, wenn ein systemweites dunkles Design erkannt wird.
background color	Wird anstelle eines Hintergrundbilds verwendet
background color dark	Wird anstelle eines Hintergrundbilds verwendet, wenn ein systemweites dunkles Design erkannt wird.
primary text color	Die Haupttextfarbe des Banners
primary text color dark	Die Haupttextfarbe des Banners, wenn ein systemweites dunkles Design erkannt wird
secondary text color	Die Textfarbe der Icons und Textüberschriften sowie die Hintergrundfarbe der Schaltflächen.
secondary text color dark	Die Textfarbe der Icons und Textüberschriften sowie die Hintergrundfarbe der Schaltflächen, wenn ein systemweites dunkles Design erkannt wird.
link text color	Die Textfarbe von Links innerhalb des Banners
link text color dark	Die Textfarbe von Links innerhalb des Banners, wenn ein systemweites dunkles Design erkannt wird.

Übersetzung	Standardwert
close.title	Banner schließen
close.label	Schließen
toggle.title	Banner ein-/ausklappen
toggle.collapse_label	Einklappen
toggle.expand_label	Ausklappen

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