ملصقات Discourse

Don · 3 أكتوبر 2023، 11:19ص


	الملخص	إضافة ملصقات
	المعاينة	Theme Creator
	المستودع	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub
	وجدته مفيدًا؟	> ./support --coffee
	دليل التثبيت	كيفية تثبيت موضوع أو مكوّن موضوع
	جديد على مواضيع Discourse؟	دليل المبتدئين لاستخدام مواضيع Discourse

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

Discourse Stickers v1.0

مرحبًا

باستخدام مكوّن هذا الموضوع، يمكنك إضافة ملصقات إلى المنشورات ورسائل الدردشة…

كيف يعمل؟

يضع زرًا في المُصيغ (Composer) يفتح نافذة الملصقات.

نافذة الملصقات

عند النقر على ملصق، سيتم إضافته إلى المُصيغ.
سيتم وضع كود Markdown للصورة داخل [wrap=sticker] img [/wrap] مما يعني أن صور الملصقات يمكن استهدافها بشكل منفصل عن الصور الأخرى.

تنتقل الملصقات دائمًا إلى سطر جديد وتتضمن العنوان والحجم. الحجم الآن ثابت عند 180x180 بكسل. كل ملصق له ظل مما يجعل الصورة تبدو أكثر تشابهًا مع الملصقات…
في المُصيغ والمنشورات، يتم إخفاء معلومات التحويم (hover) عبر CSS.

كيفية الإعداد؟

أولاً، تحتاج إلى رفع الصور التي تريد استخدامها كملصقات. ما عليك سوى رفع هذه الصور في منشور موضوع.
سنعمل مع هذه الصور حيث نحتاج إلى عنوان URL للصورة وعنوان URL لـ Markdown.

مثال:
رفعت الصورة في منشور. أستخدم نسخة optimized من عنوان URL للصورة. يمكن العثور عليها هنا لكن يمكنك استخدام أي عنوان URL للصورة.

عنوان URL لـ Markdown للرفع داخل القوسين

الإعدادات

صور الملصقات
في إعداد صور الملصقات، يمكنك ضبط الملصقات…

العنوان: هذا هو عنوان الصورة والنص البديل. سيتم وضعه أيضًا في عنوان كود Markdown.

الإيموجي: سيتم وضعه في الزاوية العلوية اليمنى لكل ملصق في نافذة الملصقات.

previewUrl: هذه هي الصورة المعروضة في نافذة الملصقات.

markdownUrl: هذا هو عنوان Markdown للصورة المرفوعة سابقًا.

Discourse Stickers v2.0

مرحبًا

باستخدام مكوّن هذا الموضوع، يمكنك إضافة ملصقات إلى المنشورات والردود ورسائل الدردشة.

تقدم الإصدار 2.0 مدير ملصقات مصممًا بشكل جديد مع رفع صور أصلي، ومجموعات ملصقات، وإمكانية رؤية مبنية على الفئات، وتحكم محدد للدردشة.

كيف يعمل؟

يضيف المكوّن زرًا للملصقات في المُصيغ. بالنقر عليه تفتح منتقي الملصقات.

عند اختيار ملصق، يتم إدراجه مباشرة في المُصيغ.

بالنسبة للمنشورات والردود العادية، يتم تغليف الملصقات في:

[wrap=sticker]![عنوان الملصق|180x180](الصورة)[/wrap]

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

الملصقات المنشورة غير قابلة للنقر ولن تفتح صندوق Discourse الخفيف (lightbox).

منتقي الملصقات

يدعم منتقي الملصقات المجموعات عندما يكون لديك مجموعة كبيرة من الملصقات.

إذا تم تكوين مجموعات متعددة، يتم عرض شريط تصفية في أعلى المنتقي.

الملصقات بدون مجموعة يتم وضعها تلقائيًا تحت أخرى.

إذا لم تكن هناك ملصقات متاحة للسياق الحالي، يعرض المنتقي حالة فارغة.

كيفية الإعداد؟

تمت إعادة تصميم إعداد الملصقات بالكامل في الإصدار 2.0.

لم يعد من الضروري رفع الصور إلى موضوع أولاً أو نسخ عناوين URL للصور يدويًا.

ما عليك سوى الذهاب إلى إعدادات المكوّن وإضافة ملصق. يتيح لك حقل الصورة رفع الملصق مباشرة.

إعدادات الملصق

يمكن الآن لكل ملصق أن يمتلك الخصائص التالية:

العنوان

اسم الملصق. يُستخدم كـ tooltip ونص بديل للملصق.

المجموعة

اختياري. استخدم المجموعات لتنظيم ملصقاتك وتصفيتها في المنتقي.

