Ist dies der richtige Weg, um eine Theme-Komponente zu erstellen?

Entwickler
1

Ich habe Erfahrung im Aufbau benutzerdefinierter Lösungen mit anderen Plattformen/Frameworks und möchte verstehen, ob dies der richtige Weg ist, eine Theme-Komponente in Discourse zu erstellen.

Es scheint zu funktionieren, aber das bedeutet nicht unbedingt, dass es der richtige Weg ist.

Kurz gesagt, dies sollte die Reaktion ausblenden, je nachdem, in welcher Kategorie sich ein Thema befindet. Ist das der richtige Weg?

<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

Obwohl diese Vorgehensweise technisch möglich ist, ist sie nicht der ideale Ansatz.

Anstatt Script-Tags und jQuerys $(document).ready zu verwenden, wäre es besser, Embers Rendering-System korrekt zu nutzen.

Zunächst wäre es hilfreich, ein Repository für eine Theme-Komponente mit einer ordentlichen Ordnerstruktur für Ihre Theme-Komponente zu erstellen. Werfen Sie einen Blick auf die discourse_theme CLI, da diese die Struktur für Sie aufbaut und die Entwicklung der Komponente erleichtert. (Alternativ gibt es auch das Theme-Skeleton, falls Sie nur die Struktur und nicht die weiteren Funktionen der Theme-CLI benötigen).

Von dort aus würde ich die von Discourse bereitgestellten Tools zur Erweiterbarkeit wie apiInitializers, die pluginAPI, Plugin-Outlets usw. verwenden, um das zu erreichen, was Sie vorhaben.

Der beste Weg, mehr darüber zu lernen, ist, die Entwickler-Leitfäden hier auf Meta (insbesondere die Abschnitte zu Theme/Theme-Komponente) zu durchsuchen. Zusätzlich würde ich die Kategorie Customization > Theme component durchgehen und die GitHub-Repositories der dortigen Projekte finden. Das Durchsehen ihres Codes und wie sie bestimmte Dinge umsetzen, wird Ihnen ebenfalls helfen.

Ich hoffe, das hilft weiter!

3

Wenn dies Ihr Ziel ist, können Sie dies mit einfachem CSS erreichen:

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