How to Add Unique HTML Content Below Topic Body in discourse forum for Specific Topics

Development

AI-generated summary

Adding Unique HTML Content to Specific Topics in Discourse Forum

pinder99 is trying to add unique HTML content below the topic body for specific topics in a Discourse forum. The current approach uses the connectors/topic-area-bottom outlet, but displays the content on all topics.

Arkshine suggests using this.model to conditionally render the HTML content based on the topic ID. A simple example is provided:

{{#if (or (eq this.model.id 90) (eq this.model.id 38))}}
  <div class="banner-control">
    <!-- Unique HTML content goes here -->
  </div>
{{/if}}

However, it is recommended to use the Theme CLI and work with split files for a more scalable solution. The modern approach involves using renderInOutlet with a Glimmer component, as demonstrated in the Discourse Custom Header Links plugin.

pinder99 has expressed gratitude for the detailed solution provided by Arkshine.

1

I am working on an discourse forum and I need to add unique HTML content below the topic body for specific topics. The HTML content should be displayed only on certain topics and not on all topics.

Currently, I have added the HTML content using the following code:

<script type="text/x-handlebars" data-template-name="connectors/topic-area-bottom/custom-html">
  <div class="banner-control">
    <!-- Unique HTML content goes here -->
  </div>
</script>

This code is added to the connectors/topic-area-bottom outlet, but it is displaying the content on all topics. My goal is to have this content appear only on specific topics, not on every topic page.

Details:

The topic page does not have a unique body class like the category pages. I need a way to conditionally render this HTML content based on the topic being viewed. Question: How can I modify my code or setup in Ember.js to ensure that the custom HTML content under the topic-area-bottom outlet is only shown for specific topics? Is there a way to add a condition to check for specific topic IDs or other identifiers?

Any guidance or examples would be greatly appreciated!

2

this.model contains the Topic data such as the id, title, etc. You can use that.

For example, to allow topic id 90 or 38, you would write:

<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>

However, I encourage you to use the Theme CLI and work with split files.

It will be difficult to add more conditions or have some logic there. It would be possible to use registerConnectorClass, but it’s deprecated.

The modern way is to use renderInOutlet with a glimmer component—for example, GitHub - discourse/discourse-custom-header-links · GitHub.
You say you want to render in a specific outlet:

You have the template defined here. Notice the this.shouldShow
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.hbs#L1

Then you can add your logic here to tell the component to be displayed or not:
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.js#L5-L7

I hope that helps. Let me know if you need additional assistance. :+1:

3

Thankyou for detailed solution , much appreciate