Utiliser decorateWidget pour ajouter un lien texte à l'en-tête

Dev
1

J’essaie d’ajouter une icône et un lien texte dans notre en-tête en utilisant Theme Component

J’ai réussi à ajouter une icône en utilisant :

    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

Mais j’ai du mal à ajouter du texte à côté qui renvoie également à l’URL des documents

J’ai essayé d’ajouter ce qui suit - mais le texte n’est pas lié

        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

Qu’est-ce qui me manque ?

Y a-t-il aussi un moyen d’avoir l’icône sur le côté gauche de l’en-tête (à côté de notre logo) ?

Merci d’avance

2

Dans votre exemple, vous devez insérer votre texte ici :

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

Vous devrez ajuster le CSS du lien.

Par exemple :

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

chrome_Tk18DUhJQQ

Si vous voulez dire sur la droite : vous pouvez essayer :

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

Je l’ai testé rapidement. Vous pourriez rencontrer quelques bizarreries, mais vous devriez en saisir l’idée générale !

3
4

D’accord, je ne sais pas pourquoi je n’ai pas lié ces composants, je connaissais leur existence. :man_facepalming:

5

Je fouinais dans ces composants - car je voulais un peu des deux lol

6

Ça a très bien fonctionné - merci.

Maintenant, je vais passer la soirée à me battre avec CSS pour changer la couleur de la police lol