Verwenden Sie decorateWidget, um einen Textlink zum Header hinzuzufügen

Entwickler
1

Ich versuche, ein Symbol und einen Textlink mit Theme Component zu unserem Header hinzuzufügen

Ich habe es geschafft, ein Symbol hinzuzufügen mit:

    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

Aber ich kämpfe damit, daneben Text hinzuzufügen, der ebenfalls auf die Dokumenten-URL verlinkt

Ich habe versucht, Folgendes hinzuzufügen - aber der Text ist nicht verlinkt

        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

Was fehlt mir?

Gibt es auch eine Möglichkeit, das Symbol auf der linken Seite des Headers (neben unserem Logo) zu haben?

Vielen Dank im Voraus

2

In Ihrem Beispiel müssen Sie Ihren Text hier einfügen:

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

Sie müssen die CSS für den Link anpassen.

Zum Beispiel:

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

chrome_Tk18DUhJQQ

Wenn Sie auf der rechten Seite meinen, können Sie versuchen:

api.decorateWidget('home-logo:after', helper => {
    return helper.h('div.d-header-icons', [
        helper.h('a.icon.btn-flat.doc', {
            href:'/docs',
            title: 'Dokument'
        }, [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

Ich habe es schnell getestet. Möglicherweise treten einige Eigenheiten auf, aber Sie sollten die allgemeine Idee verstehen!

3
4

Okay, ich weiß nicht, warum ich diese Komponenten nicht verknüpft habe, ich kannte ihre Existenz. :man_facepalming:

5

Ich habe mir diese Komponenten angesehen – ich wollte ein bisschen von beidem, lol

6

Hat super funktioniert - danke.

Jetzt werde ich den Abend damit verbringen, mit CSS zu kämpfen, um die Schriftfarbe zu ändern, lol.