使用 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

但我很难在旁边添加一个也链接到“文档”网址的文本。

我尝试添加以下代码 - 但文本没有链接：

        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.