discourse forumで特定のトピックにユニークなHTMLコンテンツをTopic Bodyの下に追加する方法

開発
1

特定のトピックの下にユニークなHTMLコンテンツを追加したいのですが、それがすべてのトピックではなく、特定のトピックにのみ表示されるようにする必要があります。

現在、以下のコードを使用してHTMLコンテンツを追加しています。

<script type="text/x-handlebars" data-template-name="connectors/topic-area-bottom/custom-html">
  <div class="banner-control">
    <!-- ここにユニークなHTMLコンテンツが入ります -->
  </div>
</script>

このコードはconnectors/topic-area-bottomのアウトレットに追加していますが、すべてのトピックにコンテンツが表示されてしまいます。私の目標は、このコンテンツが特定のトピックにのみ表示されるようにすることです。

詳細：
トピックページには、カテゴリページのようなユニークなボディクラスがありません。表示されているトピックに基づいて、このカスタムHTMLコンテンツを条件付きでレンダリングする方法が必要です。特定のトピックIDやその他の識別子をチェックする条件を追加する方法はありますか？

ガイダンスや例をいただけると幸いです！

2

this.model には、id、title など、トピックデータが含まれています。それを使用できます。

たとえば、トピック ID 90 または 38 を許可するには、次のように記述します。

<script type="text/x-handlebars" data-template-name="connectors/topic-area-bottom/custom-html">
  {{#if (or (eq this.model.id 90) (eq this.model.id 38))}}
    <div class="banner-control">
      <!-- Unique HTML content goes here -->
    </div>
  {{/if}}
</script>

ただし、Theme CLI を使用し、分割ファイル で作業することを推奨します。

ここにさらに条件を追加したり、何らかのロジックを記述したりするのは困難です。registerConnectorClass を使用することは可能ですが、非推奨です。

最新の方法は、renderInOutlet を Glimmer コンポーネントと共に使用することです。例: GitHub - discourse/discourse-custom-header-links

特定ののアウトレットにレンダリングしたいとのことですね。

テンプレートはここで定義されています。this.shouldShow に注目してください。
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.hbs#L1

次に、ここでコンポーネントを表示するかどうかを判断するロジックを追加できます。
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.js#L5-L7

お役に立てば幸いです。追加のサポートが必要な場合はお知らせください。:+1:

「いいね！」 5
3

詳細な解決策をありがとうございます。大変感謝しております。

「いいね！」 2
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.