تكوين الرموز التعبيرية المخصصة

[Discourse]

يشرح هذا الدليل كيفية تكوين الرموز التعبيرية المخصصة على موقع Discourse الخاص بك.

مستوى المستخدم المطلوب: مسؤول

تكوين الرموز التعبيرية المخصصة

هل تريد تغيير الرموز التعبيرية لموقع Discourse الخاص بك؟ دعنا نلقي نظرة على كيفية تكوين الرموز التعبيرية المخصصة لموقع Discourse الخاص بك، بما في ذلك اختيار مجموعات الرموز التعبيرية، وتحميل رموز تعبيرية جديدة، وضبط أحجام الرموز التعبيرية.

اختيار مجموعة الرموز التعبيرية

يأتي Discourse مع سبع مجموعات رموز تعبيرية مختلفة:

• نمط Apple/الدولي
• نمط Google
• نمط Twitter
• نمط Emoji One
• نمط Win10
• Google Classic
• Facebook Messenger

يمكنك اختيار مجموعة رموز تعبيرية على /admin/config/emoji/settings?filter=emoji%20set إلى جانب الإعدادات الأخرى المتعلقة بالرموز التعبيرية.

إضافة رموز تعبيرية مخصصة

لإضافة رموز تعبيرية مخصصة:

1. انتقل إلى: Discourse Admin - Config - Emoji على /admin/config/emoji
2. يمكنك:
   • إدخال اسم والنقر على Add emoji لتحميل صورة كرمز تعبيري
   • سحب وإفلات ما يصل إلى 10 ملفات في حقل Name للتحميل المجمع؛ سيتم استخدام أسماء الملفات كأسماء للرموز التعبيرية.

إعدادات الرموز التعبيرية

يمكنك الوصول إلى إعدادات الرموز التعبيرية على /admin/config/emoji/settings لتخصيص كيفية عمل الرموز التعبيرية على موقعك.

