Usa decorateWidget per aggiungere un link di testo all'header

Sviluppatore
1

Sto cercando di aggiungere un’icona e un link di testo nella nostra intestazione utilizzando Theme Component

Sono riuscito ad aggiungere un’icona usando:

    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

Ma sto avendo difficoltà ad aggiungere del testo accanto ad esso che si colleghi anche all’URL dei Documenti

Ho provato ad aggiungere quanto segue - ma il testo non è collegato

        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

Cosa mi manca?

Inoltre, c’è un modo per avere l’icona sul lato sinistro dell’intestazione (accanto al nostro logo)?

Grazie in anticipo

2

Nel tuo esempio, devi inserire il tuo testo qui:

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

Dovrai regolare il CSS sul link.

Ad esempio:

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

chrome_Tk18DUhJQQ

Se intendi a destra:, puoi provare:

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

L’ho testato velocemente. Potresti riscontrare qualche stranezza, ma dovresti cogliere l’idea generale!

1 Mi Piace
3
2 Mi Piace
4

Giusto, non so perché non ho collegato quei componenti, ne conoscevo l’esistenza. :man_facepalming:

1 Mi Piace
5

Stavo curiosando in quei componenti, dato che volevo un po’ di entrambi, lol

2 Mi Piace
6

Ha funzionato benissimo, grazie.

Ora passerò la serata a combattere con il CSS per cambiare il colore del carattere lol

1 Mi Piace
7

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