Kategorien-Highlighter

[angus (Angus McLeod)]

Dieses Theme-Komponente ermöglicht es Ihnen, eine Kategorie (oder mehrere Kategorien) in Ihrem Discourse hervorzuheben. Sie können:

1. Bestimmten Kategorien einen speziellen Hintergrundstil geben
2. Einen Kategorie-Link im Header mit demselben speziellen Stil hinzufügen

Ein typischer Anwendungsfall ist eine Kategorie mit „Premium"-Inhalten.

So installieren Sie es

Code abrufen

---

Kategorienavigation und Header-Label

Themenliste	Seitenmenü

Kategorien-Seite

Konfiguration

Die Theme-Komponente „Category Highlighter" verfügt über eine Haupteinstellung: „Kategorien hervorheben". Diese Einstellung finden Sie im Einstellungspanel der Kategorie-Highlighter-Theme-Komponente.

Jede Kategorie, die Sie hervorheben möchten, erhält einen eigenen Listeneintrag in dieser Einstellung. Das Format jedes Eintrags lautet:

category_slug~background~text_color~header_label~header_label_mobile~parent_slug~alternate_link

Ein Beispiel für dieses Format ist:

premium~linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%)~#88562e~:star:  Premium~:star:

Es gibt sechs mögliche Werte, die jeweils durch ein ~ (ein „Tilde") getrennt sind. Wir gehen nun nacheinander auf jeden Wert ein.

Category Slug (Kategorie-Slug)

Dies ist der „Slug" der Kategorie, die Sie hervorheben möchten. Sie finden ihn in den Kategorieeinstellungen.

Wenn Sie eine Unterkategorie hervorheben möchten, müssen Sie den Slug der übergeordneten („Parent") Kategorie verwenden, gefolgt vom Slug der Unterkategorie, getrennt durch ein /.

Wenn es beispielsweise eine Unterkategorie von „premium" mit dem Slug videos gibt, die ich hervorheben möchte, würde ich Folgendes verwenden:

premium/videos

Berechtigungen

Beachten Sie, dass nur Benutzer, die über die Berechtigung read für die hervorgehobene Kategorie verfügen, die Hervorhebungen einschließlich des Header-Labels sehen. Sie können die Kategorieberechtigungen in den Kategorieeinstellungen unter „Sicherheit" ändern.

Hintergrund

Dies ist ein Wert, der der CSS-Eigenschaft background des Kategorie-Abzeichens zugewiesen wird. Sie können hier jeden Eintrag verwenden, der von dieser Eigenschaft unterstützt wird.

background - CSS: Cascading Style Sheets | MDN

Die CSS-Kurzeigenschaft background legt alle Hintergrundstileigenschaften gleichzeitig fest, wie z. B. Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode.

Beispiel: linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%).

Textfarbe

Dies ist ein Wert, der der CSS-Eigenschaft color des Kategorie-Abzeichens zugewiesen wird. Dies beeinflusst die Farbe des Textes. Sie können hier jeden Eintrag verwenden, der von dieser Eigenschaft unterstützt wird.

color - CSS: Cascading Style Sheets | MDN

Die CSS-Eigenschaft color legt den Vordergrundfarbwert für den Text und die Textdekorationen eines Elements fest und setzt den currentcolor-Wert. currentcolor kann als indirekter Wert für andere Eigenschaften verwendet werden und ist der Standardwert für andere Farbeigenschaften, wie zum Beispiel…

In unserem Beispiel lautet dieser Wert #88562e.

Header-Label

Dieser Wert erfüllt zwei Zwecke. Er bestimmt:

1. ob die hervorgehobene Kategorie ein Header-Label erhält, und
2. den Inhalt dieses Labels.

Wenn Sie kein Header-Label wünschen, geben Sie diesen Wert einfach nicht an.

Dieser Wert unterstützt Text, HTML-Entitäten und Emojis.

Der Header-Label-Wert lautet hier: :star:  Premium. Das bedeutet:

1. Der Shortcode für das Stern-Emoji: :star:
2. Zwei nicht trennbare Leerzeichen als HTML-Entitäten (jeweils ein weißes Leerzeichen):   
3. Unser Label-Text: Premium

Eine vollständige Liste der Emoji-Shortcodes finden Sie hier, und eine vollständige Liste der HTML-Entitäten hier.

Mobiles Header-Label

Dieser Wert erfüllt ebenfalls zwei Zwecke. Er bestimmt:

1. ob die hervorgehobene Kategorie ein mobiles Header-Label erhält, und
2. den Inhalt des mobilen Header-Labels.

Die Verwendung und Formatierung entspricht der des Header-Labels. Beachten Sie jedoch, dass auf mobilen Geräten weniger Platz zur Verfügung steht. Daher ist es ratsam, nur ein Emoji oder ein kurzes Wort zu verwenden, um Platz zu sparen.

Übergeordnete Kategorie

Sie können ein Dropdown-Menü im Header erstellen, indem Sie die „übergeordnete" Kategorie eines Elements festlegen. Fügen Sie als sechsten Eintrag einen Kategorie-Slug ein; das entsprechende Element wird dann im Header als Untermenüpunkt dieser Kategorie angezeigt. Wie beim ersten Eintrag stellen Sie sicher, dass Sie hier den Kategorie-Slug verwenden, den Sie im Modal für Kategorieeinstellungen abrufen können.

Alternativer Link

Standarderweise verlinkt jedes Kategorie-Element auf die zugehörige Kategorie. Sie können den Link ändern, indem Sie als sechsten Eintrag im Einstellungsblock eine URL angeben.

[jrgong]

So einfach, aber so wirkungsvoll. Ich hatte schon länger den Plan, bestimmte Bereiche des Forums per CSS hervorzuheben, um Beiträge aus den kostenpflichtigen Kundenkategorien zu markieren. Das macht jetzt alles viel einfacher. Danke für die Arbeit, das ist fantastisch!

Hast du schon darüber nachgedacht, Themen in der Themenliste hervorzuheben, wenn im Kategorienauswahlmenü „Alle Kategorien

[angus (Angus McLeod)]

Der Highlight-Effekt funktioniert an allen Stellen, an denen das Abzeichen angezeigt wird, ist also bereits in der Liste vorhanden

Themenliste	Seitenmenü

Kategorien-Seite

Weitere Informationen unter https://try.thepavilion.io

[outofthebox (Carson)]

@Angus, du bist ein hervorragender Entwickler, und es ist eine große Freude, mit dir zusammenzuarbeiten. Danke für deine Kreativität, Exzellenz und Gründlichkeit. Du bist ein Geschenk für die Discourse-Community.

[jordan.vidrine]

Das ist eine ziemlich coole Komponente, gut gemacht

[codinghorror (Jeff Atwood)]

ooo das fühlt sich so.. preeemium an

[Anatolia]

@angus

Auf den ersten Blick dachte ich, es gäbe eine Seitenleiste. Eine Seitenleiste in diesem Stil könnte nett sein.

[Paracelsus]

Tolle Komponente, wirklich schön.

@angus Ich würde gerne wissen, wie man einen Border-Radius auf den hervorgehobenen Hintergrund anwendet. Danke im Voraus.

[angus (Angus McLeod)]

@Paracelsus

Ich möchte wissen, wie man einen border-radius auf den hervorgehobenen Hintergrund anwendet. Vielen Dank im Voraus.

Aufgrund der Vielzahl an Kontexten, in denen das Kategorie-Abzeichen erscheint, ist dies etwas komplex. Ich könnte eine Klasse hinzufügen, um dies zu vereinfachen, aber vorerst kannst du Folgendes tun:

### Header-Button
.highlight-category-button {
    border-radius: 4px;
}

### Abzeichen
.badge-wrapper[class*=" updates "],
.extra-info-wrapper .categories-wrapper .badge-wrapper[class*=" updates "],
.category-title-link-component[class*=" updates "] .category-text-title,
.select-kit.combo-box.category-drop .category-row[class*=" updates "] .badge-wrapper {
    &::before {
        border-radius: 4px;
    }
}

„updates

[fzngagan (Faizaan Gagan)]

Die Komponente unterstützt nun ein Dropdown-Menü für Kategorien.

Wenn Sie den Slug der übergeordneten Kategorie als sechsten Eintrag in den Einstellungen verwenden, wird ein Dropdown-Menü mit den Unterkategorien als Einträge angezeigt.

Hinweis: Sie müssen den fünften Eintrag, also (Header-Label mobil), leer lassen, wenn Sie ihn nicht verwenden möchten.

Vielen Dank für die Sponsoring-Unterstützung von @outofthebox.

[outofthebox (Carson)]

Tolle Arbeit @fzngagan!! Das Team von Pavilion ist erstklassig.

[satonotdead]

Wäre es möglich, nicht nur den Slug, sondern auch .select-kit .select-kit-row.is-highlighted hervorzuheben?

Das wäre meiner Meinung nach für unsere Augen angenehmer.

Ich stimme den Kommentaren zu: Deine Arbeit ist großartig. Ich habe mir die Pavilion-Website angesehen und teste gerade viele Dinge.

Ich hoffe, dass wir bald an einigen Ideen für unsere Community arbeiten können

[MarcP]

Zunächst einmal vielen Dank für diese großartige Komponente.

@angus

Themenliste

Ich finde, das würde besser aussehen, wenn zwischen dem Thementitel und dem Kategorien-Abzeichen in der Themenliste etwas mehr Weißraum wäre. Ist das innerhalb der Komponente umsetzbar? Die Boxen scheinen etwas größer als die Standard-Boxenansicht zu sein, was für manche Perfektionisten schmerzhaft anzusehen ist, lol.

Die Mobilansicht ist besser als die Desktopansicht:

[jrgong]

Funktioniert dies noch mit den neuesten bestandenen Tests? Wenn ja, haben Sie die Dokumentation noch irgendwo archiviert? @angus

[angus (Angus McLeod)]

Ich habe die Dokumentation oben im OP eingefügt. Lassen Sie mich wissen, wenn es nicht funktioniert.

[jrgong]

Großartig! Besonders der Farbverlauf war entscheidend, um mein Ziel zu erreichen! Vielen Dank!

[jrgong]

Benutzt noch jemand dieses TC und hat vielleicht eine Lösung für folgendes Problem gefunden?
Bei 2.9.0.beta9 und beta10 lässt das TC die Systemkategorie-Metadaten aus dem Dropdown-Feld der Kategorie sowie der Themenliste verschwinden.

Das Forum-Log ist leer, das Einzige, was im Konsolenprotokoll steht, ist:

[THEME 190 'Category Highlighter'] Um Fehler in Tests zu vermeiden, fügen Sie einen `pluginId`-Schlüssel zu Ihrem `modifyClass`-Aufruf hinzu. Dies stellt sicher, dass die Änderung nur einmal angewendet wird. 3 plugin-api.js:19