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>
1 „Gefällt mir“
2

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

Anstatt Skript-Tags und jQuery $(document).ready zu verwenden, wäre es besser, korrekt mit dem Rendering-System von Ember zu arbeiten.

Zunächst wäre es gut, ein Theme-Komponenten-Repository mit einer ordnungsgemäßen Ordnerstruktur für Ihre Theme-Komponente zu erstellen. Schauen Sie sich das discourse_theme CLI an, da dies die Struktur für Sie erstellt und es Ihnen erleichtert, die Komponente zu entwickeln. (Alternativ gibt es auch das Theme-Skelett, wenn Sie nur die Struktur und nicht alle anderen Goodies des Theme-CLIs benötigen).

Von hier aus würde ich die von Discourse für Erweiterbarkeit vorgesehenen Werkzeuge wie apiInitializers, die pluginAPI, Plugin-Outlets usw. verwenden, um das zu erreichen, was Sie versuchen.

Der beste Weg, um diese Dinge zu lernen, ist, die Entwicklerhandbücher hier auf Meta (insbesondere die Abschnitte zu Themes/Theme-Komponenten) zu durchsuchen. Zusätzlich würde ich die Kategorie Theme component durchgehen und deren GitHub-Repositorys finden. Das Durchsuchen ihres Codes und wie sie Dinge erreichen, wird Ihnen ebenfalls helfen.

Ich hoffe, das hilft!

7 „Gefällt mir“
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;
}
5 „Gefällt mir“