Tag-Icons

:discourse2: Zusammenfassung Tag Icons ermöglicht es, dass Tags ein Symbol neben der Tag-Beschriftung haben.
:eyeglasses: Vorschau Vorschau im Discourse Theme Creator
:hammer_and_wrench: Repository-Link https://github.com/discourse/discourse-tag-icons
:open_book: Neu bei Discourse Themes? Anfängerleitfaden zur Verwendung von Discourse Themes

Dieses Theme-Komponente installieren

Funktionen

Hier ist ein Beispiel, wie dies aussehen würde, wenn das Tag-Design auf den Standard (einfach) eingestellt ist:

So sieht es aus, wenn das Tag-Design auf box eingestellt ist:

Einstellungen

Name Beschreibung
tag icon list Geben Sie eine durch Kommas getrennte Konfiguration für Tags im Format “tag-slug,icon,iconColor” ein. Die Icon-Farbe ist optional.
svg icons Liste der in dieser Theme-Komponente verwendeten FontAwesome 6 Icons

:discourse2: Von uns gehostet? Theme-Komponenten können in unseren Standard-, Business- und Enterprise-Plänen verwendet werden.

79 „Gefällt mir“
Is anyone else using tags on a Discourse forum in a big way?
Events Plugin :calendar:
Discourse Coloring Tag
Category Icons
How to test themes or theme components?
Discourse更新后,主页排版混乱
How to make a category-list-like front page for a tag-oriented site?
Request or idea for a component: topic title or topic flair
Admin guide to tags in Discourse
Customizing your site with existing theme components
Category Icons
Setup Continuous Integration using GitHub Actions
Tag change color for element in a Tag group
Add color and subcategory styling to category and chat mentions
Setting tag style to 'box'?
MD Topic List component
Remove Dashes from Tag Names
Links in tag descriptions aren’t escaped when using Tag Icons
Good approach for data sensitivity markings?
We're upgrading our icons to Font Awesome 6!
(Superseded) Add a custom fontawesome icon and color to your tag
How to create a tag "🎥"?
How to create a tag "🎥"?
Does anyone know how to add emojis to tags?
Renaming Tags: Consequences
Workarounds to support alternate tag structures
Difficult contrast of tags and categories when the text colour is white
Tag Banners
Some of my tags have # and some don't
The Horizon theme does not display tags on topic lists
Default tag icon
Tag Icons + Tag Banners + Right Sidebar Blocks
Add backgroundColor option for Tag Icons theme-component
For newly created labels, assign a random style
Trying to use css to insert png icons in tag boxes
Workarounds to support alternate tag structures
Uncaught TypeError: Cannot read property 'apply' of undefined
A picker for font awesome icons
api.onPageChange not working with endless scroll
Volunteer Activities - a simple setup for non-hierarchical collaboration
Looking for a freelancer to implement a custom Discourse theme (based on an existing mockup)
Include an emoji when creating a new topic?
MD Topic List Mobile component
Javascript error + content missing after update 2.6.0.beta3
Emoji in tag - thoughts and experiences
A playful approach to category moderation

Does this also work with custom svg?

2 „Gefällt mir“

Yes, but you would need to register the custom SVG in a plugin (themes should soon also be able to add custom icons to the SVG sprite set). See Introducing Font Awesome 5 and SVG icons for details.

7 „Gefällt mir“

Now that custom icons in themes has been merged is it possible to use FA Pro icons with this or does the component need to be updated?

Component doesn’t need to be updated, if you add custom icons via theme/plugin they will be available to the component.

3 „Gefällt mir“

Could the icon be added to the dropdown menu as well?

9 „Gefällt mir“

Dadurch kann man benutzerdefinierte Symbole zu Tags hinzufügen, aber was ist, wenn ich die Farbe des Tag-Rahmens ändern möchte?

3 „Gefällt mir“

Das können Sie mit CSS machen. Der folgende Code setzt beispielsweise die Textfarbe von „theme-component

2 „Gefällt mir“

Ich verstehe, danke. Ich muss also jeden Tag, den ich im CSS habe, einzeln benennen und die Farbe angeben. Es wäre jedoch schön, wenn ich das über das Admin-Panel tun könnte, ähnlich wie bei den Theme-Komponenten: mit einer durch Kommas getrennten Liste und der Angabe des Hex-Codes, genau wie bei den Icons.

