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:

私のコンポーネントは、ヘッダーに2つのアイコンを追加します。1つはDocumentsプラグインのページへのリンク、もう1つは設定のカスタムフィールドの値に基づいてアイコンが変更されるアイコンです。

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 私のひどいコーディングの試みを見てください lol

2

マーティンさん、

こちらにあるコードを基に、PRを作成しました。ご希望通りではないかもしれませんが、新しいAPIの使用方法を理解するのに役立つはずです。:+1:

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

ご不明な点がございましたら、お知らせください。

「いいね！」 1