ستواجه موقفًا شائعًا جدًا كمطور لقالب، وهو الحاجة إلى إنشاء محتوى يظهر فقط على الصفحة الرئيسية لمجتمعك.
قد تضيف بعض كود HTML إلى قسم “بعد الرأس” في قالبك، وسيظهر هذا الكود على كل صفحة. يمكنك بذل جهد في 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
ولكن في الوقت الحالي، سيكون هذا مكونًا بسيطًا، مكتوبًا في ملف .gjs واحد يحتوي على كل من المنطق والقالب.
javascripts/discourse/components/custom-homepage-content.gjs
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()}`;
}
<template>
{{#if this.isHomepage}}
<h1>هذا هو محتوى HTML الخاص بصفحتي الرئيسية</h1>
{{/if}}
</template>
}
هذا ينشئ مُعرِّفًا (getter) باسم isHomepage، يتحقق من خدمة الموجه (router) للتحقق من currentRouteName — إذا تطابق اسم المسار مع صفحتك الرئيسية (كما هو محدد في إعدادات الموقع)، فسيُرجع true. يقوم القالب داخل <template>...</template> بالتحقق من هذا المعرف ويعرض المحتوى الخاص بك فقط عندما تكون قيمته true. يمكنك إضافة أي HTML تريده بين كتل {{#if}}.
الآن بعد إنشاء المكون، نحتاج إلى إضافته إلى Discourse في مكان ما. في هذه الخطوة، ستحتاج إلى تحديد أي منفذ مكون (plugin outlet) ستستخدمه. هذه مناطق في جميع أنحاء Discourse أضفنا فيها بعض الكود المخصص للمطورين للربط بها. يمكنك البحث في Discourse عن هذه المنافذ على Github، أو تصفحها باستخدام (deprecated) Plugin outlet locations theme component.
بالنسبة للصفحات الرئيسية المخصصة، يُعد above-main-container خيارًا شائعًا، لذا دعنا نستخدمه.
نحتاج إلى إنشاء ملف المكون (connector) في المجلد الصحيح:
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.gjs
import CustomHomepageContent from "../../components/custom-homepage-content";
<template><CustomHomepageContent /></template>
وهذا كل شيء، كل ما يحتاجه هو سطر واحد يستدعي المكون الخاص بك 
يتم التحكم في إصدارات هذه الوثيقة - اقترح التغييرات على Github.