특정 주제에서 토론 포럼의 주제 본문 아래에 고유한 HTML 콘텐츠를 추가하는 방법

개발
1

디스커스(Discourse) 포럼을 운영 중이며, 특정 주제(topic)에 대해서만 주제 본문 아래에 고유한 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 아웃렛(outlet)에 추가되었지만, 현재 모든 주제에서 콘텐츠가 표시됩니다. 제 목표는 이 콘텐츠가 모든 주제 페이지가 아니라 특정 주제에서만 보이도록 하는 것입니다.

세부 사항:

주제 페이지에는 카테고리 페이지와 달리 고유한 바디(body) 클래스가 없습니다. 보고 있는 주제에 기반하여 이 HTML 콘텐츠를 조건부로 렌더링하는 방법이 필요합니다. 질문: Ember.js에서 코드나 설정을 어떻게 수정해야 topic-area-bottom 아웃렛 아래의 사용자 정의 HTML 콘텐츠가 특정 주제에서만 표시되도록 할 수 있을까요? 특정 주제 ID나 다른 식별자를 확인하기 위한 조건을 추가하는 방법이 있을까요?

도움말이나 예시가 있다면 큰 도움이 될 것입니다!

2

this.model에는 id, title 등 주제(Topic) 데이터가 포함되어 있습니다. 이를 활용할 수 있습니다.

예를 들어, 주제 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를 사용하는 것도 가능하지만, 이는 비권장(deprecated)된 방법입니다.

현대적인 방식은 glimmer 컴포넌트와 함께 renderInOutlet을 사용하는 것입니다. 예를 들어, GitHub - discourse/discourse-custom-header-links · GitHub 를 참고할 수 있습니다.
특정 아웃렛에 렌더링하기를 원한다고 하셨는데:

템플릿은 여기에 정의되어 있습니다. 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

자세한 해결책을 제공해 주셔서 감사합니다. 정말 감사드립니다.