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

[Kuro22]

モバイルの場合：

「リストから削除」
↓

デスクトップの場合：

クリック待ちのオプションがあることをより明確に示し、トグルメニューの右側に広い空白があるため、これを変更したいと思います。

[Don]

こんにちは。

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;
}

[Kuro22]

ドンさん、こんにちは。

コードにはあまり詳しくない私にとって、非常に役立つ、詳細で分かりやすいガイドを本当にありがとうございます。 あなたのテキストのおかげで、変更を無事に完了できただけでなく、役立つスキルを習得し、Discourse についてより深く理解することができました。

感謝の気持ちを言葉で言い表すことはできません。良い一日をお過ごしください！

[Kuro22]

@Don

モバイルのヘッダーセクションへ

ところで、headセクションのことを言っていたのだと思います。