こんにちは、Discourse の外観をテーマのカスタム <head> フィールドでカスタマイズしています。
<script type="text/x-handlebars" data-template-name="components/categories-only"> などのスクリプトを使用して、特定のテンプレートをオーバーライドしています。これをホームページなどの特定のページでのみオーバーライドし、サブカテゴリの表示では異なるコードを使用することは可能でしょうか?Discourse のことはまだあまり詳しくなく、テーマのカスタム HTML/CSS で正しい方法かどうかさえ確信がありません(アップデート時に失われることはわかっています)。もしお力になれる方がいらっしゃれば、大変感謝いたします。
まず、この点について明確にしておきましょう。
これは正しくありません。テーマ内で変更を加えた場合、アップデートしても変更は失われません。それらは永続的に保持されます。変更が失われる唯一のケースは、サーバー上のファイルを直接編集した場合ですが、それは明らかに避けるべき行為です。
ただし、テンプレートをオーバーライドすることには一定のリスクが伴います。コアのアップデートにより、変更が互換性を失い、更新が必要になる可能性があるためです。そのリスクを許容できるのであれば、技術的にはここで求められていることが実現可能です。
まず、ユーザーがホームページにいるかどうかを区別する方法が必要です。カテゴリ専用コンポーネントの場合、searchContext を確認する方法があります。サブカテゴリページにいる場合、検索コンテキストは “category” に設定されます。検索コンテキストが存在しない場合は、ユーザーがホームページにいることを意味します。
これをテンプレートに渡すには、以下のようなコードを追加します。
<script type="text/discourse-plugin"
version="0.8">
const categoriesOnlyComponent = require('discourse/components/categories-only').default;
categoriesOnlyComponent.reopen({
isHomepage: function() {
return !this.parentView.searchService.contextType
}.property()
});
</script>
これにより、categories-only テンプレート内で isHomepage を使用できるようになります。検索コンテキストが存在しない場合(つまり、ユーザーがホームページにいる場合)は true を返し、それ以外は false を返します。
次に、デフォルトのテンプレートを以下のようにコピーします。
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
... テンプレートの残りの部分
{{/if}}
</script>
そして、先ほど追加した isHomepage を使用します。そのためには、Handlebars の {{#if}} ヘルパーを使用する必要があります。 essentially、以下のようなコードが必要です。
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
{{#if isHomepage}}
... ホームページ専用のテンプレート
{{else}}
... ホームページでない場合のデフォルトテンプレートの残りの部分
{{/if}}
</script>
isHomepage セクション内では、任意の内容を使用できます。その場で編集することも、以下のようにより新しいテンプレートを作成することも可能です。
<script type='text/x-handlebars'
data-template-name='components/categories-only-homepage'>
<h1>あなたはホームページにいます!</h1>
<p>
ユーザーがホームページにいる場合に、カテゴリ専用コンポーネントのテンプレートをレンダリングするためにこのセクションを使用してください。
</p>
</script>
最後に、categories-only テンプレート内の isHomepage セクションで、そのテンプレートをパーシャルとして呼び出す必要があります。
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
{{#if isHomepage}}
{{partial 'components/categories-only-homepage'}}
{{else}}
... ホームページでない場合のデフォルトテンプレートの残りの部分
{{/if}}
</script>
その結果、ホームページを訪問すると以下のような表示になります。
ただし、サブカテゴリのコンポーネントは変更されずに残ります。
これはオプションですが、以下のリンクも参考になるかもしれません。
これは、テーマを扱う際の新しい推奨方法であり、<script> タグの使用を避けるためのものです。
素晴らしい、ありがとうございます!これで、text/discourse-plugin の使い方もなんとなくわかってきました。本当に助かりました!
こんにちは、もう一つ質問させてください。
特定のサブカテゴリの最新トピックを取得する方法を教えてください。カテゴリの最新トピックは category.latestTopic を使って取得できますが、サブカテゴリには使えません。何か賢い回避策はありますか?サブカテゴリをリスト表示する際に、各サブカテゴリの最新トピックも表示したいと考えています。


