كيفية إضافة محتوى HTML فريد أسفل جسم الموضوع في منتدى Discourse لمواضيع محددة

مطور
1

أنا أعمل على منتدى ديسكورس وأحتاج إلى إضافة محتوى HTML فريد أسفل جسم الموضوع لمواضيع معينة. يجب عرض محتوى HTML فقط على مواضيع معينة وليس على جميع المواضيع.

حاليًا، أضفت محتوى HTML باستخدام الكود التالي:

<script type="text/x-handlebars" data-template-name="connectors/topic-area-bottom/custom-html">
  <div class="banner-control">
    <!-- سيتم وضع محتوى HTML الفريد هنا -->
  </div>
</script>

تمت إضافة هذا الكود إلى منفذ connectors/topic-area-bottom، ولكنه يعرض المحتوى على جميع المواضيع. هدفي هو أن يظهر هذا المحتوى فقط على مواضيع محددة، وليس على كل صفحة موضوع.

التفاصيل:
لا تحتوي صفحة الموضوع على فئة جسم فريدة مثل صفحات الفئة. أحتاج إلى طريقة لعرض محتوى HTML المخصص هذا بشكل شرطي بناءً على الموضوع الذي يتم عرضه. السؤال: كيف يمكنني تعديل الكود أو الإعداد في Ember.js لضمان عرض محتوى HTML المخصص أسفل منفذ topic-area-bottom لمواضيع محددة فقط؟ هل هناك طريقة لإضافة شرط للتحقق من معرفات مواضيع محددة أو معرفات أخرى؟

نرحب بأي توجيهات أو أمثلة!

2

this.model يحتوي على بيانات الموضوع مثل المعرف و العنوان وما إلى ذلك. يمكنك استخدام ذلك.

على سبيل المثال، للسماح بمعرف الموضوع 90 أو 38، ستكتب:

<script type="text/x-handlebars" data-template-name="connectors/topic-area-bottom/custom-html">
  {{#if (or (eq this.model.id 90) (eq this.model.id 38))}}
    <div class="banner-control">
      <!-- محتوى HTML فريد هنا -->
    </div>
  {{/if}}
</script>

ومع ذلك، أشجعك على استخدام Theme CLI والعمل مع ملفات مقسمة.

سيكون من الصعب إضافة المزيد من الشروط أو وجود بعض المنطق هناك. سيكون من الممكن استخدام registerConnectorClass، ولكنه مهمل.

الطريقة الحديثة هي استخدام renderInOutlet مع مكون Glimmer - على سبيل المثال، GitHub - discourse/discourse-custom-header-links.
تقول أنك تريد العرض في منفذ معين:

لديك القالب المحدد هنا. لاحظ this.shouldShow
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.hbs#L1

ثم يمكنك إضافة منطقك هنا لإخبار المكون بما إذا كان سيتم عرضه أم لا:
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.js#L5-L7

آمل أن يساعد هذا. أخبرني إذا كنت بحاجة إلى مساعدة إضافية. :+1:

5 إعجابات
3

شكرا لك على الحل المفصل، أقدر ذلك كثيراً

إعجابَين (2)
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.