Kategorie-Banner

[Discourse]

||||
-|-|
| Zusammenfassung | Category Banners nutzt bestehende Kategoriendetails, um Banner für Ihre Kategorien-Seiten zu erstellen (für Tags schauen Sie sich Discourse Tag Banners an).
| | Vorschau | Vorschau auf Discourse Theme Creator |
| Repository-Link | https://github.com/discourse/discourse-category-banners
|Neu bei Discourse-Themes? | Einsteiger-Guide zur Nutzung von Discourse-Themes

Installieren Sie dieses Theme-Component

Da dies ein #offizielles Theme-Component ist, das 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 Theme-Component-Tag versehen werden. Klicken Sie auf einen der untenstehenden Links, um eine Anfrage zu starten.

 Support  Bug  UX  Feature

Funktionen

Category Banners nutzt bestehende Kategoriendetails, um Banner für Ihre Kategorien-Seiten zu erstellen. Es verwendet den Kategoriennamen, die Beschreibung und die Farbe, um ein Banner am oberen Rand der entsprechenden Kategorien-Seiten zu generieren (für Tags schauen Sie sich Discourse Tag Banners an).

Die Kategorienbeschreibung wird durch den ersten Absatz in jedem Thema „Kategoriendefinition für …“ festgelegt. Die Banner-Hintergrund-/Textfarben werden durch Ihre Kategorien-Abzeichen-Einstellungen definiert.

Standardmäßig wird dies auf Desktop und Mobilgeräten auf allen Kategorien- und Unterkategorien-Seiten angezeigt, erscheint jedoch nicht, wenn Sie Ihrer Kategorie keine Beschreibung gegeben haben.

Einstellungen

Dieses Component bietet Optionen, um die Standardwerte zu überschreiben:

| Name | Beschreibung
|-|
| show description | Beschreibung aus dem Beitrag „Über diese Kategorie“ anzeigen
| show mobile | Banner auf Mobilgeräten anzeigen
| show subcategory | Banner für Unterkategorien anzeigen
| hide if no description | Banner ausblenden, wenn keine Kategorienbeschreibung festgelegt ist
| show category logo | Kategorienlogo anzeigen
| align text |
| exceptions | Banner wird für diese KATEGORIENNAMEN nicht angezeigt
| categories | Kategorien, für die ein Banner angezeigt werden soll
| plugin outlet | Ändert die Position des Banners auf der Seite
| show category icon | Kategorien-Icon oder Emoji aus den Kategorieneinstellungen anzeigen *
| override category icon color | Wenn die Kategorien-Icons verwendet werden, sorgt diese Aktivierung dafür, dass das Icon zur Banner-Textfarbe passt

* Beachten Sie, dass sich diese Einstellung jetzt auf das in den Kategorieneinstellungen festgelegte Kategorien-Icon oder Emoji bezieht, nicht auf das Theme-Component Category Icons (das zugunsten der Kernfunktion als veraltet gilt).

Hinweise zur Anpassung

Wenn Sie diese mit zusätzlichem CSS anpassen möchten, können Sie bestimmte Kategorien-Header mit dieser Struktur ansprechen (example-category ist Ihr Kategorienname):

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

Dieses Component fügt der body-Tags auch die Klasse category-header als zusätzliches CSS-Ziel hinzu.

Von uns gehostet? Theme-Components sind auf unseren Standard-, Business- und Enterprise-Plänen verfügbar.

[Pad_Pors]

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

[jimmymckinney (Jimmy)]

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

[jrgong]

I think it’s great that the category banners now render the content in HTML

Is there any way to display emoji’s there? In my case I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

[awesomerobot (Kris)]

Das Nicht-Präfixieren des Kategorienamens ist ein Rezept für ein Desaster, daher habe ich category-banner- vor den Klassennamen gesetzt (z. B. category-banner-meta). Wenn du in deinem CSS den Kategorienamen ansprichst, musst du einfach category-banner- davor hinzufügen.

@jrgong

Gibt es eine Möglichkeit, Emojis dort anzuzeigen?

Ich bin mir nicht sicher. Ich glaube nicht, dass unsere Standard-Kategorienbeschreibungen diese unterstützen, aber ich kann mich darum kümmern…