Gibt es eine Möglichkeit, über CSS eine Farbe für alle Tags in einer Tag-Gruppe festzulegen?

4 „Gefällt mir“

Ich habe am Ende so etwas bekommen: image (Das Standard-Tag-Symbol ist immer noch hier)

Sieht jemand von euch ein solches Ergebnis?

Suchen Sie in Ihren Site-Einstellungen nach „Tag-Stil“ und ändern Sie ihn auf „Einfach“. Dadurch werden die grauen Aufzählungspunkte entfernt.

Verstehe, danke. Ich benötige jedoch die standardmäßigen grauen Aufzählungszeichen für alle anderen Tags. Ich habe dies erreicht, indem ich die Aufzählungszeichen für den spezifischen Tag entfernt habe:

a[data-tag-name="test1"]::before {
    display:none!important;
}

image

3 „Gefällt mir“

Sieht nach einer fantastischen Verbesserung aus. Eine Frage als Rat an den Autor: Ich überlege, meine langweiligen Tags, von denen ich einige zur Kennzeichnung von Beiträgen nach Sprache verwende (also Tags wie „castellano“, „deutsch“ usw.), mit kleinen Länderflaggen aufzuwerten. Wäre das Hochladen einer benutzerdefinierten .SVG-Datei, wie oben beschrieben, der richtige Weg, oder gibt es vorkonfigurierte Icon-Sets oder vielleicht in Discourse integrierte Emoji-Sets, die verwendet werden könnten?

2 „Gefällt mir“

Ein Emoji wäre für Länderflaggen sinnvoll, aber diese Komponente verwendet keine Emojis, sondern Symbole aus einem Icon-Set wie Font Awesome.

Sie können versuchen, das Emoji direkt in das Tag-Label einzufügen. Ich habe dies lokal ausprobiert, und das Tückische ist, dass Tags keine Leerzeichen enthalten dürfen. Ein Beispiel:

Wenn Ihnen der Bindestrich passt, ist das der richtige Weg.

4 „Gefällt mir“

Oh wow, das ist eigentlich ziemlich cool. Abgesehen vom Bindestrich :slight_smile: aber damit könnte ich wahrscheinlich leben. Vielleicht lohnt es sich sogar, ein Tag zu versuchen, das nur aus einem Flaggen-Emoji besteht…

Ja, nur ein Emoji ist cool… aber du wirst es in der Tag-Auswahl (beim Posten) nicht einfach über die Suche finden können.

2 „Gefällt mir“

Ok, noch eine halb-dumme Frage: Wie bekomme ich das Emoji so zum Laufen, wie du es oben mit dem Französischen gemacht hast? Ich habe versucht, ein Tag :sweden:-svenska zu erstellen, aber es wird nicht zur schwedischen Flagge übersetzt.

Du musst ein Emoji-Symbol verwenden (auf einem Mobilgerät würdest du beispielsweise auf die Emoji-Tastatur wechseln).

3 „Gefällt mir“

Ohhhh, ich dachte, die Emojis wären in Discourse. Okay, muss dann auf ein Mobilgerät wechseln. Ich dachte, ich könnte sie irgendwie nutzen. Es hat funktioniert, danke!

3 „Gefällt mir“

Wenn ich das richtig verstanden habe, gibt es keine einfache Möglichkeit, innerhalb des Tag-Renderers herauszufinden, zu welcher Gruppe ein Tag gehört?

Das wäre großartig. Ich habe zuvor einen benutzerdefinierten CSS-Ansatz verwendet und ihn durch dieses Theme-Komponente ersetzt, das ein Fallback-Symbol für alle nicht zugewiesenen Tags verwendet (zumindest vor der Unterstützung für Tag-Gruppen). Genau das vermisse ich.

Da discourse-category-icons dies unterstützt, vermute ich, dass der Renderer, den replaceCategoryLinkRenderer ersetzt, vom Kategorien-Dropdown verwendet wird, während der Renderer, den replaceTagRenderer ersetzt, NICHT vom Tag-Dropdown verwendet wird, oder? Vielleicht wäre dafür also eine Änderung im Kern nötig? Das Tag-Dropdown im Composer verwendet den ersetzten Renderer mit Symbolen.

2 „Gefällt mir“