テーマ開発者として頻繁に遭遇する状況の一つに、コミュニティのホームページでのみ表示されるコンテンツを作成する必要があるというケースがあります。
テーマの「After Header」セクションにHTMLを追加すると、そのコンテンツはすべてのページに表示されるようになります。CSSで些細な処理（hoops）を施してホームページ以外では非表示にすることも可能ですが…ここでは、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 ゲッターが作成され、ルーターサービスの currentRouteName をチェックします。ルート名がホームページ（サイト設定によって決定される）と一致する場合、true を返します。<template>...</template> 内のテンプレートは、このゲッターを確認し、true の場合のみコンテンツを表示します。{{#if}} ブロックの間には、任意のHTMLを追加できます。
コンポーネントが作成されたので、次にDiscourseのどこかに追加する必要があります。このステップでは、使用するプラグインアウトレット（plugin outlet）を決定する必要があります。プラグインアウトレットとは、Discourse全体に配置された、開発者がフックするための小さなコード領域のことです。GithubでDiscourseを検索してこれらを見つけることも、(deprecated) Plugin outlet locations theme component を参照して探すこともできます。
カスタムホームページの場合、above-main-container が一般的な選択肢なので、これを使用します。
正しいディレクトリにコネクタファイルを作成する必要があります：
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.gjs
import CustomHomepageContent from "../../components/custom-homepage-content";
<template><CustomHomepageContent /></template>
これだけです。コンポーネントを呼び出す1行だけで済みます 
このドキュメントはバージョン管理されています。変更提案は Github でどうぞ。