Как добавить уникальный HTML-контент под телом темы в форуме Discourse для конкретных тем

Разработка
1

Я работаю над форумом Discourse и мне нужно добавить уникальный HTML-контент под телом темы для конкретных тем. Этот 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-контент в зависимости от просматриваемой темы. Вопрос: Как я могу изменить свой код или настройку в Ember.js, чтобы убедиться, что пользовательский HTML-контент под выходным каналом topic-area-bottom показывается только для конкретных тем? Есть ли способ добавить условие для проверки конкретных 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">
      <!-- Уникальный HTML-контент размещается здесь -->
    </div>
  {{/if}}
</script>

Однако я рекомендую использовать Theme CLI и работать с разделёнными файлами.

Добавлять дополнительные условия или логику таким способом будет сложно. Можно было бы использовать registerConnectorClass, но этот метод устарел.

Современный подход — использование renderInOutlet вместе с компонентом Glimmer, например, как в GitHub - discourse/discourse-custom-header-links · GitHub.
Вы упомянули, что хотите рендерить в конкретный outlet:

Шаблон определён здесь. Обратите внимание на 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:

3

Спасибо за подробное решение, очень признателен.