有没有办法将移动设备上的导航切换菜单更改为像桌面版那样的普通文本？

[Kuro22]

在移动设备上：

“取消列表”
↓

在桌面设备上：

我想对其进行更改，因为这样可以更明显地显示有一些选项等待点击，并且切换菜单右侧有大片空白区域。

[Don]

您好，

这可以通过覆盖 Discourse 模板来实现。但我建议您阅读整个文档。

在这种情况下，我们需要找到 navigation-bar 模板。您可以在此处找到所有模板：https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates

导航栏是一个组件，因此我们可以在 components 文件夹中找到它。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文件夹。在此文件夹中，我们可以找到那些具有移动版本的模板。例如导航栏。所以我们必须先进入 mobile 文件夹，然后进入 components，然后搜索 navigation-bar.hbs。我们将用我上面粘贴的桌面版本覆盖此模板。

从上面链接的文档中，我们知道应该像这样开始：

使用 data-template-name，我们必须定位我们想要覆盖的模板。
现在我们知道路由是：mobile → components → navigation-bar

<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">

</script>

之后，我们只需将桌面代码粘贴进去：

现在您可以将此模板粘贴到移动header部分的一个组件中。

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

确保您的自定义模板始终是最新的。如果核心导航栏模板有任何更改，您也应该更新您的自定义模板，以使一切正常工作。

在默认主题上看起来像这样

---

也许需要一些 CSS 样式来适应移动设备。但这取决于您使用的主题。

例如，默认主题有一些边框，我想隐藏它们。

移动 / CSS 部分

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

[Kuro22]

嗨 Don。

衷心感谢您提供详细、解释清晰的指南，这对像我这样不太熟悉代码的人来说非常有帮助。 您的文本不仅帮助我成功进行了更改，还让我学到了一项有用的技能，并对 Discourse 有了更深入的了解。

言语无法完全表达我的感激之情。祝您有美好的一天！

[Kuro22]

@Don

到移动端 header 部分

顺便说一句，我认为您指的是 head 部分。