テーマ開発者としてよく直面する状況の一つに、コミュニティのホームページでのみ表示されるコンテンツを作成する必要があるケースがあります。
テーマの「ヘッダー後」セクションに HTML を追加すると、すべてのページに表示されてしまいます。CSS で工夫してホームページ以外では非表示にすることもできますが、代わりに Discourse テーマを使用して、ホームページでのみ表示されるコンポーネントを作成しましょう。
Discourse テーマに不慣れな場合は、以下のガイドをご覧ください:
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>
}
これで isHomepage ゲッターが作成され、ルーターサービスから currentRouteName をチェックします。ルート名がサイト設定で指定されたホームページと一致する場合、true を返します。<template>...</template> 内のテンプレートはこのゲッターをチェックし、true の場合のみコンテンツを表示します。{{#if}} ブロック間に任意の HTML を追加できます。
コンポーネントが作成されたので、Discourse のどこかに追加する必要があります。この手順では、どのプラグインアウトレットを使用するかを選択する必要があります。これらは Discourse 全体に存在し、開発者がフックできるコードが追加された領域です。これらのプラグインアウトレットは GitHub で検索するか、(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>
以上です。コンポーネントを呼び出す単一行のコードだけで完了します 
このドキュメントはバージョン管理されています。変更を GitHub で提案してください。