اتركه فارغًا لوضع الملصق تحت أخرى.

شارة الإيموجي

اختياري. يعرض إيموجي صغيرًا في زاوية الملصق.

يمكنك استخدام إيموجي حقيقي أو رمز اختصار Discourse مثل :heart: أو :smile:.

الصورة

صورة الملصق.

ارفع الصورة مباشرة باستخدام الإعداد. تُستخدم نفس الصورة لكل من المنتقي والملصق المنشور.

الفئات

اختياري. قيد الملصق على فئات محددة.

إذا تم اختيار فئات، لن يظهر الملصق إلا في مُصيغ المنشور/الرد العادي عندما يتم اختيار إحدى تلك الفئات.

اتركه فارغًا لجعل الملصق متاحًا في جميع الفئات.

لا يؤثر هذا الإعداد على الدردشة.

إخفاء من الرسائل المباشرة

عند التفعيل، لن يكون الملصق متاحًا في دردشات الرسائل الخاصة/المباشرة.

قنوات الدردشة

اختياري. قيد الملصق على قنوات دردشة عامة محددة.

أدخل معرفات القنوات مفصولة بفواصل.

على سبيل المثال، إذا كان عنوان URL للقناة هو:

/chat/c/channel-name/123

استخدم:

123

اتركه فارغًا لجعل الملصق متاحًا في جميع قنوات الدردشة العامة/الفئة.

الترقية من الإصدار v1.x

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

يتضمن الإصدار 2.0 هجرة للإعدادات تقوم تلقائيًا بتحويل تكوين sticker_images القديم إلى التنسيق الجديد.

تحافظ الهجرة على:

عناوين الملصقات
شارات الإيموجي
صور الملصقات المرفوعة الموجودة مسبقًا

تُحل الصور المرفوعة الموجودة مسبقًا مرة أخرى إلى رفعات Discourse الأصلية وتُملأ في حقل الصورة الجديد.

لم تعد إعدادات previewUrl و markdownUrl القديمة مطلوبة.

ما عليك سوى تحديث المكوّن وسترى أن ملصقاتك الموجودة قد تم نقلها تلقائيًا.

ملصقات Discourse Theme component

ملصقات Discourse الإصدار 2.0 يُعد هذا الإصدار تحديثًا كبيرًا نسبيًا للمكون. بالإضافة إلى عدد من التحسينات الداخلية، تم إعادة تصميم إعدادات الملصقات لتسهيل إدارة مجموعات الملصقات الكبيرة بشكل كبير. [Screenshot 2026-08-14 at 16.28.56] [Screenshot 2026-08-14 at 16.29.18] [Screenshot 2026-08-14 at 16.29.25] [Screenshot 2026-08-14 at 16.29.07] إعادة تصميم كاملة لإعدادات الملصقات أكبر تغيير في الإصدار 2.0 هو إعدادات الملصقات نفسها. كانت النسخة القديمة تخزن الملصقات كإعداد JSO…

Canapin · 3 أكتوبر 2023، 11:52ص

مرحباً دون
عمل رائع! ألقيت نظرة سريعة
تعد إدارة الملصقات أمرًا شاقًا بعض الشيء - خاصةً جزء المعاينة - حيث لا يوجد تخطيط أو ميزة مخصصة للقيام بذلك (كما هو الحال مع الصور الرمزية والرموز التعبيرية المخصصة)، ولكني أتفهم أن الأمر سيتطلب المزيد من العمل.
تم تعطيل فلتر الظل عند توقف ملف GIF، ولا يظهر كخلفية مربعة على الصورة الوسطى هنا (ملف jpg مستطيل يؤدي إلى تشغيل نافذة منبثقة):
chrome_k71dGHbeLH
تأثير الفلتر رائع حقًا، ولكني سأضعه كإعداد اختياري
يستخدم منتقي الملصقات محتوى مبرر مثل:

XXX
 X

لكن أعتقد أنني أفضل المحاذاة إلى اليمين:

XXX
X

رأي شخصي جدًا بالطبع

Don · 3 أكتوبر 2023، 2:10م

شكراً على ملاحظاتك @Canapin

لقد أضفت إعدادًا جديدًا لهذا…
Screenshot 2023-10-03 at 16.04.17

تم إنجاز هذا أيضًا… أفضل بكثير

Don · 3 أكتوبر 2023، 4:54م

تحديث: https://github.com/VaperinaDEV/discourse-stickers/commit/b6c30eb3978fb74c85a95895feb7b2181fe7d

mattdm · 28 أكتوبر 2023، 3:53م

هل سيكون من الممكن الحد من ذلك لفئات معينة؟ (وبالمناسبة، هل سيكون هناك ملصقات مختلفة لكل فئة؟)

