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

Dev
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.
You say you want to render in a specific outlet:

You have the template defined here. Notice the this.shouldShow

Then you can add your logic here to tell the component to be displayed or not:

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

4 Likes
3

Thankyou for detailed solution , much appreciate

2 Likes
4

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