Topic ID as a variable?

[awesomerobot (Kris)]

It will be easier to create a custom component that appends this to the correct posts rather than filling a template.

If you edit the code of your theme under admin > themes & components… and add this to the JS tab, it should get you what you’re after with some adjustment:

import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";

class TopicIdentifier extends Component {
  get topicId() {
    return this.args.post?.topic?.id;
  }

  get shouldShow() {
    const firstPost = this.args.post?.post_number === 1; // first post in topic
    const desiredCategories = [45, 3]; // a comma separated list of category IDs you want this to appear in 
    const isInCategory = desiredCategories.includes(
      this.args.post?.topic.category.id
    );

    return firstPost && isInCategory;
  }

  <template>
    {{#if this.shouldShow}}
      <!-- you can edit the content below, {{this.topicId}} is where the topic ID will be filled -->
      This topic's ID is
      {{this.topicId}} 
      <!-- you can edit the content above -->
    {{/if}}
  </template>
}

export default apiInitializer((api) => {
  api.decorateCookedElement((element, helper) => {
    const wrapper = document.createElement("div");
    wrapper.className = "custom-topic-id"
 
    helper?.renderGlimmer(
      wrapper,
      <template><TopicIdentifier @post={{helper.model}} /></template>
    );

    element.appendChild(wrapper);
  });
});

You can find the category ID from its URL to configure desiredCategories, for example, the support category here on Meta has the ID of 6

You can add CSS to style this how you’d like with the CSS tab… for example

.custom-topic-id {
  display: inline-block;
  background: yellow;
}