كيفية إضافة زر مخصص في بطاقة ملف تعريف المستخدم؟

مطور
1

كيف يمكنني إضافة زر مخصص في ملخص ملف تعريف المستخدم وعرض البطاقة؟
أردنا إضافة دعوة لاتخاذ إجراء (CTA) تقوم بشيء ما (على سبيل المثال، إعادة توجيه) ولكن بدون حفظ بيانات…

image
image1812×800 88.3 KB

وأيضًا في بطاقة الملف الشخصي:

image
image946×252 49.6 KB

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

<script type="text/discourse-plugin" version="0.4">
    api.decorateWidget('header-buttons:after', helper => {
        if (Discourse.User.current()) {
            const cta = function() {
                // do something here...
            };
            return helper.h('button#create-new', {
                className: "btn fa fa-plus",
                onclick: cta
            }, 'CTA' );
        }
    });
</script>
إعجاب واحد (1)
2

أهلاً بك هنا :wave:
ستحتاج إلى استخدام plugin outlets في هذا المكان، وتحديداً user-profile-controls.
يمكنك إلقاء نظرة على مثال هنا:

3 إعجابات
3

شكراً @Arkshine وأنا جديد حقًا على هذه الإضافات لذلك اعتقدت أنها ستكون شيئًا تم القيام به بشكل مشابه مع أزرار الرأس.

في أي حال، هل user-profile-controls إضافة؟ هل يمكنك إرشادي حول كيفية تحقيق ذلك؟

4

أشجعك على قراءة https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727؛ سيجيب على سؤالك!

بشكل أساسي، يعد منفذ الإضافة (plugin outlet) طريقة لحقن التعليمات البرمجية في مكان محدد.

يوصى بإنشاء مكون سمة (theme component) باستخدام أداة سطر أوامر السمات (theme CLI) واستخدام ملفات منفصلة كما فعلت في مكون السمة الخاص بي هنا (لا تتردد في استنساخ مستودعي حتى تتمكن من اختباره/تعديله):

ومع ذلك، لا يزال بإمكانك اختباره من علامة <script> الخاصة بك:

في حالتك، ستكتب:

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-controls/my_connector_name'>
  Template content here
</script>

لاحظ السطر الأول. نستخدم user-profile-controls كاسم للموصل، ويمكن أن يكون my_connector_name أي شيء تريده.

4 إعجابات
5

رائع! أنا الآن أفهم الأمر وبما أنه يمكن اختباره في وسم النص البرمجي، فيمكننا على الأقل اختباره أولاً قبل إنشاء المكون. شكراً مرة أخرى :beers:

3 إعجابات
6

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