テーマコンポーネントの作り方、これで合ってますか？

開発
1

Discourse でテーマコンポーネントを作成する正しい方法について理解したいのですが、他のプラットフォーム/フレームワークでカスタムソリューションを構築した経験があります。

機能しているようですが、必ずしも正しい方法であるとは限りません。

要するに、これはトピックが属するカテゴリに応じてリアクションを非表示にするはずです。これは正しい方法ですか？

<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>
「いいね！」 1
2

このやり方は技術的には可能ですが、理想的なアプローチではありません。

スクリプトタグとjQueryの$(document).readyを使用する代わりに、Emberのレンダリングシステムを正しく扱う方が良いでしょう。

まず、テーマコンポーネント用の適切なフォルダ構造を持つテーマコンポーネントリポジトリを作成することをお勧めします。discourse_theme CLIを参照してください。これは、その構造をすぐに利用できるようにし、コンポーネントの開発を容易にします。（あるいは、テーマCLIの他の機能は必要なく、構造だけが必要な場合は、テーマスケルトンもあります）。

ここから、apiInitializers、pluginAPI、プラグインアウトレットなど、Discourseが拡張性のために用意しているツールを使用して、やりたいことを達成します。

これらのことについて学ぶ最良の方法は、Metaのデベロッパーガイド（特にテーマ/テーマコンポーネントのセクション）を参照することです。さらに、#theme-componentカテゴリを調べて、それらのGitHubリポジトリを見つけることをお勧めします。それらのコードと、それらがどのように物事を達成しているかを見ることも役立つでしょう。

お役に立てば幸いです！

「いいね！」 7
3

これが目標であれば、簡単なCSSで実現できます。

body.category-ask-a-question .discourse-reactions-picker.frog {
  display: none;
}
「いいね！」 5