Est-ce la bonne façon de créer un composant de thème ?

Dev
1

J’ai de l’expérience dans la création de solutions personnalisées avec d’autres plateformes/frameworks et je souhaite comprendre si c’est la bonne façon de créer un composant de thème dans Discourse.

Cela semble fonctionner, mais cela ne signifie pas nécessairement que c’est la bonne méthode.

En bref, cela devrait masquer la réaction en fonction de la catégorie dans laquelle se trouve un sujet. Est-ce la bonne façon de procéder ?

<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 « J'aime »
2

Bien que cette façon de faire soit techniquement possible, ce n’est pas l’approche idéale.

Au lieu d’utiliser des balises script et $(document).ready de jQuery, il serait préférable de travailler correctement avec le système de rendu d’Ember.

Pour commencer, il serait bon de créer un dépôt de composants de thème avec une structure de dossiers appropriée pour votre composant de thème. Jetez un œil à l’outil discourse_theme CLI car il générera cette structure pour vous et vous permettra de développer facilement le composant. (Alternativement, il existe également le squelette de thème si vous n’avez besoin que de la structure et pas des autres fonctionnalités de la CLI de thème).

À partir de là, j’utiliserais les outils que Discourse met en place pour l’extensibilité, tels que apiInitializers, l’pluginAPI (https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs), les sorties de plugin, etc., pour réaliser ce que vous essayez de faire.

La meilleure façon d’en apprendre davantage sur ces choses est de parcourir les Guides développeur ici sur Meta (en particulier les sections thème/composant de thème). De plus, je parcourrais la catégorie Theme component et trouverais leurs dépôts GitHub. Examiner leur code et la façon dont ils réalisent les choses vous aidera également.

J’espère que cela vous aidera !

7 « J'aime »
3

Si tel est votre objectif, vous pouvez le faire avec un simple CSS :

body.category-ask-a-question .discourse-reactions-picker.frog {
  display: none;
}
5 « J'aime »