مساعدة مكون Header-widget-override

مطور
1

مرحباً يا رفاق

لقد أخذت وقتًا لتحديث مكونك

[إشعار المسؤول] تحتاج إحدى السمات أو الإضافات لديك إلى تحديث للتوافق مع تغييرات أساسية قادمة في Discourse. (المعرف: discourse.header-widget-overrides) السمة المحددة: ‘أيقونات الرأس’.

بصفتي مبتدئًا كتب المكون الأصلي بمساعدة وثائق المساعدة والأمثلة والتجربة والخطأ. أنا ضائع بعض الشيء.

المنشور حول التغييرات، Upcoming Header Changes - Preparing Themes and Plugins يفترض معرفة وسياقًا أفتقدهما. ووثائق المساعدة Developing Discourse Themes & Theme Components لا تشير إلى واجهات برمجة التطبيقات الجديدة (وتبدو قديمة بعض الشيء الآن :frowning: )

يضيف مكوني أيقونتين إلى الرأس - إحداهما رابط لصفحة مكون المستندات، والأخرى أيقونة تتغير بناءً على قيمة في حقل مخصص في الإعدادات.

image
image416×118 12 KB

يتم ذلك حاليًا عبر ما يلي في head_tag.html

أي توجيه سيكون موضع تقدير لأنني ضائع تمامًا بشأن المكان الذي يجب أن أذهب إليه

شكرا

<script type="text/discourse-plugin" version="0.8">
    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget('header-icons:before', helper => {
        return helper.h('div.d-header-icons.doc-header-set', [
            helper.h('a.icon.btn-flat.doc', {
                href:'/docs',
                title: 'Documents'
            }, [iconNode("book"), "Documents"]),
        ]);
    });


        api.decorateWidget('header-icons:before', (helper) => {
            //https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=times&s=regular,solid&m=free
            let icon = 'calendar';
            let title = 'Open status: unknown';
            try {
                const cache = JSON.parse(settings.tool_status);
                const shutter = cache.tools[4];
                if (shutter.status)
                {
                    icon = 'calendar-check';
                    title = 'Open since '+shutter.date;
                }
                else
                {
                    icon = 'calendar-alt';
                    title = 'Closed since '+shutter.date;
                }
            } catch (e) {}
            return helper.h('div.d-header-icons.shutter-status', [
                helper.h('a.icon', {
                    href:'/calendar',
                    title: title
                }, iconNode(icon)),
            ]);
        });
    </script>

يمكنك رؤية مستودع GitHub الكامل لمكوني هنا: GitHub - bluefroguk1/DiscourseHeaderIcons: This theme component places the Calendar icon + shutter status tick in our Discourse instance استمتع بمحاولة الترميز الرهيبة الخاصة بي lol

2

مرحباً مارتن،

لقد قمت بإنشاء طلب سحب لمساعدتك بناءً على الكود الموجود هنا. قد لا يكون هذا بالضبط ما تريده. سيساعدك ذلك على فهم كيفية استخدام واجهة برمجة التطبيقات الجديدة. :+1:

https://github.com/bluefroguk1/DiscourseHeaderIcons/pull/1

أخبرني إذا كانت لديك أي أسئلة.

إعجاب واحد (1)