현재 열려 있는 주제의 태그 목록을 가져오는 방법은?

개발
1

안녕하세요!

태그가 지정된 주제에 커스텀 버튼을 추가하는 테마 컴포넌트를 만들고 있습니다. 예를 들어, event-tag 태그가 지정된 주제에는 Event라는 이름의 카테고리 옆에 이벤트 페이지로 연결되는 버튼이 표시됩니다.

다음 가이드를 통해 버튼을 추가하고 싶은 위치(플러그인 아웃렛 topic-category)를 파악했습니다: Developing Discourse Themes & Theme Components

현재 다음과 같은 코드를 작성해 두었습니다:

<script type="text/x-handlebars" data-template-name="/connectors/topic-category/foobar2">
    <div style="height: 25px; width: 25px;background: red">
      <a href="<events_URL>" target="_blank">Link</a>
    </div>
  </script>

따라서 제 질문은, 주제의 태그 목록을 확인하여 위 스크립트가 버튼을 추가해야 하는지 여부를 어떻게 검사할 수 있는가 하는 것입니다.

2

자, 조금 진전이 있습니다:

modifyClass를 이렇게 사용해야 한다는 것을 발견했습니다:

<script type="text/discourse-plugin" version="0.8">
    api.modifyClass("component:topic-category", {
      didInsertElement: function() {
        this._super();
        console.log("Welcome to the topics page!")
      }
    });
    </script>

이렇게 하면 토픽 페이지에 도달하고 "welcome"이라는 응답을 받을 수 있지만, 버튼에 값을 채워 넣어야 하는지 확인하기 위해 현재 페이지의 태그를 가져오는 방법을 여전히 모르겠습니다..

3

아, 해결책을 찾았습니다.

이 글을 계속 다시 읽다가: Developing Discourse Themes & Theme Components

console.log(this)만 실행하면 페이지의 모든 데이터, 태그를 포함해 출력된다는 것을 발견했습니다. 이제 페이지의 태그 데이터를 가져와 설정에 포함되어 있는지 확인하는 방식으로 진행할 수 있을 것 같습니다. 이 내용을 다듬어서 공개할 준비가 되면 테마 컴포넌트 카테고리에 게시하겠습니다. 혹시 다른 분들도 테마 컴포넌트 만드는 법을 배우고 계실까 봐 제 발견을 공유해 보았습니다!

4

참고로, 이 컨텍스트에서 태그 목록을 가져오기 위한 코드는 다음과 같습니다:

<script type="text/discourse-plugin" version="1.4.0">
    api.modifyClass("component:topic-category", {
      pluginId: "returnTags",
      didInsertElement: function() {
        this._super();
        console.log(this.topic.tags)
      }
    });
</script>

반환 값:

image
image210×102 1.7 KB

:information_source: (경고를 피하려면 pluginId가 필요합니다)