استخدم decorateWidget لإضافة رابط نصي إلى الرأس

مطور
1

أحاول إضافة أيقونة ورابط نصي إلى رأس الصفحة باستخدام مكون السمة (Theme Component).

لقد تمكنت من إضافة أيقونة باستخدام:

    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget('header-icons:before', helper => {
        return helper.h('li.header-dropdown-toggle', [
            helper.h('a.icon', {
                href:'/docs',
                title: 'Document'
            }, iconNode("book")),
        ]);
    });

صورة
صورة296×108 1.2 KB

لكنني أواجه صعوبة في إضافة نص بجانبها يكون أيضًا رابطًا لعنوان URL للمستندات.

لقد حاولت إضافة ما يلي - لكن النص ليس مرتبطًا:

        api.decorateWidget('header-icons:before', helper => {
        return helper.h('li.header-dropdown-toggle', [
            helper.h('h3', {
                href:'/docs',
                title: 'Document'
            }, 'Docs'),
        ]);

صورة
صورة352×108 2.22 KB

ما الذي أفتقده؟

هل هناك طريقة لوضع الأيقونة على الجانب الأيسر من الرأس (بجانب شعارنا)؟

شكراً مقدماً.

2

في مثالك، تحتاج إلى إدراج النص الخاص بك هنا:

helper.h('a.icon', {
    href:'/docs',
    title: 'Document'
}, ["test", iconNode("book")]),

ستحتاج إلى ضبط CSS على الرابط.

على سبيل المثال:

padding-inline-end: 2em;
justify-content: space-between;
color: currentcolor;

chrome_Tk18DUhJQQ

إذا كنت تقصد على اليمين:، يمكنك تجربة:

api.decorateWidget('home-logo:after', helper => {
    return helper.h('div.d-header-icons', [
        helper.h('a.icon.btn-flat.doc', {
            href:'/docs',
            title: 'Document'
        }, [iconNode("book"), "Doc"]),
    ]);
});

.d-header-icons .icon.doc {
    width: auto;
    gap: 0.5em;
    margin-inline: 1em;

    & .d-icon {
        width: 1em;
    }
}

image
image437×105 8.82 KB

لقد اختبرتها بسرعة. قد تواجه بعض المشكلات الغريبة، ولكن يجب أن تحصل على الفكرة العامة!

إعجاب واحد (1)
3
إعجابَين (2)
4

حسنًا، لا أعرف لماذا لم أربط تلك المكونات، كنت أعرف بوجودها. :man_facepalming:

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

كنت أتصفح تلك المكونات - حيث أردت القليل من كليهما هههه

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

عمل بشكل رائع - شكراً لك.

الآن لقضاء المساء في محاربة CSS لتغيير لون الخط هههه

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

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