api.decorateWidget - كيف يمكنني العثور على أسماء القوالب؟

[Ed_Bobkov (Ed)]

كيف يمكنني العثور على مواقع قوالب Discourse لتحديدها في الكود؟
أنا مهتم بشكل خاص بالاسم الصحيح لبطاقة المستخدم

@Johani

decorateWidget()

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

<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('NAME:LOCATION', helper => {

  });
</script>

[tshenry (Taylor)]

يوجد مكون موضوع عملي للغاية لتتبع منافذ الإضافات في قوالب Handlebars المختلفة: (deprecated) Plugin outlet locations theme component. في نهاية المنشور الأول، يوجد رابط لمعاينة المكون على موقع منشئ الموضوعات الخاص بنا. يمكنك استخدامه للعثور على معظم منافذ الإضافات دون الحاجة حتى إلى تثبيته على موقعك الخاص.

يجب الانتباه إلى أن القوالب والودجات مفهومان منفصلان. ومع ذلك، يمكن أن يعملا معًا عند الحاجة عن طريق تثبيت ودجة في منفذ إضافة لقالب. ومع ذلك، من الأكثر شيوعًا في الوقت الحالي استخدام المربعات/المكونات/المتحكمات للتعامل مع منافذ الإضافات كما تفعل في إضافة.

يغطي هذا القسم من دليل المطورين الكثير مما تبحث عنه. كما أنصحك أيضًا بالاطلاع على مستودعات GitHub لمكونات الموضوعات في فئة Customization > Theme الخاصة بنا لرؤية بعض الأمثلة الجيدة.

[Ed_Bobkov (Ed)]

شكرًا لك على التلميح! لقد وجدت الجزء الضروري user-card-post-names:after.

'Plugin Outlet Locations' by @RGJ

لقد حاولت استخدامه في الكود الأصلي، لكن لم ينجح الأمر.

@simon

<script type="text/discourse-plugin" version="0.8.27">
    api.decorateWidget('poster-name:after', helper => {
        const attrs = helper.attrs;
        if (attrs.userCustomFields && attrs.userCustomFields.user_field_4) {
            return helper.h('span.poster-user-field', helper.attrs.userCustomFields.user_field_4);
        }
    });
</script>

لقد غيّرت poster-name:after إلى user-card-post-names:after، لكن لم ينجح الأمر ولم يظهر الحقل المخصص على بطاقة المستخدم. هل لديك أي أفكار حول سبب ذلك؟

[tshenry (Taylor)]

لن تتمكن من استخدام decorateWidget() في منفذ إضافة (plugin outlet). جرّب شيئًا مثل هذا:

<script type="text/discourse-plugin" version="0.8.42">
    const h = require("virtual-dom").h;
    api.createWidget("user-card-custom-field", {
      html(attrs) {
        const userCustomFields = attrs.user.custom_fields;
        if (userCustomFields.user_field_4) {
            return h('span.poster-user-field', userCustomFields.user_field_4);
        }
      }
    });
</script>

<script type="text/x-handlebars" data-template-name="/connectors/user-card-post-names/user-card-custom-field">
    {{mount-widget widget="user-card-custom-field" args=(hash user=user)}}
</script>

يقوم mount-widget بتمرير كائن المستخدم المتاح من منفذ الإضافة في النواة (core) وجعله متاحًا في سمات الـ widget الذي أنشأناه وهو user-card-custom-field.

app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs

تأكد من أنك أضفت user_field_4 إلى إعدادات الموقع الخاصة بـ “حقول المستخدم المخصصة للعامة” أو “حقول المستخدم المخصصة للموظفين” حسب الحاجة.

تعديل

أيضًا، ما لم تكن هناك حاجة خاصة جدًا للقيام بشيء معين، فيجب أن تتمكن من تجنب استخدام الـ widgets تمامًا والاستفادة مباشرة من منفذ الإضافة:

<script type="text/x-handlebars" data-template-name="/connectors/user-card-post-names/user-card-custom-field">
  {{#if user.custom_fields.user_field_1}}
    <span class="poster-user-field">{{user.custom_fields.user_field_1}}</span>
  {{/if}}
</script>

[Ed_Bobkov (Ed)]

شكرًا جزيلاً! يعمل كل شيء.