حالة شائعة جدًا ستجد نفسك فيها كمطوّر قوالب هي الحاجة إلى إنشاء محتوى يظهر فقط على الصفحة الرئيسية لمجتمعك.
قد تضيف بعض 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
لكن الآن، سيكون هذا مكوّنًا بسيطًا، مكتوبًا كملف .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>This is my homepage HTML content</h1>
{{/if}}
</template>
}
ينشئ هذا خاصية isHomepage (getter)، التي تفحص خدمة المسارات (router service) بحثًا عن 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.