تغيير الأيقونات عالميًا

[Discourse]

هذه طريقة سهلة لتغيير أيقونة Discourse على مستوى الموقع.

1. انقر بزر الماوس الأيمن على الأيقونة التي تريد تغييرها وحدد “Inspect element” أو “Inspect” (يعتمد على المتصفح)

2. ابحث عن اسم الأيقونة
   

   

3. ابحث عن أيقونة جديدة هنا Find Icons with the Perfect Look & Feel | Font Awesome على سبيل المثال external-link-alt

4. قم بالتخصيص وأضف الكود في علامة التبويب admin > customize > themes > edit code - > JS

// {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. يجب إضافة الأيقونات التي لا يستخدمها Discourse افتراضيًا في إعداد الموقع svg icon subset ثم فرض تحديث المتصفح لرؤية التغييرات المطبقة.
   النتيجة:
   
   سيتم استبدال جميع أيقونات “link” بـ “external-link-tab”.
   إذا تم استخدام أيقونة لعناصر متعددة في صفحات أخرى، مثل الشارات، فسيتم استبدال الأيقونة هناك أيضًا.

---

استثناءات

لاحظ أنه يوجد بالفعل مكون سمة يسمح لك بـ تغيير أيقونة الإعجاب. أنا أستخدم هذه الحالة كمثال

أيقونة “heart”، المستخدمة لمنح الإعجاب، مبرمجة بشكل ثابت بأسماء أخرى ('d-liked' و 'd-unliked') ويجب التعامل معها بشكل مختلف عن الأيقونات الأخرى، لذا لتغيير أيقونة إلى أيقونة :

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

ولكن في صفحة الشارات لا تزال الأيقونة “heart”:

لذا لتغييرها في تلك الصفحة نضيف:

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

مثال آخر:

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

يغير أيقونة المراقبة:

شاهد هنا استثناءات أخرى تغطي حالة التتبع، التوسيع/الطي، الإشعارات والإعجابات بالطبع.

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",
};

المرجع: discourse/icon-library.js at main · discourse/discourse (github.com)

---

لا تتردد في إنشاء مكونات سمة أخرى ومشاركتها في فئة Theme component الخاصة بنا!

---

يتم التحكم في إصدار هذه الوثيقة - اقترح تغييرات على github.