自定义顶部导航链接

感谢您提供更多细节!这确实是一些脆弱的 CSS。我们现在有了类名,而以前没有,因此我们可以更具体。

我在这里重构了一下组件:

所以只需要更新一下即可。

我已经更新了,这样 hide default links 将会隐藏所有默认链接,而不仅仅是 latest 和 categories。我认为这将使隐藏行为更容易理解。

现在,通过此组件添加的导航项将获得 nav-item_custom_item-name 类,其中 item-name 是导航项的显示名称(空格替换为连字符)。因此,名为“my bookmarks”的导航项可以使用 CSS 这样定位:

#navigation-bar {
   li.nav-item_custom_my-bookmarks {
     background: skyblue;
   }
}

默认项具有 nav-item_name 这样的类名,因此如果您想隐藏默认的 categories 链接,可以这样做:

#navigation-bar {
   li.nav-item_categories {
     display: none;
   }
}

现在应该可以获得 active 类了。

3 个赞

您好,

最新的更新将导航链接的显示文本更改为小写并添加了额外的连字符。

我们在导航链接字段中有以下内容:

⮉ Home;show all categories;/forums

导航链接显示如下:
image

以前显示为:⮉ Home

这行似乎是罪魁祸首:

2 个赞

谢谢您的提及,我已进行了一次小更新,解决了这个问题!

3 个赞

鉴于我们正处于最狂野的梦想领域——非常感谢 @awesomerobot 提供的这些修复!——为该组件添加一个有用的功能将是,可以选择让自定义导航出现在类别和标签下拉菜单之前,这是否可行(而且工作量不大)?!

1 个赞

您可以通过向主题添加一些 CSS 来实现此目的:

.desktop-view {
  #navigation-bar {
    order: -1;
    margin-right: 0;
  }
  .category-breadcrumb {
    margin-right: auto;
  }
}
3 个赞

这看起来像魔法。

你好,
我该如何设置导航中的 URL 以在新标签页中打开?
谢谢!

此插件无法实现此功能,您需要添加自定义 JavaScript。

1 个赞

大家好,

请问有办法在手机上显示链接吗?

谢谢!

您好,您是指移动设备上的完整链接而不是下拉菜单吗?
如果是这样,移动设备上的空间有限,无法容纳链接。下拉菜单将其压缩成一个。

您好!

感谢您的快速回复!

抱歉,我应该多花点时间研究一下设置。它在手机上不显示是因为我在手机和桌面上都勾选了“隐藏默认链接”。

请问我该如何隐藏这些默认链接,同时在手机上显示我的链接呢?

我已为该 TC 提交了错误报告:

这确实严重影响了功能;如果不会得到解决,也许应该将其标记为 broken

4 个赞

建议:将图标作为一种选项包含在内。我使用了表情符号,看起来非常时尚,但在移动设备上会中断,而且显然不一致

有一个组件可以让你在顶部导航中为链接添加图标:Discourse Nav Item Icon / Emoji
它也可以与此组件添加的自定义链接一起使用。唯一的区别是,你需要在导航项名称前加上 custom_

例如,
我添加了一个“Preferences”链接,借助了这个组件:Preferences;edit your preferences;/my/preferences

然后我配置了图标/表情符号组件来添加扳手图标:icon:custom_preferences:solid:wrench:currentColor

结果:
image

1 个赞