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

[Discourse]

This guide explains how to configure custom emojis on your Discourse site.

Required user level: Administrator

Configuring custom emoji

Want to change emoji for your Discourse site? Let’s take a look at how to configure custom emoji for your Discourse site, including selecting emoji sets, uploading new emoji, and adjusting emoji sizes.

Selecting an emoji set

Discourse comes with seven different emoji sets:

• Apple/International style
• Google style
• Twitter style
• Emoji One style
• Win10 style
• Google Classic
• Facebook Messenger

You can select an emoji set at /admin/config/emoji/settings?filter=emoji%20set along with other emoji-related settings.

Adding custom emoji

To add custom emoji:

1. Navigate to: Discourse Admin - Config - Emoji at /admin/config/emoji
2. You can:
   • Enter a name and click Add emoji to upload a photo as an emoji
   • Drag and drop up to 10 files into the Name field to bulk upload; filenames will be used as emoji names.

Resizing custom emoji

By default, all emoji are resized via CSS to 20x20, but this can be overridden with custom CSS. To maintain the correct aspect ratio and native size in posts, add the following 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;
}

To customize a specific emoji’s size, use:

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

For resizing emoji in chat messages and user status in chats:

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

Last edited by @martin 2025-01-23T05:07:38Z

Check document

Perform check on document:

[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?