أحد السيناريوهات الشائعة جدًا التي ستجد نفسك فيها كمطور للقوالب هو الحاجة إلى إنشاء محتوى يظهر فقط على الصفحة الرئيسية لمجتمعك.
قد تضيف بعض أكواد HTML إلى قسم “After Header” (بعد الترويسة) في القالب الخاص بك، والذي سيظهر بعد ذلك في كل صفحة. يمكنك تجاوز بعض العقبات في CSS لإخفاء هذا المحتوى في كل مكان باستثناء الصفحة الرئيسية… ولكن بدلًا من ذلك، دعنا نستخدم قالب Discourse لإنشاء مكون بمحتوى مرئي فقط على صفحتك الرئيسية.
إذا لم تكن مطلعًا على قوالب Discourse، فراجع Beginner's guide to using Discourse Themes و Structure of themes and theme components
في قالب Discourse الخاص بك، ستحتاج إلى إعداد بنية الدليل التالية:
javascripts/discourse/components/
javascripts/discourse/connectors/
من هنا، سنقوم بإنشاء مكون Ember. يمكنك معرفة المزيد حول مكونات Ember من وثائقهم: Ember.js Guides - Guides and Tutorials - Ember Guides
ولكن في الوقت الحالي، سيكون هذا مكونًا بسيطًا. سيتكون المكون من ملفين، أحدهما يحتوي على المنطق والآخر القالب.
javascripts/discourse/components/custom-homepage-content.js
import Component from "@glimmer/component";
import { service } from "@ember/service";
import { defaultHomepage } from "discourse/lib/utilities";
export default class CustomHomepageContent extends Component {
@service router;
get isHomepage() {
const { currentRouteName } = this.router;
return currentRouteName === `discovery.${defaultHomepage()}`;
}
}
ينشئ هذا مُحصِّل isHomepage، الذي يتحقق من خدمة الموجه (router service) لمعرفة currentRouteName — إذا كان اسم المسار يطابق صفحتك الرئيسية (كما تحدده إعدادات الموقع)، فإنه سيعيد القيمة true
الآن نحتاج إلى القالب الخاص بنا
javascripts/discourse/components/custom-homepage-content.hbs
{{#if this.isHomepage}}
<h1>This is my homepage HTML content</h1>
{{/if}}
يتحقق القالب من مُحصِّل isHomepage، وسيعرض المحتوى الخاص بك إذا كانت القيمة true. يمكنك إضافة أي HTML تريده بين كتلتي {{#if}}.
الآن بعد أن تم إنشاء المكون الخاص بنا، نحتاج إلى إضافته إلى Discourse في مكان ما. لهذه الخطوة، ستحتاج إلى تحديد منفذ المكون الإضافي (plugin outlet) الذي ستستخدمه. هذه هي المناطق في جميع أنحاء Discourse التي أضفنا فيها بعض الأكواد ليتمكن المطورون من الربط بها. يمكنك البحث عن هذه المنافذ في Github، أو تصفحها باستخدام (deprecated) Plugin outlet locations theme component.
بالنسبة للصفحات الرئيسية المخصصة، يعد above-main-container خيارًا شائعًا، لذلك سنستخدمه.
نحتاج إلى إنشاء ملف الموصل (connector file) الخاص بنا في الدليل الصحيح:
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.hbs
<CustomHomepageContent />
وهذا كل شيء، إنه يحتاج فقط إلى سطر واحد يستدعي المكون الخاص بك 
يتم التحكم في إصدار هذه الوثيقة - اقترح تغييرات على github.