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

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

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

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

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

من هنا، سأستخدم الأدوات التي يوفرها Discourse للتوسيع مثل apiInitializers و pluginAPI و plugin outlets، وما إلى ذلك، لتحقيق ما تحاول القيام به.

أفضل طريقة للتعرف على هذه الأشياء هي تصفح أدلة المطورين هنا على Meta (خاصة أقسام السمة/مكون السمة). بالإضافة إلى ذلك، سأقوم بالمرور عبر فئة Theme component والعثور على مستودعات GitHub الخاصة بها. سيساعدك النظر إلى أكوادهم وكيفية تحقيق الأشياء أيضًا.

آمل أن يساعد هذا!

7 إعجابات
3

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

body.category-ask-a-question .discourse-reactions-picker.frog {
  display: none;
}
5 إعجابات