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

**URL:** https://meta.discourse.org/t/is-there-a-way-to-change-nav-toggle-menu-on-mobile-to-normal-text-like-on-desktop/234969
**Category:** Support
**Created:** [2022 年8 月 3 日 10:08 UTC](https://meta.discourse.org/t/is-there-a-way-to-change-nav-toggle-menu-on-mobile-to-normal-text-like-on-desktop/234969 "2022-08-03T10:08:10Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2022 年8 月 3 日 12:33 UTC](https://meta.discourse.org/t/is-there-a-way-to-change-nav-toggle-menu-on-mobile-to-normal-text-like-on-desktop/234969/2 "2022-08-03T12:33:49Z")

</div>

您好，

这可以通过[覆盖 Discourse 模板](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#overriding-discourse-templates-23)来实现。但我建议您阅读整个文档。

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

导航栏是一个组件，因此我们可以在 components 文件夹中找到它。`navigation-bar.hbs` 是我们想要使用的模板。

这是桌面视图中的导航栏模板。

```xml
{{#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}} />

```

但是等等……我们知道导航栏有一个移动版本，我们想将其更改为桌面版本，所以如果我们仔细查看[模板](https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates)，我们可以看到一个 **mobile** 文件夹。在此文件夹中，我们可以找到那些具有移动版本的模板。例如导航栏。所以我们必须先进入 mobile 文件夹，然后进入 components，然后搜索 `navigation-bar.hbs`。我们将用我上面粘贴的桌面版本覆盖此模板。

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

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

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

</script>

```

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

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

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

```

确保您的自定义模板始终是最新的。如果核心[导航栏模板](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/components/navigation-bar.hbs)有任何更改，您也应该更新您的自定义模板，以使一切正常工作。 🙂

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

 ![Screenshot 2022-08-03 at 14.51.12](https://global.discourse-cdn.com/meta/original/4X/6/d/6/6d6c0831a0f4e025895f254c8b05c6bd6492df34.png)

* * *

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

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

移动 / CSS 部分

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

```

 ![Screenshot 2022-08-03 at 14.50.52](https://global.discourse-cdn.com/meta/original/4X/0/c/c/0cc03e9ef16bba8a8beeecd7742c54b483850533.png)

---

_[View the full topic](https://meta.discourse.org/t/is-there-a-way-to-change-nav-toggle-menu-on-mobile-to-normal-text-like-on-desktop/234969)._