مكونات مخصصة -- إضافة زر أو نص في أي منفذ إضافي (outlet) للمكون الإضافي

[pfaffman (Jay Pfaffman)]

	ملخص	أضف زرًا أو نصًا في أي مكان
	المستودع	https://github.com/literatecomputing/discourse-custom-components
	دليل التثبيت	كيفية تثبيت سمة أو مكون سمة
	جديد في سمات Discourse؟	دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

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

لمعرفة أماكن وجود منافذ المكونات الإضافية، استخدم Introducing Discourse developer toolbar للعثور عليها. إذا لم تكن تعرف ما هو منفذ المكون الإضافي، يمكنك إلقاء نظرة على https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727، ولكن هذا المكون يسمح لك، مع بعض القيود، بلصق نص في أي منفذ مكون إضافي دون برمجة أو فهم حقيقي لما هو منفذ المكون الإضافي.

بدأت في تطوير هذا المكون الإضافي لشخص أراد عرض زر “انقر فوق هذا الزر للاشتراك حتى تتمكن من إرسال رسائل خاصة” على ملفات تعريف المستخدمين وبطاقات المستخدمين. أرادوا أن يظهر الزر إذا لم يتمكن المستخدم من إرسال رسائل خاصة. نظرًا لأنني لست دائمًا ذكيًا كما أعتقد، فقد كتبت المكون باستخدام المجموعات لتحديد متى يتم عرض الزر. كانت إحدى مشكلات هذا النهج هي أن الموظفين لم يكونوا في مجموعة المشتركين، لذلك سيحصلون على زر “عليك الاشتراك” على الرغم من أنهم يستطيعون إرسال رسائل خاصة. بالإضافة إلى ذلك، كانت المجموعة مخفية، لذلك كان من المستحيل استخدامها في مكون سمة على أي حال. لقد أعدت كتابة مكون السمة هذا لاستخدام currentUser.can_send_private_messages لتحديد ما إذا كان سيتم عرض الزر.

لمن هذا؟

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

كيف يساعد المطورين

تحتوي هذه السمة على بعض الأمثلة البسيطة لكيفية:

• استخدام Objects type for theme setting
• استخدام api.renderInOutlet (كما هو موضح هنا للصق مكون Glimmer في منفذ يتم التحكم فيه بواسطة إعداد بدلاً من إنشاء ملف في دليل connectors
• كتابة مكون Glimmer بسيط يصل إلى currentUser
• تغليف مكون في قالب آخر (مضمن) ليتمكن من تمرير البيانات إليه
• عرض HTML عشوائي من إعداد السمة خاليًا من قيود Markdown - نعم، ربما

@Discourse

يمكنك استخدام أداة html-safe الخاصة بـ Ember هنا وستقوم بعرض HTML بدلاً من النص.

ولكن إذا كنت تحاول القيام بذلك داخل \u003ctemplate\u003e داخل ملف .gjs، فإنه يعمل بشكل مختلف قليلاً (مثل {{htmlSafe component.text}})

[NateDhaliwal]

تؤدي المسافة إلى جعل النص غير عريض.

---

مكون رائع!

[jrgong]

هل سيكون من الممكن إضافة عناصر نائبة إلى عناوين URL للأزرار، على سبيل المثال، لكي يحتوي عنوان URL على معرف الموضوع الذي يوجد به المستخدم؟

[pfaffman (Jay Pfaffman)]

لست متأكدًا تمامًا. إذا كانت لديك ميزانية، فسألقي نظرة.

ماذا سيفعل زرّك إذا كان لديه معرف الموضوع؟

إذا اكتشفت الأمر وأردت تقديم طلب سحب، فمن المحتمل أن أقبله.

@jrgong

هل سيكون من الممكن إضافة عناصر نائبة إلى عناوين URL للأزرار، على سبيل المثال، لكي يحتوي عنوان URL على معرف الموضوع الذي يوجد فيه المستخدم؟

أنا متأكد إلى حد كبير أن الإجابة هي لا، ولكن يمكنك استخدام الحل البديل الموضح هنا

@Discourse

يمكنك أيضًا استخدام مكونات Ember أخرى ككتل، ما عليك سوى استخدام الاسم الصحيح. على سبيل المثال، يتضمن النواة مكون Ember signup-cta، ويمكنك استخدامه في الشريط الجانبي كما هو. لاحظ أنه لا يمكنك استخدام المكونات التي تتوقع مجموعة من المعلمات، ولكن يمكنك بناء مكون Ember الخاص بك في سمة منفصلة والإشارة إليه باسمه فقط في إعداد blocks للشريط الجانبي.

[jrgong]

مرحباً @pfaffman

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

بهذه الطريقة يمكن لعملائنا من قطاع الأعمال إرسال طلبات إلينا لتثبيت مواضيع معينة أو تمييزها أو “رعايتها”.

[pfaffman (Jay Pfaffman)]

كما تعرف، يمكنك إنشاء عنوان URL يفتح منشئ موضوع جديد. يمكنك جعل هذا هو الرابط الذي يضيفه مكون السمة.

@jrgong

والذي يتضمن بعد ذلك عنوان URL الحالي الذي يتواجد عليه المستخدم

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

[Cate_Soule]

كتلة النص التجريبي غير محاذية لزر العرض والبقية. أستخدم extra-nav-item في مخرج الكتلة.

[pfaffman (Jay Pfaffman)]

أعتقد أنك بحاجة إلى إضافة فئة تلك الأزرار الأخرى إلى الزر الذي أضفته.

[Cate_Soule]

ماذا تقصد؟ لقد حاولت استخدام نفس الفئة مثل زر العرض التجريبي.

[pfaffman (Jay Pfaffman)]

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

مكون السمة (theme component) وضع النص في المكان الذي تريده، ولكنه غير مصمم لتصميمه بالطريقة التي تريدها.

إضافة هذا إلى ملف CSS الخاص بك في سمة ما يجب أن ينجح.

.custom-component.btn-custom {
  display: inline-flex;
  align-self: center;
}

[Cate_Soule]

مرحباً، إنها لا تعمل. وأيضاً حتى إذا تم تعيين “مجموعات كتل النص” (Text Block Groups) على “الجميع” (Everyone)، فإن كتلة النص لا تظهر للضيوف.

[pfaffman (Jay Pfaffman)]

يجب عليك مطابقة فئة كتلة النص في إعدادات السمة مع الفئة الموجودة في ملف CSS الذي أريتك إياه.

@Cate_Soule

أيضًا، حتى إذا تم تعيين مجموعات كتلة النص على “الجميع”، فإن كتلة النص لا تظهر للضيوف.

أيضًا، يجب عليك تغيير الإعداد لتعيينه على إخفاء المجموعات المطابقة بدلاً من العرض للمجموعات المطابقة

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

[Cate_Soule]

شكراً! لقد نجحت في تشغيل CSS!

[pfaffman (Jay Pfaffman)]

رائع! سعيد لأنه يعمل! لا تزال أمور الـ CSS تلك صعبة بالنسبة لي.