テーマ開発者として非常によく遭遇する状況は、コミュニティのホームページでのみ表示されるコンテンツを作成する必要がある場合です。
テーマの「ヘッダーの後 (After Header)」セクションに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 を参照してください。
しかし、今回はシンプルなコンポーネントを作成します。このコンポーネントは、ロジックを含む1つのファイルと、テンプレートを含むもう1つのファイルの2つのファイルで構成されます。
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 ゲッターが作成され、ルーターサービスで currentRouteName をチェックします。ルート名がホームページ（サイト設定で指定）と一致する場合、true を返します。
次にテンプレートが必要です。
javascripts/discourse/components/custom-homepage-content.hbs
{{#if this.isHomepage}}
<h1>これは私のホームページのHTMLコンテンツです</h1>
{{/if}}
テンプレートは isHomepage ゲッターをチェックし、true の場合にコンテンツを表示します。{{#if}} ブロックの間に好きなHTMLを追加できます。
コンポーネントが作成されたので、Discourseのどこかに追加する必要があります。このステップでは、どのプラグインアウトレットを利用するかを決定する必要があります。これらはDiscourseのさまざまな領域で、開発者がフックできるように少量のコードが追加されている場所です。GitHubでこれらを検索するか、(deprecated) Plugin outlet locations theme component を使用して閲覧できます。
カスタムホームページの場合、above-main-container は一般的な選択肢なので、それを使用しましょう。
正しいディレクトリにコネクタファイルを作成する必要があります。
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.hbs
<CustomHomepageContent />
これで完了です。コンポーネントを呼び出すための1行だけが必要です 
このドキュメントはバージョン管理されています - 変更提案はgithubでお願いします。