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. في نهاية المنشور الأول، يوجد رابط لمعاينة المكون على موقع منشئ الموضوعات الخاص بنا. يمكنك استخدام هذا الرابط للعثور على معظم منافذ الإضافة دون الحاجة حتى إلى تثبيته على موقعك الخاص.

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

هذا القسم من دليل المطورين يغطي الكثير مما تبحث عنه. كما أنصحك أيضًا بتصفح مستودعات GitHub لمكونات الموضوعات في فئة #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)]

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