モバイルのナビゲーショントグルメニューをデスクトップのように通常のテキストに変更する方法はありますか?

こんにちは。

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>

この後、デスクトップコードを単純に貼り付けます。

これで、このテンプレートをモバイル ヘッダー セクションのコンポーネントに貼り付けることができます。:slightly_smiling_face:

<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 に変更があった場合は、カスタムテンプレートも更新して、すべてが正常に機能するようにする必要があります。:slightly_smiling_face:

デフォルトのテーマでは、次のようになります :arrow_down_small:


モバイルに合わせるために CSS スタイリングが必要になる場合があります。ただし、使用しているテーマによって異なります。

たとえば、デフォルトのテーマには非表示にしたい境界線があります。

モバイル / CSS セクション

.list-controls .nav-pills > li {
  border: none;
}

「いいね!」 3