Используйте decorateWidget, чтобы добавить текстовую ссылку в заголовок

Разработка
1

Я пытаюсь добавить иконку и текстовую ссылку в наш заголовок, используя компонент темы.

Мне удалось добавить иконку с помощью:

    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")),
        ]);
    });

image
image296×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'),
        ]);

image
image352×108 2.22 KB

Что я упускаю?

Также есть ли способ разместить иконку в левой части заголовка (рядом с нашим логотипом)?

Заранее спасибо

2

В вашем примере вам нужно вставить свой текст здесь:

helper.h('a.icon', {
    href:'/docs',
    title: 'Документ'
}, ["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: 'Документ'
        }, [iconNode("book"), "Документ"]),
    ]);
});

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

image
image437×105 8.82 KB

Я быстро протестировал это. Возможно, вы столкнетесь с некоторыми особенностями, но вы должны уловить общую идею!

3
4

Правильно, не знаю, почему я не связал эти компоненты, хотя знал об их существовании. :man_facepalming:

5

Я копался в этих компонентах — хотел немного и того, и другого, ха-ха

6

Сработало отлично — спасибо.

Теперь предстоит провести вечер, борясь с CSS, чтобы изменить цвет шрифта, ха-ха