自定义顶部导航链接

Discourse · 2018 年5 月 11 日 02:14


	Summary	Custom Top Navigation Links allows you to add links to Discourse top navigation.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/Discourse-nav-links-component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Features

Desktop

Mobile

Settings:

Name	Descriptions
Nav links	Semicolon delimited in this order: display name;description;URL
Hide dropdowns	Hide category and tag dropdowns
Hide default links	Hide the default links on both mobile and desktop.

Nav links — these need 3 parts:
- Name
- Description
- Path or URL
Name is the text for the link that shows up on the menu. Description shows up when you hover the name like this:

hover21364×406 47.5 KB

Path/URL is where you want the link to go.

You can add links as semicolon delimited values in theme settings following this order

name;description;URL

URL can also be relative like

/c/staff, /t/232, /groups/plugin_authors, /about, /tags/official
Hide dropdowns

Hides the default category and tag dropdowns
Hide default links

Hides the default links in this section

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Cazadividendos · 2021 年3 月 6 日 20:49

Hi

I use this theme component. One of the items in the menú points to a category and I would like to inform the unread topics for this category.

Instead of Agora I would like Agora (3) for an user who has three unread topics in this category (same behaviour as standard link “Unread”).

Any idea?

Thanks in advance.

manuel · 2022 年3 月 3 日 01:52

有人知道如何添加一个实际相对于当前路由的标签链接吗？我想使用一个名为“关于”的标签，并将其作为顶部链接提供给用户所在分类中的“关于”主题。

例如，用户在分类 /c/feedback/7 中。选择“关于”将指向 /tags/c/feedback/7/about。

manuel · 2022 年5 月 10 日 17:42

我希望在实例上使用该组件，但各种行为均无效：

使用“隐藏默认链接”时，它会隐藏前两个子项（最新和类别）。但是，当导航到某个类别时，菜单中已不再显示默认的“类别”链接。然后，此设置会隐藏另一个导航项，即原本排在第三位的项。

Screenshot from 2022-05-10 18-29-05

我添加了一个用于直接类别链接的菜单项（/c/game-talk）。当我导航到它时，它没有获得活动类，也没有被高亮显示。相反，“最新”链接被高亮显示并具有活动类。但这并不是默认的“最新”链接，而是我通过组件添加的一个（仅链接到/latest）。

Screenshot from 2022-05-10 18-25-39

实际上，当“最新”链接的名称不是“最新”时，它也不会获得活动类。因此，由于该组件的原因，当前路由上的活动类似乎根本不起作用。这是/latest视图，但“最新”链接的名称不同：

Screenshot from 2022-05-10 18-39-15

sok777 · 2022 年6 月 16 日 12:31

快速提问-
我正在尝试创建此内容，并将 URL 设置为 ?order=created，以便用户可以浏览最新主题。

这在桌面端运行完美，但在移动端却失败了——导航栏只是重新加载，不会显示下拉菜单。

WJsirius · 2022 年7 月 29 日 02:50

我也有同样的问题……这是一个解决方案吗？

WJsirius · 2022 年7 月 29 日 07:31

我想我知道为什么会这样……
该组件有下面这行：

if (window.location.pathname.match(sec2)) {
          $(navHeader).html(filter + markd);
        }

因为 reg…? 本身被用作特殊 reg 标记，并且该参数应该与 window.location.search 进行比较。
我 fork 了该组件，并将其更改为以下代码，它就可以工作了。