• enable_emoji - تمكين عرض واستخدام الرموز التعبيرية في مثيل Discourse الخاص بك. إذا تم تعطيله، فلن يتم عرض الرموز التعبيرية ولن يتمكن المستخدمون من الوصول إليها أو استخدامها في حقول النص.
• emoji_set - اختر النمط المفضل لديك للرموز التعبيرية. يمكن أن توفر مجموعات الرموز التعبيرية المختلفة مظاهر فريدة للرموز التعبيرية المعروضة على الموقع.
• max_emojis_in_title - الحد الأقصى المسموح به للرموز التعبيرية في عنوان الموضوع (الافتراضي: 1). إذا كانت القيمة المحددة صفرًا، فإنها تمنع استخدام أي رموز تعبيرية في عناوين المواضيع.
• enable_emoji_shortcuts - سيتم تحويل الوجوه المبتسمة النصية الشائعة مثل :) :p :( إلى رموز تعبيرية.
• emoji_autocomplete_min_chars - الحد الأدنى لعدد الأحرف المطلوبة لتشغيل نافذة الرموز التعبيرية المنبثقة للإكمال التلقائي (الافتراضي: 0).
• enable_inline_emoji_translation - تمكين الترجمة للرموز التعبيرية المضمنة (بدون أي مسافة أو علامات ترقيم قبلها).
• emoji_deny_list - لن تكون هذه الرموز التعبيرية متاحة للاستخدام في القوائم أو الاختصارات النصية.
• external_emoji_url - عنوان URL للخدمة الخارجية لصور الرموز التعبيرية (الافتراضي: https://emoji.discourse-cdn.com). اتركها فارغة لتعطيلها.
• discourse_reactions_enabled_reactions - يحدد قائمة بالتفاعلات الممكنة، ويُسمح بأي رمز تعبيري هنا. تشمل التفاعلات الافتراضية: القلب، الضحك، البكاء، الرأس المنفجر، التصفيق، كرة القصاصات الورقية، العناق، قبلة الشيف، 100، +1، الصاروخ، إعجاب شديد، discourse، والعينان.
• discourse_reactions_excluded_from_like - التفاعلات التي لا تُحتسب كتفضيل (Like). أي تفاعلات ليست في هذه القائمة ستُحتسب كتفضيل للشارات والتقارير وأغراض أخرى.
• discourse_reactions_allow_any_emoji - إذا تم تمكين هذا، فسيضيف زرًا يسمح للمستخدمين باختيار أي رمز تعبيري في أداة اختيار التفاعلات. سيُسمح للأعضاء باختيار أي رمز تعبيري، بما في ذلك الرموز التعبيرية المخصصة، للتفاعلات. لتحديد التفاعلات المتاحة، استخدم إعداد الموقع emoji_deny_list.

تغيير حجم الرموز التعبيرية المخصصة

بشكل افتراضي، يتم تغيير حجم جميع الرموز التعبيرية عبر CSS إلى 20x20، ولكن يمكن تجاوز ذلك باستخدام CSS مخصص. للحفاظ على نسبة العرض إلى الارتفاع والحجم الأصلي الصحيحين في المشاركات، أضف CSS التالي:

/* Make emoji normal size (don't force square) */
div.topic-post img.emoji[src*="uploads"], 
div.d-editor-preview img.emoji[src*="uploads"], 
div.emoji-modal img.emoji[src*="uploads"], 
div.d-editor-textarea-wrapper img.emoji[src*="uploads"], 
div.title-wrapper img.emoji[src*="uploads"], 
td.main-link img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

لتغيير حجم رمز تعبيري محدد، استخدم:

img.emoji[title=":youremoji:"] { 
    height: XXpx; 
    width: YYpx; 
}

لتغيير حجم الرموز التعبيرية في رسائل الدردشة وحالة المستخدم في الدردشات:

div.chat-message-text img.emoji[src*="uploads"], 
span.user-status-message img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

[Roi]

لاحظت أن الرموز التعبيرية/الابتسامات المخصصة تظهر بحجم 20x20 في رسائل الدردشة وفي حالة المستخدم في الدردشات. لقد قمت بحلها بهذه الطريقة:

div.chat-message-text img.emoji[src*="uploads"] { /* رسائل الدردشة */
    width: auto;
    height: auto;
}

span.user-status-message img.emoji[src*="uploads"] { /* حالة المستخدم في الدردشة */
    width: auto;
    height: auto;
}

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

[Vladislav_Jandric]

لقد قمت بتخصيص رموز تعبيرية جديدة، لكنني لا أستطيع العثور عليها بين الرموز التعبيرية الأخرى.

[ondrej]

هل قمت بالتمرير إلى أسفل مربع اختيار الرموز التعبيرية؟ هذا هو المكان الذي توجد فيه مجموعات الرموز التعبيرية المخصصة لديك.

[Moin]

@Discourse

تأتي Discourse مع سبع مجموعات مختلفة من الرموز التعبيرية:

• نمط Apple/International
• نمط Google
• نمط Twitter
• نمط Emoji One
• نمط Win10
• Google Classic
• Facebook Messenger

لقد تغيرت هذه:

Emojis update

For licensing reasons, we had to change the emoji sets. The following existing sets have been migrated automatically to a new set: apple → twemoji facebook_messenger → unicode google → noto google_classic → noto win10 → fluentui emoji_one → twemoji twitter → twemoji On top of fluent ui, noto, twemoji, and unicode, we also added the openmoji set. Admins can change the set at /admin/config/emoji/settings?filter=emoji_set If there’s an existing open-source set you would like to see available i…

[pacharanero (Marcus Baw)]

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

لدي مجموعة صغيرة من الرموز التعبيرية المخصصة التي أرغب في تحميلها إلى جميع منصات Discourse الخاصة بي. بعضها عبارة عن أيقونات FontAwesome، والتي أود أن تكون متاحة كـ :icon-name: في منشورات المؤلف حتى أتمكن من شرح أيقونات واجهة مستخدم Discourse للمستخدمين. والبعض الآخر لمجرد المتعة مثل علم يوركشاير. لدي هذه الرموز في مجلدات (ويمكن أن تكون متاحة بسهولة عبر الإنترنت في مستودع GitHub على ما أعتقد).

أود أن أتمكن من تحميل هذه المجلدات بأكملها، دفعة واحدة، إلى واجهة المستخدم الخاصة بالرموز التعبيرية المخصصة. في الوقت الحالي، يحترم الحد الأقصى للتحميلات إعداد simultaneous_uploads (“الحد الأقصى لعدد الملفات التي يمكن سحبها وإفلاتها في المؤلف”) في إعدادات الموقع، والذي يقتصر على قيمة قصوى تبلغ 20 (خطأ: “simultaneous_uploads: يجب أن تكون القيمة بين 0 و 20.” إذا حاولت زيادتها، حتى مؤقتًا).

لقد بحثت باهتمام في إعداد الرموز التعبيرية الآخر external-emoji-url، والذي يسمح بتعيين عنوان URL لمجموعة رموز تعبيرية خارجية، ولكن للأسف هذا يستبدل جميع الرموز التعبيرية “القياسية”، وهو ما لا أريد أن أفقده.

كل ما أحتاجه حقًا هو أن يعمل تحميل المجلد للرموز التعبيرية المخصصة كما هو الحال حاليًا بالنسبة للرموز التعبيرية المخصصة الفردية. بدلاً من ذلك، إذا لم يكن هناك حد لعدد التحميلات المسموح بها (ربما يمكن إرسال مهمة التحميل إلى SideKiq لإنجازها بشكل غير متزامن، وإرسال رسالة خاصة إلى المسؤولين عند الانتهاء، كما هو الحال بالنسبة للدعوات المجمعة).

لقد بحثت في استخدام واجهة برمجة تطبيقات REST الخاصة بـ Discourse لهذا الغرض، لكن الرموز التعبيرية المخصصة غير معروضة عبر واجهة برمجة تطبيقات REST. يتم عرض التحميلات في واجهة برمجة التطبيقات، وقد قمت بتشغيل هذا، ولكن حتى إذا كنت تستخدم نوع custom_emoji للتحميل، فإنه لا يظهر في القائمة.

أتساءل فقط عن رأي المجتمع في أفضل طريقة للمضي قدمًا:

• مهمة Rake التي تعمل على أتمتة إنشاء الرموز التعبيرية المخصصة المجمعة؟
• هل يتم ذلك في وحدة تحكم Rails؟
• تغيير حدود تحميل واجهة مستخدم المسؤول للسماح بتحميل عدة مئات من التحميلات دفعة واحدة؟
• إضافة “تحميل المجلد” إلى واجهة مستخدم المسؤول؟
• جعل الرموز التعبيرية المخصصة شيئًا يمكنني نشره كمكون للسمة يمكنني إضافته من عنوان URL الخاص بـ GitHub؟ (أحب بساطة هذا الخيار)
• السماح بعناوين URL متعددة للرموز التعبيرية الخارجية حتى أتمكن من الحصول على مجموعة رموز تعبيرية ورموز تعبيرية مخصصة (ربما يتم تقديمها من مستودع صفحات GitHub)
• تجميع مستودع واحد “رموز تعبيرية ورموز تعبيرية مخصصة” يمكنني معالجته عبر عنوان URL؟

أو - هل هناك طريقة أخرى لجعل جميع أيقونات FontAwesome التي تستخدمها Discourse في واجهة المستخدم الخاصة بها متاحة في المؤلف باستخدام بناء الجملة :icon-name:؟ في الواقع، يتعلق الجزء الأكبر مما أريد القيام به بهذا الأمر. سيؤدي إعداد الموقع الذي يمكّن أيقونات واجهة المستخدم من أن تكون متاحة في المؤلف إلى تحقيق 90٪ من هدفي.

[JammyDodger]

@pacharanero

في الواقع، الغالبية العظمى مما أريد القيام به يتعلق بهذا. إعداد موقع يتيح توفر أيقونات واجهة المستخدم في المنشئ سيقربني 90٪ من هدفي.

لقد استخدمت المكون المظلي Discourse Icon لحالة استخدام مماثلة، إذا كان ذلك مفيدًا؟

مثال من الموضوع:

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

هذه هي أيقونة وأيقونة .

[pacharanero (Marcus Baw)]

شكرًا @JammyDodger هذا مفيد وبالتأكيد خيار سأفكر فيه، على الرغم من أن تجربة المستخدم لصيغة [wrap=icon id=icon-name][/wrap] ليست جيدة مثل :icon-name:.

أحد عيوب طريقة Discourse Icon هو أنني يجب أن أضيف يدويًا قائمة بجميع الرموز التي أريد استخدامها في إعداد الموقع svg icon subset. ولكن على الأقل يمكن القيام بذلك دفعة واحدة عن طريق النسخ واللصق من قائمة في ملف نصي.

[Moin]

[اقتباس=“pacharanero، المشاركة: 34، الموضوع: 23365”]
اشرح أيقونات واجهة مستخدم Discourse للمستخدمين
[/اقتباس]

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

[pacharanero (Marcus Baw)]

@Moin

جميع الأيقونات المستخدمة في المنتدى متاحة بالفعل.

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

أريد فقط أن أتمكن بسهولة من إخبار الأشخاص، على سبيل المثال، أنه لإضافة تاريخ ووقت مدرك للمنطقة الزمنية إلى منشور، يستخدمون زر :calendar-days: في شريط أدوات المؤلف. ولكن عندما أبحث في الرموز التعبيرية/الأيقونات المضمنة، فإن أقرب شيء يمكنني الحصول عليه هو .

[Moin]

إنهم يعملون مع بناء الجملة wrap وأيقونة Discourse دون إضافتها إلى svg icon subset.
يشير الرد إلى تعليقك بأنه من غير المريح الاضطرار إلى إضافة جميع الأيقونات.

@pacharanero

أحد عيوب نهج أيقونة Discourse هو أنه يتعين عليّ إضافة قائمة بجميع الأيقونات التي أرغب في استخدامها يدويًا في إعداد الموقع svg icon subset.

---

ربما سيعمل استخدام #watched-words لاستبدال :calendar-days: بـ [wrap=icon id=calendar-days][/wrap]

[pacharanero (Marcus Baw)]

[اقتباس=“Moin, post:39, topic:23365”]
إنها تعمل مع صيغة الالتفاف ورمز ديسكورس دون إضافتها إلى svg icon subset.

كانت الإجابة تشير إلى تعليقك بأنه من العيوب أنه عليك إضافة جميع الرموز.
[/اقتباس]

آه، حسنًا، شكرًا واعتذاراتي عن سوء فهمي. هذا رائع. لذا يمكنني استخدام في أي مكان باستخدام صيغة الالتفاف! كل يوم هو يوم دراسي في ديسكورس!

الجزء الوحيد المفقود هو القدرة على البحث بسهولة عن اسم ديسكورس للرمز الذي أحتاجه، ولكن أعتقد أنه يمكنني دائمًا استخدام متصفح المطورين للعثور على اسم d-icon- وتعديله وفقًا لذلك. أو موقع FontAwesome.

شكرًا @Moin

[Roi]

حدث تغيير منذ آخر مرة قمت فيها بتحديث Discourse (منذ بضعة أيام).

بدلاً من

يبدو الآن

عندما أتحقق من CSS، يوجد عنصر style.element (لذلك نمط داخل HTML لهذه الرموز التعبيرية) aspect-ratio: 20 / 20; وإذا قمت بتعطيله، تبدو الرموز التعبيرية كما ينبغي.

ماذا أفعل؟

(بالمناسبة، “Choker” لا علاقة له بالموضوع. إنه يتعلق بالغوص وليس بأشياء أخرى وهو موجود فقط لرؤية حجم النص في المنشور.)

[Steven]

يمكنك إضافة هذه الأسطر من CSS في السمات الخاصة بك

.emoji-custom {
    aspect-ratio: unset !important;
}

[Roi]

عظيم شكراً لك، لقد نجح الأمر!

هل لي أن أسأل:

ما هو الغرض من ضبط نسبة العرض إلى الارتفاع في الإصدار الأخير؟

ولماذا لم يتم تضمين هذا الـ CSS، وكذلك الكود المذكور أعلاه، في Discourse الأساسي؟ هل هذا يكسر شيئًا آخر أم أن عددًا قليلاً جدًا من الأشخاص يستخدمون الرموز التعبيرية/الابتسامات المخصصة؟

[Steven]

أنا بصراحة لا أعرف، أعتقد أن الأمر يتعلق بهذا النقاش

Add lazy loading for emojis

Profile pictures and image elements in posts get lazyloaded by having the attribute loading="lazy" set. Emojis are missing out on this. <img src="https://emoji.discourse-cdn.com/twitter/sloth.png?v=12" title="" class="emoji" alt=""> I could not find the location in the sources where the emoji tags are generated. Are emojis “baked” into the posts?