[Hang]

Ich möchte das hochgeladene Hintergrundbild aus der Kategorie im Hintergrund des Banners verwenden. Ich habe den Code bearbeitet, und alles sieht großartig aus. Ich frage mich, ob es Möglichkeiten gibt, das Bild schneller zu laden oder gemeinsam mit dem Rest der Seite zu laden, um das kurzzeitige Flackern des Hintergrunds vor dem Erscheinen des Bildes zu vermeiden.

Das Komprimieren des Bildes ist sicherlich eine Option, aber ich frage mich, ob es noch andere gibt. Kann ich im Code die Miniaturansicht des hochgeladenen Hintergrundbildes abrufen? Vielen Dank für alle Hinweise!

[Vanecx]

Hallo und vielen Dank für diese Theme-Komponente!

Ich habe es gerade versucht, sie zu installieren, indem ich diesem Tutorial gefolgt bin (habe exakt die gleichen Schritte ausgeführt), um diese Kategorie-Banner-Komponente zu testen, aber es passiert nichts. Keine Banner in einer der Kategorien. Gibt es etwas, das ich möglicherweise falsch gemacht habe, sodass es nicht funktioniert? Die einzige Erklärung, die ich sehe, ist, dass die “Bootstrap”-Warnung es blockiert?

[simon]

@Vanecx

In keiner der Kategorien ist ein Banner zu sehen. Habe ich vielleicht etwas falsch gemacht, sodass es nicht funktioniert?

Standardmäßig zeigt das Theme-Komponente keine Kategoriebanner an, wenn für eine Kategorie keine Beschreibung festgelegt wurde. Dies kann geändert werden, indem das Kontrollkästchen „Banner ausblenden, wenn keine Kategorienbeschreibung vorhanden ist

[Vanecx]

Vielen Dank für Ihre Antwort. Ich habe geprüft und bestätigt, dass jede Kategorie im Forum eine Beschreibung hat. Die Option „Banner ausblenden…

[downey (Michael Downey)]

Gibt es außer mir noch jemanden, der findet, es wäre schön, dieses gleiche Styling auch auf Gruppen-Übersichtsseiten (z. B. /g/foo) zu aktivieren? Der CSS-Code ist leider nicht ganz derselbe, und ich vermute, es wäre eine zusätzliche Behandlung der verschiedenen Schaltflächen rechts neben dem Gruppennamen erforderlich, also Anfordern Nachricht Löschen

Das könnte einen großen Beitrag zu einem konsistenten Erscheinungsbild leisten und Gruppen im UI zu „erstklassigen“ Bürgern machen. (IMHO)

[jord8on (Jordan)]

Ich liebe diese Kategorien-Banner! Danke, dass du diese Theme-Komponente erstellt hast!

Ich würde gerne, dass dieses Banner auf der Hauptseite unseres Forums existiert, wo es Folgendes anzeigt:

• „Neueste

[Rhidian (Rhidian Bramley)]

@awesomerobot, ich hoffe, es ist in Ordnung, wenn ich das hier teile…

Ich habe eine Fork dieses Themas „discourse-category-banners“ erstellt, die

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

heißt. Du kannst sie hier in der Vorschau ansehen:

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

Sie macht im Großen und Ganzen das Gleiche, jedoch mit einigen Anpassungen:

• Das Kategorie-Banner-Box wird inline über der Hauptüberschrift angezeigt, anstatt in voller Breite oben. Dies ermöglicht die Anzeige eines Banner-Themas oben, beispielsweise des „discourse-versatile-banner“.

• Das Kategorie-Banner-Box wird im gleichen Stil wie die nativen Discourse-Unterordner-Boxen dargestellt, die ein Kernbestandteil von Discourse sind. Diese Unterordner-Boxen sind eine Anzeigeoption in den Discourse-Kategorieeinstellungen Unterordnerliste über den Themen in dieser Kategorie anzeigen. Diese Option zeigt den Namen und die Beschreibung der Unterordnerkategorie als Zeile oder Box über der Themenliste an, wobei die Hintergrundfarbe der Kategorie als linker Rand verwendet wird.

