Header-widget-override 组件帮助

开发
1

大家好

我花了一些时间来更新您的组件通知

[管理员通知] 您的一个主题或插件需要更新，以兼容即将到来的 Discourse 核心更改。（ID：discourse.header-widget-overrides）已识别主题：“Header Icons”。

作为一个新手，我曾借助帮助文档、示例和反复试验来编写原始组件。我现在有点迷茫。

关于更改的帖子 Upcoming Header Changes - Preparing Themes and Plugins 假设了我所缺乏的知识和背景。而帮助文档 Developing Discourse Themes & Theme Components 没有引用新的 API（并且似乎有点过时了 :frowning: ）

我的组件在标题中添加了两个图标 - 一个是链接到 Documents 插件的页面，另一个图标会根据设置中自定义字段的值来更改图标。

image
image416×118 12 KB

目前是通过 head_tag.html 中的以下代码实现的：

任何指导都将非常有价值，因为我完全不知道该往哪里去。

谢谢

<script type="text/discourse-plugin" version="0.8">
    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget('header-icons:before', helper => {
        return helper.h('div.d-header-icons.doc-header-set', [
            helper.h('a.icon.btn-flat.doc', {
                href:'/docs',
                title: 'Documents'
            }, [iconNode("book"), "Documents"]),
        ]);
    });


        api.decorateWidget('header-icons:before', (helper) => {
            //https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=times&s=regular,solid&m=free
            let icon = 'calendar';
            let title = 'Open status: unknown';
            try {
                const cache = JSON.parse(settings.tool_status);
                const shutter = cache.tools[4];
                if (shutter.status)
                {
                    icon = 'calendar-check';
                    title = 'Open since '+shutter.date;
                }
                else
                {
                    icon = 'calendar-alt';
                    title = 'Closed since '+shutter.date;
                }
            } catch (e) {}
            return helper.h('div.d-header-icons.shutter-status', [
                helper.h('a.icon', {
                    href:'/calendar',
                    title: title
                }, iconNode(icon)),
            ]);
        });
    </script>

您可以在这里看到我的组件的整个 GitHub：GitHub - bluefroguk1/DiscourseHeaderIcons: This theme component places the Calendar icon + shutter status tick in our Discourse instance 尽情嘲笑我糟糕的编码尝试吧

2

嘿 Martin，

我根据这里的代码为你提交了一个 PR。它可能不完全是你想要的，但它能帮助你理解如何使用新的 API。:+1:

https://github.com/bluefroguk1/DiscourseHeaderIcons/pull/1

如果你有任何问题，请告诉我。

1 个赞