أيقونة Discourse

:discourse2: ملخص يتيح لك أيقونات Discourse استخدام أيقونات من مجموعة أيقونات SVG الخاصة بك في المنشورات.
:eyeglasses: معاينة معاينة على منشئ ثيمات Discourse
:hammer_and_wrench: رابط المستودع https://github.com/discourse/discourse-icon
:open_book: جديد في ثيمات Discourse؟ دليل المبتدئين لاستخدام ثيمات Discourse

تثبيت مكون هذا الموضوع

الميزات

طريقة الاستخدام:

[wrap=icon id=square][/wrap]

مثال:
هذه هي أيقونة وأيقونة .

هذه هي أيقونة [wrap=icon id=far-square][/wrap] وأيقونة [wrap=icon id=pencil][/wrap].

ملاحظة: إذا لم تظهر الأيقونة، فهذا يعني أنها غير موجودة في مجموعتك. إذا كنت مسؤولاً، يمكنك إضافتها في إعدادات موقعك: مجموعة أيقونات SVG.


:discourse2: هل تستضيفها معنا؟ تتوفر مكونات المواضيع للاستخدام في خططنا القياسية، والتجارية، والمؤسسية.

31 إعجابًا

رائع! هذا أيقوني!

(لدى meta العديد من السمات، ولكن لحسن الحظ، بفضل @kris.kotlarek، لدينا زر “إضافة إلى جميع السمات”… يجب أن نرتب التقدم هناك، لأن الأمر يستغرق بعض الوقت حتى يعمل سحره)

13 إعجابًا

نعم، لم أرد إضافتها للجميع في الوقت الحالي، حيث أنهيت ترميزها للتو :grin: لكنني سأفعل ذلك الآن

تعديل: آه، تم بالفعل

10 إعجابات

شكرًا لك، هذا ممتع للغاية! :sunglasses:

لم أتعامل أبدًا مع وسوم BB، ولا قمت بترميز FontAwesome يدويًا، لذا بدا لي دائمًا غريبًا استخدام زوج وسوم فارغ. هل هذا باتباع العرف الشائع، أم هناك سبب تقني لاستخدام أزواج الوسوم؟ أيضًا، هل يمكن أن يكون هناك محتوى بينها، وهل يؤثر ذلك على النص؟

3 إعجابات

هناك أسباب متعددة هنا.

أولاً، عندما قمت بكتابة ميزة BBCode للالتفاف، طلب @sam مني صراحةً دعم 3 تنسيقات:

[wrap=foo][/wrap]
[wrap=foo]bar[/wrap]
[wrap=foo]
bar
[/wrap] 

تم ذلك لضمان الاتساق مع استخدامنا الحالي لـ BBCode في Discourse.

كان بإمكاني استخدام صيغة أفضل مثل: [icon=times]، لكن في هذه الحالة سيكون الأمر يتطلب إضافة (plugin) وليس مكونًا للسمة (theme component).

كم experiment، أعتقد أن الوضع الحالي مقبول، وإذا بدأ الناس في استخدامه بكثرة، يمكننا التفكير في إنشاء إضافة تقوم بذلك باستخدام صيغة أكثر إيجازًا.

فكرة أخرى خطرت ببالي هي إضافة واجهة برمجة تطبيقات (API) لإضافة رموز الإكمال التلقائي في المحرر، تمامًا كما نفعل مع المستخدمين/التصنيفات/الرموز التعبيرية… لكنني أخشى أن يكون ذلك كابوسًا إذا اختارت مكونات متعددة رموزها الخاصة…

5 إعجابات

أوه! أحتاج إلى إضافة دعم لرمز BBCode آخر، وقد ظننت أنني سأستخدم هذا كنقطة انطلاق، لكنك تقول إن معالجة عناصر التغليف تتم في النواة الأساسية، وهو ما يفسر سبب عدم قدرتي على معرفة كيفية معالجتها من قِبل مكون المظهر الخاص بك.

حلّي الحالي هو استخدام مكون الكلمات المرتبطة واستخدام تعبير نمطي غير أنيق، لكنني ما زلت أواجه صعوبة في إضافة الفئات اللازمة إلى الروابط.

3 إعجابات

نعم، اقرأ هذا الموضوع لمعرفة المزيد:

4 إعجابات

حسنًا، لقد راجعته أكثر من مرة. وطبّقت كود المكوّن الخاص بك وشرعت في دراسته لساعات، محاولًا فهم ما إذا كان الأمر يتعلق بعدم فهمي لـ JavaScript أم لـ Ember. هل لا يمكنني إضافة وسم [foo] دون إضافة ملحق؟ أم يمكنني بطريقة ما استبدال wrap في كودك بـ foo لتغطية كود BBCode الجديد الخاص بي؟

إعجاب واحد (1)