hoangphuctran93 · 28 أكتوبر 2023، 4:37م

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

deltaR · 9 نوفمبر 2023، 2:12م

هل يمكنني أن أسأل ماذا علي أن أفعل لوضع الملصق في سطر النص، وليس في سطر جديد؟ (لقد قمت بعمل fork لهذا المستودع)

Don · 9 نوفمبر 2023، 4:31م

مرحباً

نعم، عليك إزالة \n من بداية ونهاية هذا السطر.

github.com/deltaR-3k/discourse-stickers

javascripts/discourse/components/modal/sticker.js

main


      
          @tracked stickerImages = JSON.parse(settings.sticker_images);
          @service site;
          @service capabilities;
          
          @action
          pick() {
            let stickerImage = document.querySelectorAll(".sticker-pack span.sticker-holder img.sticker:hover");
            stickerImage.forEach((sticker) => {
              sticker.classList.add("picked");
              sticker.addEventListener("animationend", () => {
                let markupComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                let markupChatComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                if (this.args.model?.customPickHandler) {
                  this.args.model.customPickHandler(markupChatComposer);
                } else {
                  getOwner(this).lookup("service:app-events").trigger("composer:insert-text", markupComposer);
                }
                this.args.closeModal();
              });
            });
          }

مرحباً @mattdm آسف على التأخير. نعم، أعتقد أنه من الممكن عرض الزر في المؤلف لكل فئة. أحتاج إلى التحقق من ذلك.

المكون معقد بالفعل بعض الشيء للإعداد. لست متأكداً من هذا.

مرحباً نعم، هذا مستوى آخر. لست متأكداً من إمكانية ذلك الآن مع هذه البنية.

deltaR · 9 نوفمبر 2023، 5:03م

شكراً على الرد!
ولكن بعد التغيير، لا يمكن عرض الملصق، هكذا

Don · 9 نوفمبر 2023، 5:13م

أوه، عذراً، أعتقد أنه يجب عليك إزالة [wrap=sticker] و [/wrap] أيضاً. سيؤدي ذلك إلى عرض الصورة بشكل مضمن، لذا من المحتمل ألا تكون مفقودة.

[wrap=sticker] مخصص فقط لإضافة بعض التنسيق إلى صورة الملصق.

github.com/deltaR-3k/discourse-stickers

common/common.scss

