ヘッダーを以下のようなものに変更するプラグインを作成しようとしています。
見た目は重要ではなく、重要なのは
/admin/customize/css_html パスでのカスタマイズを使用したくないということです。必要なすべてを魔法のように変更するプラグインを作成したいのです。
これまでに見つけた情報によると、ヘッダー用のテンプレートはなく、仮想 DOM（virtual-dom）を介してレンダリングされます。
レンダリングの手順は以下の通りです：
-
オーバーロード可能な
assets/javascripts/discourse/templates/application.hbsテンプレートがsite-headerコンポーネントをレンダリングします。{{plugin-outlet “above-site-header”}}
{{site-header canSignUp=canSignUp
showCreateAccount=“showCreateAccount”
showLogin=“showLogin”
showKeyboard=“showKeyboardShortcutsHelp”
toggleMobileView=“toggleMobileView”
toggleAnonymous=“toggleAnonymous”
logout=“logout”}}
{{plugin-outlet “below-site-header”}} -
assets/javascripts/discourse/components/site-header.js.es6コンポーネントがheaderウィジェットを拡張して返します。const SiteHeaderComponent = MountWidget.extend(Docking, {
widget: ‘header’,
..
});export default SiteHeaderComponent;
-
assets/javascripts/discourse/widgets/header.js.es6ウィジェットがヘッダーの仮想 DOM を生成します。export default createWidget(‘header’, {
tagName: ‘header.d-header.clearfix’,html(attrs, state) {}
});
私の考え
既存の header を拡張する独自の my-header ウィジェットを作成し、そこで html を更新できます。コピー＆ペーストはしたくなく、html() メソッドをオーバーライドするだけです。
/plugins/discourse-foo/assets/javascripts/discourse/widgets/my-header.js.es6
次に、既存の site-header を拡張し、単に my-header ウィジェットを指すようにオーバーライドする独自の my-site-header コンポーネントを作成できます。
/plugins/discourse-foo/assets/javascripts/discourse/components/my-site-header.js.es6
その後、application テンプレートをオーバーライドして、site-header の代わりに my-site-header コンポーネントを表示します。
/plugins/discourse-foo/assets/javascripts/discourse/templates/application.hbs
{{plugin-outlet "above-site-header"}}
{{my-site-header canSignUp=canSignUp
showCreateAccount="showCreateAccount"
showLogin="showLogin"
showKeyboard="showKeyboardShortcutsHelp"
toggleMobileView="toggleMobileView"
toggleAnonymous="toggleAnonymous"
logout="logout"}}
{{plugin-outlet "below-site-header"}}
質問ですが、これらすべてのコンポーネントとウィジェットを拡張するにはどうすればよいでしょうか？正しい方法を教えていただけますか？ありがとうございます。
