토픽 ID를 변수로 사용할 수 있나요?

[awesomerobot (Kris)]

템플릿을 채우는 것보다 이 내용을 올바른 게시물에 추가하는 사용자 정의 컴포넌트를 만드는 것이 더 쉬울 것입니다.

admin > themes & components에서 테마 코드를 편집한 다음 JS 탭에 아래 내용을 추가하면, 약간의 조정만으로도 원하는 결과를 얻을 수 있습니다:

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; // 주제 내 첫 번째 게시물
    const desiredCategories = [45, 3]; // 이 컴포넌트가 표시되기를 원하는 카테고리 ID의 쉼표로 구분된 목록 
    const isInCategory = desiredCategories.includes(
      this.args.post?.topic.category.id
    );

    return firstPost && isInCategory;
  }

  <template>
    {{#if this.shouldShow}}
      <!-- 아래 내용을 수정할 수 있으며, {{this.topicId}}는 주제 ID가 채워지는 부분입니다 -->
      이 주제의 ID는
      {{this.topicId}} 
      <!-- 위 내용을 수정할 수 있습니다 -->
    {{/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);
  });
});

desiredCategories를 설정하려면 URL에서 카테고리 ID를 찾을 수 있습니다. 예를 들어, Meta의 support 카테고리의 ID는 6입니다.

CSS 탭에서 CSS를 추가하여 원하는 대로 스타일을 지정할 수 있습니다… 예를 들어

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