f28fb4b9c


      
          .d-wrap[data-wrap="sticker"] {
            @include user-select(none);
            img {
              width: 75px !important;
              height: 65px !important;
              aspect-ratio: 75 / 65 !important;
              @if $stickers_shadow == "true" {
                filter: drop-shadow(2px 2px 2px rgba(var(--always-black-rgb), 0.8));
              }
            }
            .button-wrapper {
              display: none;
            }
            a.lightbox {
              .discourse-touch & {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                transition: filter 200ms;
                &:active {
                  filter: brightness(0.8);
                }

This file has been truncated. show original

deltaR · 9 نوفمبر 2023، 5:23م

حسنًا، العرض المضمن لا يمكنه استخدام [wrap=sticker]؟
لقد نجح الأمر، شكرًا!

ملاحظة: أتساءل عما إذا كان من الممكن إخفاء markdownUrl في Composer، نظرًا لأنه سيكون عنوان URL طويلاً ويشغل مساحة كبيرة؟

Don · 14 أغسطس 2026، 2:31م

ملصقات Discourse الإصدار 2.0

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

إعادة تصميم كاملة لإعدادات الملصقات

أكبر تغيير في الإصدار 2.0 هو إعدادات الملصقات نفسها.

كانت النسخة القديمة تخزن الملصقات كإعداد JSON يحتوي على قيم مثل:

title
emoji
previewUrl
markdownUrl

في الإصدار 2.0، تم استبدال ذلك بنوع الإعداد الأصلي objects في Discourse.

أصبح كل ملصق الآن كائنًا قابلًا للتكوين بخصائصه الخاصة:

العنوان - اسم الملصق / نص التلميح
المجموعة - تنظيم الملصقات في مجموعات بشكل اختياري
شارة الإيموجي - عرض إيموجي صغير في الزاوية بشكل اختياري
الصورة - رفع الملصق مباشرةً عبر الإعداد
الفئات - تقييد الملصقات لفئات Discourse محددة بشكل اختياري
إخفاء من الرسائل المباشرة - التحكم في ما إذا كان الملصق متاحًا في الرسائل المباشرة
قنوات الدردشة - تقييد الملصقات لقنوات الدردشة العامة المحددة بشكل اختياري

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

مجموعات الملصقات والتصفية

يمكنك الآن تعيين الملصقات إلى مجموعة.

عند توفر مجموعات متعددة، يعرض منتقي الملصقات شريط تصفية تلقائيًا في الأعلى.

يمكنك التبديل بين:

الكل
المجموعات الفردية
أخرى للملصقات التي لا تنتمي إلى أي مجموعة

يتم إنشاء التصفية ديناميكيًا من الملصقات المتاحة حاليًا للمستخدم.

ملصقات خاصة بالفئات

يمكن الآن تعيين الملصقات بشكل اختياري لفئات Discourse محددة.

إذا تم تكوين فئات للملصق، فسيظهر فقط في محرر المنشورات/الردود العادية عند تحديد إحدى تلك الفئات.

إذا لم يتم تكوين أي فئات، يظل الملصق متاحًا في كل مكان.

مزيد من التحكم في ملصقات الدردشة

يضيف الإصدار 2.0 مزيدًا من التحكم في توفر الملصقات في دردشة Discourse.

يمكنك الآن:

إخفاء ملصقات فردية من الرسائل المباشرة؛
تقييد الملصقات لقنوات الدردشة العامة المحددة؛
ترك إعداد القناة فارغًا لجعل الملصق متاحًا في جميع قنوات الدردشة العامة/الفئوية.

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

لم تعد الملصقات المنشورة قابلة للنقر

تُعامل الملصقات المنشورة الآن كصور غير تفاعلية.

لم تعد تفتح نافذة العرض المكبر (lightbox) في Discourse عند النقر عليها.

ينطبق هذا على كل من:

الملصقات في المنشورات العادية؛
الملصقات المنشورة في الدردشة.

الهدف هو جعل الملصقات تتصرف أكثر مثل محتوى الملصقات/التفاعلات الفعلية بدلاً من الصور المرفوعة العادية.

حالة فارغة أفضل

إذا لم تكن هناك ملصقات متاحة للسياق الحالي، يعرض المنتقي الآن حالة فارغة مناسبة بدلاً من عرض منتقي فارغ ببساطة.

على سبيل المثال، يمكن أن يحدث هذا عندما تمنع قيود الفئة أو الدردشة أي ملصق من أن يكون متاحًا.

يتم ترحيل إعدادات الملصقات الحالية

إحدى أهم أجزاء الإصدار 2.0 هي أن التثبيتات الحالية لا تحتاج إلى إعادة إنشاء مجموعة الملصقات الخاصة بها.

يتم ترحيل إعداد JSON القديم sticker_images تلقائيًا إلى تنسيق objects الجديد عند تحديث المكون.

تُحفظ عناوين الملصقات الحالية وقيم الإيموجي.

الأهم من ذلك، يتم أيضًا ترحيل صور الملصقات المرفوعة الحالية تلقائيًا.

لذا، إذا كان لديك بالفعل عشرات الملصقات مُكوّنة، فإن التحديث إلى الإصدار 2.0 لن يتطلب منك إعادة رفعها جميعًا.

لم تعد خاصية markdownUrl القديمة مطلوبة ولم يتم نقلها لأن حقل Image الجديد يمثل الرفع الفعلي في Discourse.

github.com/VaperinaDEV/discourse-stickers

FEATURE: Modernize Discourse Stickers (#5)

main ← v2.0

merged 02:27PM - 14 Aug 26 UTC

VaperinaDEV

+424 -126

Modernizes the component and significantly expands sticker management. ### Wh…at's included - Migrate `sticker_images` from the legacy JSON setting to Discourse's native `objects` setting. - Add native image uploads for stickers. - Add optional sticker groups with filtering in the picker. - Add category-based sticker visibility. - Add Chat-specific visibility controls for direct messages and channels. - Modernize the sticker modal to Glimmer. - Improve sticker selection by passing the selected sticker directly to the action. - Prevent published stickers from opening the lightbox. - Add a proper empty state when no stickers are available. - Add localization for the new UI and settings. - Add a settings migration that preserves existing sticker titles, emojis, and uploaded images when upgrading from the previous version. ### Migration Existing `sticker_images` configurations are automatically migrated when the component is updated. Legacy sticker image URLs are resolved back to their existing Discourse uploads, so existing stickers do not need to be uploaded again. The legacy `markdownUrl` property is no longer used because the new `image` property directly represents the sticker upload.

الموضوع		الردود	مرات العرض
Telegram-like stickers? Feature	8	1993	25 يناير 2024
Discourse Chat Plugin official , chat , included-in-core	43	34258	29 يوليو 2026
Image comparison slider Theme component	31	3898	6 يونيو 2026
Emoji Fluff Theme component	39	1725	28 نوفمبر 2025
MD Composer extras Theme component	70	9893	8 يوليو 2025