• Wenn die Kategorie eine Unterordnerkategorie ist, wird der Kategoriename als Breadcrumb wie folgt angezeigt – Name der übergeordneten Kategorie: Name der Unterordnerkategorie.

Demo-Screenshot des Themen-Banner-Box für die Kategorie, über den nativen Unterordner-Boxen.

Screenshot der Unterordnerkategorie, der die Breadcrumb-Referenz zur übergeordneten Kategorie zeigt.

Dies ist mein erster Versuch einer Themenanpassung. Ich hoffe, das ist hilfreich!

Update

Ich habe diese Anpassung als separate Komponente refaktoriert – mit vielen zusätzlichen Funktionen, darunter die Verwendung des Kategorie-Logo-Bilds und des Hintergrundbilds in der Kopfzeile. Diese neue Komponente ersetzt effektiv den Standard-Header der Discourse-Kategorie, im Gegensatz zu den Kategorie-Bannern, und ist somit eine neue Komponente. Bitte siehe:

Discourse Category Headers theme component

This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

[nathank (Nathan Kershaw)]

@awesomerobot

Ausnahmen: Wenn eine Kategorie kein Banner haben soll, fügen Sie ihren Namen hier hinzu.

Bei uns funktioniert das nicht. Ich habe sowohl den Kategorie-Slug als auch die Kategorie-ID ausprobiert, aber das Banner bleibt hartnäckig bestehen. Funktioniert das bei jemand anderem?

[awesomerobot (Kris)]

Ich habe es gerade ausprobiert, und es funktioniert bei mir. Es sucht nach der groß-/kleinschreibungsabhängigen Kategorie name. Im Nachhinein war das nicht die beste Implementierung… Ich kann das wahrscheinlich verbessern.

[nathank (Nathan Kershaw)]

Ah – diese Art ist genau das Richtige für mich! Und du erwähnst „Name

[AntiMetaman]

Statt Ausnahmen hinzuzufügen, welche Kategorien ein hochgeladenes Banner nicht anzeigen sollen, können wir nicht einfach festlegen, welche Kategorie welches Banner anzeigen soll?

[awesomerobot (Kris)]

Das hängt sicher von der jeweiligen Seite und dem Anwendungsfall ab. Mein erster Gedanke war, dass es wahrscheinlicher ist, dass eine Seite eine flächendeckende Implementierung wünscht und Ausnahmen nur in wenigen Fällen auftreten würden.

Wenn Sie ein Banner nur für eine geringe Anzahl von Kategorien implementieren möchten, gibt es möglicherweise eine bessere Theme-Komponente, die weniger allgemein gehalten ist, wie z. B. Versatile Banner, oder Sie können eine der Optionen anpassen, die unter https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368 zu finden sind.

[Idan]

Es wäre toll, ein Bild hochladen zu können, um den Text zu ersetzen.

[oca]

Danke für diese sehr nützliche Komponente!

Wäre es möglich, eine kleine Erweiterung hinzuzufügen?

• Füge der restricted-Klasse das Element <span.discourse-category-banners> oder <div.category-title-header> hinzu, wenn die Kategorie nicht öffentlich ist, genauso wie beim Kategorie-Abzeichen.

Das wäre nützlich, um das Banner mit zusätzlichem CSS anzupassen und dem Benutzer zu zeigen, dass diese Kategorie besonders ist.

Derzeit ist das zwar machbar, aber kompliziert, das Schloss-Symbol mit CSS auszuwählen und etwas damit zu machen. Da CSS keinen Eltern-Selektor hat, kann ich das Vorhandensein des Schloss-Symbols nicht nutzen, um zu prüfen, ob das Banner angepasst werden soll.

Ich weiß noch nicht genau, wie man Pull Requests erstellt, aber ich würde dies gerne als guten Anlass nutzen, es zu lernen, wenn du meine Änderung unterstützen würdest.

[Drew-ART (Drew)]

Lässt sich das auf Tag-Seiten funktionsfähig machen? Ich habe das Plugin tag-banners gefunden, aber es bietet keine Möglichkeit, Text oder Links hinzuzufügen.