Symbole global ändern

[Discourse]

Dies ist eine einfache Möglichkeit, ein Discourse-Symbol global zu ändern.

1. Rechtsklicken Sie auf das Symbol, das Sie ändern möchten, und wählen Sie „Element untersuchen“ oder „Inspizieren“ (abhängig vom Browser)

2. Finden Sie den Symbolnamen
   

   

3. Suchen Sie hier nach einem neuen Symbol: Find Icons with the Perfect Look & Feel | Font Awesome, z. B. external-link-alt

4. Passen Sie den Code an und fügen Sie ihn in Ihren Tab admin > customize > themes > edit code -> JS ein

// {theme}/javascripts/discourse/api-initializers/init-theme.gjs

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.replaceIcon("link", "external-link-tab");
});

5. Symbole, die standardmäßig nicht von Discourse verwendet werden, müssen in der Website-Einstellung svg icon subset hinzugefügt werden. Erzwingen Sie dann einen Browser-Neuladen, um die Änderungen anzuzeigen.
   Ergebnis:
   
   Alle „link“-Symbole werden durch „external-link-tab“ ersetzt.
   Wenn ein Symbol für mehrere Elemente auf anderen Seiten, wie z. B. Abzeichen, verwendet wird, wird das Symbol auch dort ersetzt.

---

Ausnahmen

Beachten Sie, dass es bereits eine Theme-Komponente gibt, mit der Sie das „Gefällt mir“-Symbol ändern können (Change the Like icon). Ich verwende diesen Fall als Beispiel.

Das „Herz“-Symbol, das zum Vergeben von „Gefällt mir“ verwendet wird, ist mit anderen Namen („‘d-liked’“ und „‘d-unliked’“) fest codiert und sollte anders behandelt werden als andere Symbole. Um das -Symbol durch das -Symbol zu ersetzen:

api.replaceIcon("d-liked", "thumbs-up");
api.replaceIcon("d-unliked", "thumbs-o-up");

Aber auf der Abzeichenseite ist das Symbol immer noch „heart“:

Um es auf dieser Seite zu ändern, fügen wir hinzu:

api.replaceIcon("heart", "thumbs-up");

Anderes Beispiel:

api.replaceIcon("d-watching", "eye");

ändert das „watching“-Symbol:

Sehen Sie hier weitere Ausnahmen, die den Tracking-Status, das Ein-/Ausklappen, Benachrichtigungen und natürlich „Gefällt mir“ abdecken.

const REPLACEMENTS = {
  "d-tracking": "bell",
  "d-muted": "discourse-bell-slash",
  "d-regular": "far-bell",
  "d-watching": "discourse-bell-exclamation",
  "d-watching-first": "discourse-bell-one",
  "d-drop-expanded": "caret-down",
  "d-drop-collapsed": "caret-right",
  "d-unliked": "far-heart",
  "d-liked": "heart",
  "d-post-share": "link",
  "d-topic-share": "link",
  "notification.mentioned": "at",
  "notification.group_mentioned": "users",
  "notification.quoted": "quote-right",
  "notification.replied": "reply",
  "notification.posted": "reply",
  "notification.edited": "pencil-alt",
  "notification.bookmark_reminder": "discourse-bookmark-clock",
  "notification.liked": "heart",
  "notification.liked_2": "heart",
  "notification.liked_many": "heart",
  "notification.liked_consolidated": "heart",
  "notification.private_message": "far-envelope",
  "notification.invited_to_private_message": "far-envelope",
  "notification.invited_to_topic": "hand-point-right",
  "notification.invitee_accepted": "user",
  "notification.moved_post": "sign-out-alt",
  "notification.linked": "link",
  "notification.granted_badge": "certificate",
  "notification.topic_reminder": "far-clock",
  "notification.watching_first_post": "discourse-bell-one",
  "notification.group_message_summary": "users",
  "notification.post_approved": "check",
  "notification.membership_request_accepted": "user-plus",
  "notification.membership_request_consolidated": "users",
  "notification.reaction": "bell",
  "notification.votes_released": "plus",
  "notification.chat_quoted": "quote-right",
};

Ref: discourse/icon-library.js at main · discourse/discourse (github.com)

---

Fühlen Sie sich frei, andere Theme-Komponenten zu erstellen und sie in unserer Kategorie Theme component zu teilen!

---

Dieses Dokument wird versioniert – schlagen Sie Änderungen auf github vor.