こんにちは。
Overriding Discourse template で可能です。ただし、ドキュメント全体を読むことをお勧めします。
この場合、navigation-bar テンプレートを見つける必要があります。すべてのテンプレートはここにあります: https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates
ナビゲーションバーはコンポーネントなので、コンポーネントフォルダで見つけることができます。navigation-bar.hbs が使用したいテンプレートです。
これはデスクトップビューのナビゲーションバーテンプレートです。
{{#each this.navItems as |navItem|}}
<NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />
しかし、待ってください… ナビゲーションバーにはモバイルバージョンがあることを知っています。デスクトップバージョンに変更したいので、テンプレート をよく見ると、mobile フォルダがあることがわかります。このフォルダには、モバイルバージョンがあるテンプレートがあります。たとえば、ナビゲーションバーです。したがって、まずモバイルフォルダに移動し、次にコンポーネントに移動して navigation-bar.hbs を検索する必要があります。このテンプレートを、上記で貼り付けたデスクトップバージョンでオーバーライドします。
上記でリンクしたドキュメントから、次のように開始する必要があることがわかります。
data-template-name を使用して、オーバーライドしたいテンプレートをターゲットにする必要があります。
これで、ルートが mobile -> components -> navigation-bar であることがわかりました。
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
</script>
この後、デスクトップコードを単純に貼り付けます。
これで、このテンプレートをモバイル ヘッダー セクションのコンポーネントに貼り付けることができます。![]()
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
{{#each this.navItems as |navItem|}}
<NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />
</script>
カスタムテンプレートが常に最新の状態であることを確認してください。コアの navigation-bar template に変更があった場合は、カスタムテンプレートも更新して、すべてが正常に機能するようにする必要があります。![]()
デフォルトのテーマでは、次のようになります ![]()
モバイルに合わせるために CSS スタイリングが必要になる場合があります。ただし、使用しているテーマによって異なります。
たとえば、デフォルトのテーマには非表示にしたい境界線があります。
モバイル / CSS セクション
.list-controls .nav-pills > li {
border: none;
}