لا، لا يمكنك ذلك. لأن جزءًا منه يتم على جانب الخادم. إذا كنت تريد كود BBCode مخصصًا خاصًا بك، فستحتاج إلى كتابة إضافة والنظر في كيفية تنفيذ wrap على سبيل المثال:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/d-wrap.js.es6

5 إعجابات

شكرًا لك! بدأ الأمر يكتسب معنى. لم أواجه كل هذا الصعوبة في تعلم لغة جديدة منذ C++ و Objective Pascal في عام 1990.

إن اختراقي الحالي باستخدام التعبيرات النمطية يعمل تقريبًا. سأحتاج إلى اتخاذ قرار بشأن اتباع مسار الإضافات أو الالتزام باختراقي (مع معرفة كيفية إضافة الفئات).

على الأقل، فهمت الآن لماذا لا يمكنني العثور على ذلك الـ wrap في مكون السمة!

3 إعجابات

يمكنني التفكير في بعض الترتيبات الممكنة للصيغة لإضافتها إلى إضافة wrap لهذا الغرض:

[wrap=foo /]
[wrap/=foo]

(مقلِّدةً وسوم الإغلاق الذاتي في XML) لكن كلاهما قبيح إلى حد ما :confused:

هل لدى أي شخص أفكار رائعة لشيء يبدو مقبولًا؟

3 إعجابات

لا, لست من المعجبين الكبيرين بهذه :confused:

6 إعجابات

لقد وجدت خطأً كبيراً…

إذا استخدمت غلاف أيقونة ثم قمت بتمييز الاقتباس، فإن الصورة الناتجة تتضخم بشكل كبير:

  • استخدم غلاف أيقونة في جملة في منشور. مثال: This is an icon [wrap=icon id=far-check-square][/wrap]
  • قم بتمييز النص ذي الصلة و"اقتبس".
  • الأيقونة تصبح كبيرة جداً في المقتطف المقتبس.

هذا ما تبدو عليه الصيغة عند اقتباسها:

[quote="JammyDodger, post:1, topic:294, full:true"]
This is an icon ![](/svg-sprite/grumpy.jammydodger.monster/icon/222222/far-check-square.svg)
[/quote]

This is a reply where it gets massive

على الرغم من أن اقتباسها باستخدام فقاعة الكلام في شريط التنسيق يعمل بشكل جيد.

4 إعجابات

كيف يمكنك تمييز الأيقونة باقتباس؟ في موقع الاختبار الخاص بي، يتم تخطي الأيقونة.

لست متأكدًا؟ أنا فقط أستخدم الماوس.

ما هو المتصفح الذي تستخدمه؟
باستخدام الماوس، اختبرت باستخدام Chrome و Firefox، ولم أتمكن من تحديد الأيقونة. :thinking:

تعديل:
إذا قمت بتضمين أيقونة غير متوفرة في المجموعة الفرعية الحالية، فسيؤدي ذلك إلى إنشاء صورة SVG بدلاً من ذلك.
بعد ذلك، يمكنك اقتباسها.

إعجابَين (2)

هل يمكنك تقديم مثال؟ تعرض لقطة الشاشة الخاصة بك علامة اختيار محددة ولا توجد لدي مشكلة في تحديدها في نسختي التجريبية (بالإضافة إلى أيقونات أخرى ربما لا يستخدمها Discourse مثل x-ray).

إعجابَين (2)

أرى المشكلة. يبحث المكون من خلال النظر فيما إذا كان هناك غلاف بفئة d-wrap؛ ولكن لا يوجد غلاف إذا لم يكن الرمز المقدم من المجموعة الفرعية. يقوم بإنشاء صورة كـ SVG بدلاً من ذلك.

على سبيل المثال:

SVG، رمز داخل المجموعة الفرعية

صورة كـ SVG، رمز ليس ضمن المجموعة الفرعية

إذا قمت باقتباس الصور، فلن يقوم المكون بأي شيء، حيث لا يوجد غلاف (ويتم تحويل الصورة إلى ترميز markdown مما ينتج عنه صورة بدون أي فئة)

إعجاب واحد (1)

هل هذا يعني أنني بحاجة إلى حقل svg_icons في settings.yml متاح في السمة الخاصة بي؟ أم يمكنني استخدام أي حقل svg_icons متاح من أي مكون سمة ممكّن أيضًا؟ وإذا كان الأمر كذلك، فهل سيكون إضافة هذا الحقل إلى مكون السمة هذا منطقيًا؟

svg_icons:
  default: ''
  type: 'list'
  list_type: 'compact'

لأنه في تجربتي، يتم تحويل أيقونات SVG إلى علامات <img>، ولا ترث currentColor عند تغيير مخطط الألوان:
قارن فقرة المثال:

إعجابَين (2)

هل يمكن تحسين العرض في الوضع المظلم؟

أود أن أحصل على نفس الألوان الموجودة في الواجهة:

3 إعجابات