if (sec[2].indexOf("?") === -1) {
        if (window.location.pathname.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      } else {
        // reg ?->/?
        sec[2] = sec[2].replace(/\?/g, "/?");
        const pathWithSearch = window.location.pathname + window.location.search;
        if (pathWithSearch.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      }

sok777 · 2022 年7 月 29 日 08:32

太棒了，干得好

你把这段代码放在哪里了？

WJsirius · 2022 年7 月 29 日 10:01

Discourse-nav-links-component/mobile/head_tag.html ，替换匹配的代码。

nathank · 2022 年7 月 30 日 16:32

为什么不将其作为一个PR提交，以便大家都能受益呢？

WJsirius · 2022 年8 月 1 日 10:03

我可以这样做吗？我一直觉得我的代码水平太差……有点不好意思这么做。谢谢你的建议！！！我会修改它并创建一个 PR！

nathank · 2022 年8 月 2 日 14:07

我也这么觉得我的贡献尝试！！

不过，@team（以及他们的自动化工具）似乎很擅长整理代码。

一旦你把它做成一个PR，你就可以在这里的Meta上发布PR链接，它会显示一个很棒的嵌入式PR状态实时更新。

piffy · 2022 年9 月 12 日 04:07

你最终解决这个问题了吗？我遇到了类似的问题。

piffy · 2022 年9 月 12 日 05:48

我无法说我找到了一个理想的解决方案，但我找到了对我来说问题的根源。

问题可以在这里找到
https://github.com/discourse/Discourse-nav-links-component/blob/main/desktop/head_tag.html

特别是这部分：

    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        let contentFilterMode = this.get("content").get("filterMode");

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }
      })
    });

看起来这会设置每个导航链接的“活动”状态。坦率地说，它如何决定以及所有这些变量是什么的逻辑对我来说相当不透明。但问题在于：

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }

对我来说，这会检查页面 URL 是否与导航栏 URL 的位置相同，如果是，则返回 contentFilterMode === filter 的结果，这两个变量对我来说都有些不清楚。如果条件失败，它似乎只是运行常规逻辑来判断是否应将某项标记为活动（这就是为什么我的非自定义链接似乎工作正常）。问题是，虽然这段代码为每个导航链接正确运行一次，但 location 变量似乎始终是“categories”，因此对于自定义链接，if 语句始终为 false。此外，即使我通过将 location 替换为 this.get("content").href 来修复 location 变量，返回的值也始终为 false，因为 filter 变量也始终设置为“categories”。

通常我会做一个 PR 来修复这个问题，但实际的根本问题仍然让我感到困惑。我提出了一个对我有用的解决方法，但它稍微改变了这个组件的文档功能，所以我宁愿不提交 PR。我认为在某些边缘情况下它也可能不起作用，例如如果你的主页设置为 /latest

    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        return window.location.pathname.includes(this.get("content").href);
      })
    });

基本上它只是检查当前 URL 是否包含导航栏 URL 作为子字符串。如果是，则突出显示它。

Tris20 · 2022 年11 月 17 日 21:16

4 篇帖子已拆分为新主题：导航栏上的自定义相对标签过滤器

mononym · 2023 年3 月 6 日 11:11

您好。我正在浏览此帖子。请问是否有办法标记未读主题？谢谢。

huynhthai824 · 2023 年3 月 9 日 02:41

您好，
如何在新标签页中设置打开网址？
谢谢！

carbonrich · 2023 年5 月 4 日 16:28

这可能是一个非常有用的组件，但似乎有一些基本（但超出我修复能力）的错误阻碍了它的广泛使用。这些问题会得到修复吗？

awesomerobot · 2023 年5 月 4 日 20:51

您能更具体地说明是哪些错误阻止您使用该组件吗？

carbonrich · 2023 年5 月 8 日 17:31

是的，抱歉，我遇到的主要问题是：

我猜它只需要一些更有针对性的 CSS，但我也可能弄错了！

话题		回复	浏览量
Custom Header Links Theme component official , custom-header-links	64	51475	2025 年7 月 9 日
Custom nav bar options Support	2	79	2024 年12 月 10 日
The first Custom Top Nav link inappropriately appears selected Bug top-navigation-links	2	80	2025 年6 月 26 日
Breadcrumb Links Theme component	42	1114	2025 年8 月 17 日
Custom Button For Discourse Support	3	627	2022 年11 月 16 日

自定义顶部导航链接

Features

Settings:

相关话题