تتضمن Discourse مئات نقاط الربط الإضافية (Plugin Outlets) التي يمكن استخدامها لإدراج محتوى جديد أو استبدال محتوى موجود في واجهة Discourse. يتم توفير “وسائط الربط” (Outlet arguments) بحيث يمكن تخصيص المحتوى بناءً على السياق.
اختيار نقطة ربط
للبحث عن اسم نقطة ربط إضافية، ابحث في نواة Discourse عن “<PluginOutlet”، أو استخدم مكون نقاط الربط الإضافية plugin outlet locations. (على سبيل المثال: topic-above-posts).
نقاط الربط الغلافية
بعض نقاط الربط في النواة تبدو مثل <PluginOutlet @name="foo" />. هذه تسمح لك بإدراج محتوى جديد. نقاط ربط أخرى ستقوم بـ “تغليف” تنفيذ نواة موجود على النحو التالي:
<PluginOutlet @name="foo">
تنفيذ النواة
</PluginOutlet>
تعريف موصل (connector) لهذا النوع من نقاط الربط “الغلافية” سيستبدل تنفيذ النواة. لا يمكن لموضوع/إضافة واحدة نشطة فقط أن تساهم بموصل لنقطة ربط إضافية غلافية.
بالنسبة لنقاط الربط الإضافية الغلافية، يمكنك عرض تنفيذ النواة الأصلي باستخدام الكلمة المفتاحية {{yield}}. يمكن أن يكون هذا مفيدًا إذا كنت تريد فقط استبدال تنفيذ النواة في ظروف معينة، أو إذا كنت ترغب في تغليفه بشيء ما.
تعريف الموصل
بمجرد اختيارك لنقطة الربط، قرر اسمًا لموصلك. يجب أن يكون هذا الاسم فريدًا عبر جميع المظاهر/الإضافات المثبتة في مجتمع معين. على سبيل المثال: brand-official-topics
في مظهر/إضافة، عرّف موصلًا جديدًا بصيغة .gjs بمسار منسق على النحو التالي:
{theme}/javascripts/discourse/connectors/{outlet-name}/{connector-name}.gjs
{plugin}/assets/javascripts/discourse/connectors/{outlet-name}/{connector-name}.gjs
سيتم عرض محتوى هذه الملفات كمكون Ember. للحصول على معلومات عامة حول Ember وصيغة .gjs، تحقق من دلائل Ember.
بالنسبة لموصل “مواضيع العلامة التجارية الرسمية” الافتراضي، قد يبدو الملف كما يلي:
<template>
<div class="alert alert-info">
تم إنشاء هذا الموضوع بواسطة عضو في
<a href="https://discourse.org/team">فريق Discourse</a>
</div>
</template>
استخدام وسائط الربط
توفر نقاط الربط الإضافية معلومات حول السياق المحيط عبر @outletArgs. تختلف الوسائط الممردة لكل نقطة ربط. طريقة سهلة لعرض الوسائط هي إضافة هذا إلى قالبك:
{{log @outletArgs}}
سيقوم هذا بتسجيل الوسائط في وحدة تحكم مطور المتصفح. ستظهر ككائن Proxy - لاستكشاف قائمة الوسائط، قم بتوسيع [[Target]] للكائن الوكيل.
في مثال topic-above-posts لدينا، الموضوع المعروض متاح تحت @outletArgs.model. لذا يمكننا إضافة اسم مستخدم عضو الفريق على النحو التالي:
<template>
<div class="alert alert-info">
تم إنشاء هذا الموضوع بواسطة
{{@outletArgs.model.details.created_by.username}}
(عضو في
<a href="https://discourse.org/team">فريق Discourse</a>)
</div>
</template>
إضافة منطق أكثر تعقيدًا
أحيانًا، لا يكفي القالب البسيط. لإضافة منطق JavaScript إلى موصلك، قم بترقية ملف .gjs الخاص بك لتصدير مكون قائم على الفئة. يعمل هذا بنفس طريقة أي تعريف مكون آخر، ويمكن أن يتضمن حقن الخدمات.
في مثال topic-above-posts لدينا، قد نريد عرض المستخدم بشكل مختلف بناءً على إعداد الموقع “إعطاء الأولوية لاسم المستخدم في واجهة المستخدم”. قد يبدو ملف .gjs مثل هذا:
.../connectors/topic-above-posts/brand-official-topic.gjs:
import Component from "@glimmer/component";
import { service } from "@ember/service";
export default class BrandOfficialTopics extends Component {
@service siteSettings;
get displayName() {
const user = this.args.outletArgs.model.details.created_by;
if (this.siteSettings.prioritize_username_in_ux) {
return user.username;
} else {
return user.name;
}
}
<template>
<div class="alert alert-info">
تم إنشاء هذا الموضوع بواسطة
{{this.displayName}}
(عضو في
<a href="https://discourse.org/team">فريق Discourse</a>)
</div>
</template>
}
العرض الشرطي
إذا كنت تريد فقط عرض محتواك في ظروف معينة، غالبًا ما يكفي تغليف قالبك بكتلة handlebars {{#if}}. إذا لم يكن ذلك كافيًا، قد ترغب في استخدام خطاف shouldRender للتحكم في ما إذا كان سيتم عرض قالب الموصل أم لا.
أولاً، تأكد من وجود موصل .gjs قائم على الفئة كما هو موضح أعلاه. ثم، أضف دالة static shouldRender(). توسيع مثالنا:
import Component from "@glimmer/component";
export default class BrandOfficialTopics extends Component {
static shouldRender(outletArgs, helper) {
const firstPost = outletArgs.model.postStream.posts[0];
return firstPost.primary_group_name === "team";
}
// ... (أي منطق آخر)
<template>
{{! ... }}
</template>
}
الآن سيتم عرض الموصل فقط عندما تم إنشاء أول منشور في الموضوع بواسطة عضو في الفريق.
يتم تقييم shouldRender في سياق تتبع تلقائي Glimmer. التغييرات المستقبلية في أي خصائص مرجعية (مثل outletArgs) ستسبب إعادة تقييم الدالة.
تقديم نقاط ربط جديدة
إذا كنت بحاجة إلى نقطة ربط غير موجودة بعد، فلا تتردد في تقديم طلب سحب، أو فتح موضوع في Development.
هذا المستند خاضع لإدارة الإصدارات - اقترح التغييرات على github.
