هل هذه هي الطريقة الصحيحة لإنشاء مكون الثيم؟

مطور
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>
2

على الرغم من أن هذه الطريقة ممكنة تقنيًا، إلا أنها ليست النهج الأفضل.

بدلًا من استخدام وسوم script و $(document).ready في jQuery، من الأفضل العمل بشكل صحيح مع نظام العرض الخاص بـ Ember.

للبدء، يُفضل إنشاء مستودع لمكوّن السمة (theme component) مع هيكل مجلدات مناسب لمكوّن السمة الخاص بك. اطّلع على واجهة سطر الأوامر discourse_theme حيث ستقوم بإنشاء هذا الهيكل نيابةً عنك، مما يسهّل عليك تطوير المكوّن. (وبديلًا عن ذلك، يوجد أيضًا هيكل السمة إذا كنت بحاجة إلى الهيكل فقط دون الميزات الأخرى الموجودة في واجهة سطر أوامر السمة).

من هنا، سأستخدم الأدوات التي يوفرها Discourse للتوسع، مثل apiInitializers، و pluginAPI، ومخارج الإضافات (plugin outlets)، وغيرها، لتحقيق ما تحاول فعله.

أفضل طريقة للتعلم حول هذه الأمور هي تصفح دليل المطورين هنا على Meta (خاصة أقسام السمة/مكوّن السمة). بالإضافة إلى ذلك، أنصحك بزيارة فئة Customization > Theme component والاطلاع على مستودعات GitHub الخاصة بها. ستساعدك مراجعة أكوادهم وطرق تحقيقهم للأغراض المختلفة أيضًا.

أتمنى أن يكون هذا مفيدًا!

3

إذا كان هذا هو هدفك، فيمكنك القيام بذلك باستخدام CSS بسيط:

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