Usar decorateWidget para añadir enlace de texto a la cabecera

Desarrollador
1

Estoy intentando añadir un icono y un enlace de texto a nuestra cabecera utilizando Theme Component.

He conseguido añadir un icono 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

Pero me está costando añadir texto junto a él que también enlace a la URL de Documentos.

He intentado añadir lo siguiente, pero el texto no está enlazado:

        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é me falta?

¿Hay alguna forma de tener el icono en el lado izquierdo de la cabecera (junto a nuestro logo)?

Gracias de antemano.

2

En tu ejemplo, necesitas insertar tu texto aquí:

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

Necesitarás ajustar el CSS del enlace.

Por ejemplo:

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

chrome_Tk18DUhJQQ

Si te refieres a la derecha, puedes intentar:

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

¡Lo probé rápidamente. Puede que encuentres algunas peculiaridades, pero deberías captar la idea general!

1 me gusta
3
2 Me gusta
4

Bien, no sé por qué no enlacé esos componentes, sabía de su existencia. :man_facepalming:

1 me gusta
5

Estuve investigando esos componentes, ¡quería un poco de ambos, jeje!

2 Me gusta
6

Funcionó muy bien, gracias.

Ahora pasaré la noche luchando con CSS para cambiar el color de la fuente, jeje.

1 me gusta
7

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