ヘッダーにテキストリンクを追加するには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: 'Document'
}, ["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: '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

簡単にテストしましたが、多少の癖があるかもしれませんが、大まかなアイデアはつかめるはずです！

「いいね！」 1
3
「いいね！」 2
4

なるほど、なぜそれらのコンポーネントをリンクしなかったのか分かりません。それらの存在は知っていました。:man_facepalming:

「いいね！」 1
5

私はそれらのコンポーネントを調べていました。どちらも少し欲しかったので。

「いいね！」 2
6

うまくいきました。ありがとうございます。

これで、フォントの色を変更するためにCSSと格闘する夜を過ごすことになります。

「いいね！」 1
7

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