테마 컴포넌트를 만드는 올바른 방법인가요?

개발
1

I’ve experience building custom solutions with other platforms/frameworks, and want to understand if this is the correct way to create a theme component in Discourse.

It seems to be working, but doesn’t necessarily mean it’s the correct way.

In short, this should hide reaction depending on the category a topic is within. Is this the right way to do it?

<script type="text/discourse-plugin" version="0.1">
$(document).ready(function() {
    try {
      const isTopicPage = /^\/t\//.test(window.location.pathname);
      
      if (!isTopicPage) return;

      const allowedCategories = ['ask-a-question'];

      const topic = Discourse.__container__.lookup("controller:topic");
      const categorySlug = topic && topic.get("model.category.slug");
      const isAllowedCategory = categorySlug && allowedCategories.includes(categorySlug);

      const toggleReactionEmoji = () => {
        const emoji = document.querySelector("[data-reaction='frog']");
        
        if (emoji) {
          emoji.style.display = isAllowedCategory ? '' : 'none';
          console.log(`Emoji with data-reaction='frog' ${isAllowedCategory ? 'shown' : 'hidden'}.`);
        }
      };

      toggleReactionEmoji();

      const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          mutation.addedNodes.forEach(node => {
            if (node.nodeType === 1) {
              const emoji = node.querySelector("[data-reaction='frog']");
              if (emoji) {
                emoji.style.display = isAllowedCategory ? '' : 'none';
                console.log(`Emoji with data-reaction='frog' found in mutation and ${isAllowedCategory ? 'shown' : 'hidden'}.`);
              }
            }
          });
        });
      });

      observer.observe(document.body, { childList: true, subtree: true });

      api.cleanupStream(() => observer.disconnect());

    } catch (error) {
      console.error("An error occurred in the emoji toggle script:", error);
    }
  });
</script>
2

이 방식은 기술적으로 가능하지만, 이상적인 접근법은 아닙니다.

스크립트 태그와 jQuery의 $(document).ready를 사용하는 대신, Ember의 렌더링 시스템을 올바르게 사용하는 것이 좋습니다.

먼저, 테마 컴포넌트를 위한 적절한 폴더 구조를 갖춘 테마 컴포넌트 저장소를 만드는 것이 좋습니다. 이 구조를 자동으로 생성해 주며 컴포넌트 개발을 쉽게 만들어 주기 때문에 discourse_theme CLI를 살펴보세요. (대안으로, 구조만 필요하고 테마 CLI의 다른 기능들은 필요하지 않다면 테마 스켈레톤도 사용할 수 있습니다.)

이후, Discourse가 확장성을 위해 제공하는 도구인 apiInitializers, pluginAPI, 플러그트 아웃렛 등을 활용하여 원하는 작업을 수행하는 것이 좋습니다.

이러한 것들에 대해 배우는 가장 좋은 방법은 Meta의 개발자 가이드(특히 테마/테마 컴포넌트 섹션)를 살펴보는 것입니다. 또한, Customization > Theme component 카테고리를 확인하고 해당 GitHub 저장소를 찾아보는 것도 좋습니다. 그들의 코드와 구현 방식을 살펴보는 것 역시 도움이 될 것입니다.

도움이 되길 바랍니다!

3

If this is your goal, you can do it with simple CSS:

body.category-ask-a-question .discourse-reactions-picker.frog {
  display: none;
}