F NAV - 移动导航标签

安装此主题组件

你好 :wave:

之前,我创建了一个关于它的 Dev 帖子,将其作为一个主题组件概念,现在它已准备好成为一个 #theme-component。

:warning: 请务必在实际使用前进行测试

关于该组件的一些信息:F NAV - Theme component concept


关于主题组件。 我阅读了许多关于使其成为 Discourse 移动标签栏 更具动态性并添加处理通知等功能的能力的帖子。F-NAV 可以做到这些以及更多…

标题

它隐藏了汉堡菜单、用户菜单、搜索和聊天,并添加了一个个人资料(头像)菜单按钮,其中包含默认的用户菜单个人资料标签内容。

设置

它还包含一个设置,您可以在“退出登录”项目之前添加自定义项目。
它包含三个字段,您可以轻松添加自定义项目。

有一些设置用于显示/隐藏默认标题图标,这在您不想将确切的标签放在 F NAV 中时很有用,因为它将显示在标题中。

标签

可以将不同的功能与标签关联起来。这些功能允许每个标签动态更改。

Screenshot 2024-12-13 at 13.06.14

这些更改包括:

功能

home

  • 将主题路由上的主页标签图标切换为左箭头,添加返回功能
    Screenshot 2024-12-13 at 12.29.33
  • 添加新主题或未读主题指示点
    Screenshot 2024-12-13 at 12.30.52

hamburger (打开汉堡菜单)


multi

multi tab

如果聊天未启用或用户在用户设置中将其关闭,则多功能标签会自动更改为消息标签。

通知气泡会根据是否紧急而变化。

多功能标签的紧急通知是绿色的,看起来像这样。 :arrow_down_small:


展开

个人消息始终是绿色的,但聊天可以是蓝色的,就像原始的未读频道消息通知一样。


展开

单条通知


message

  • 添加带有通知的消息按钮,点击它会打开一个消息模态框以快速查看

chat

  • 添加带有其功能的聊天按钮

notificationToRoute

  • 如果“请勿打扰”处于活动状态,铃铛图标将变为“带斜杠的铃铛”图标,并且会显示“请勿打扰直到”时间
    Screenshot 2024-12-13 at 13.02.35

  • 重定向到个人资料通知页面,绕过通知菜单

    • 如果有通知,则重定向到 /notifications?filter=unread
    • 如果没有通知,则重定向到 /notifications
    • 如果有可审核内容,将出现一个红色标记并重定向到 /review

notificationMenu

  • 如果“请勿打扰”处于活动状态,铃铛图标将变为“带斜杠的铃铛”图标,并且会显示“请勿打扰直到”时间
    Screenshot 2024-12-13 at 13.02.35

  • 打开通知菜单


search

  • 重定向到基于上下文的 /search 页面

设置

我尽量使设置尽可能简单。
它将包含四个字段。

  • name:这只是为了在设置中更轻松地识别标签。
  • icon:为标签添加图标。注意:如果您选择了一个功能,可能会有一些图标无法通过此设置覆盖。
  • destination:为您的自定义标签添加目的地。注意:如果您选择了一个将处理目的地的功能,则可以将其留空。该组件会自动处理 /my/... 目的地并将其转换为 /u/username/...,以便正确添加标签的活动状态。
  • function:为标签选择一个功能。

管理员可以轻松创建/删除/更改标签,并从一个功能中进行选择,或为标签添加自定义目的地。
功能 :arrow_down_small:

例如,添加主题创建标签看起来会像这样。


Screenshot 2024-12-12 at 18.55.50


鸣谢Discourse 移动标签栏,并感谢在 F NAV - 主题组件概念 帖子中提供反馈的每个人。 :heart:

21 个赞

这太棒了,而且确实应该是默认行为,这样我的拇指就不必经常去够手机屏幕的顶部了。

我不喜欢显眼的“在线”切换按钮,因为我认为大多数人不需要经常更改此设置,我猜大多数用户会选择一次性退出在线状态,所以不确定这个选项会一直提醒用户它的存在。

你显然做了很多非常有用的导航修改主题组件。我想使用一些,但你认为自己能长期维护所有这些东西吗?我倾向于只使用#官方主题组件来确保可靠性。

我没有看到原始的标签栏官方主题组件,所以我去看一下。

7 个赞

感谢您的组件@don,我在这里很久了,您做得非常出色。

3 个赞

这应该是一个错误

2 个赞

啊,谢谢,这与 FKB 主题有关。我将更新主题。

3 个赞

这是修复方法:Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub
请更新 FKB 主题并启用此新设置。
Screenshot 2024-12-14 at 9.17.02

3 个赞

你好 @don,我该如何使用图片中的 fa-regular 图标?我做了一些研究,发现在切换到 Fontawesome 6 后找不到如何使用它的信息。

3 个赞

你好 :waving_hand: 它应该可以使用 far-bell。我曾计划在标签处于活动状态时将其从常规变为实心,我会检查一下,但如果我没记错的话,房子图标只有免费版本才有实心。:thinking:

1 个赞

谢谢,我解决了我的问题。@Don

1 个赞

主页图标,在打开主题时会变为后退按钮。为什么,我们可以为此使用滑动(就像返回 Hub 主屏幕时一样 :smirking_face:)。我的用户对此抱怨了很多,因为现在他们必须触及徽标才能做到这一点(第一世界问题,我知道 :joy:

2 个赞

我认为我们可以将其添加到一个我正在考虑的函数中,只是在考虑将其放在哪里。这可以是一个单独的选项卡,您可以将其添加到仅在 DiscourseHub 中显示的导航中。

1 个赞

实际上 DiscourseHub 的下拉操作也很好用。我只是之前不知道而已。

关于主页/返回按钮的问题比较大,因为我需要向其他人解释。

3 个赞

后退按钮仅在主题中激活,以便在主题之间更轻松地进行后退导航。它源自主页功能,您可以将其关闭,这样它将保留主页目标。

设置还不能重新排序,如果您有现有的选择,则无法清除它,但我添加了一个新功能 none,它的行为与您将功能字段留空一样。这样您就不必重新创建整个导航选项卡。

如果您想禁用后退按钮并始终保留主页,应该这样做。

3 个赞

一如既往的精彩。我必须从主题创建者处的快速预览中同意这一点。这真的应该包含在核心中,并为经典移动和改进移动提供一个切换。

我可以看到这可以打开更长的横幅网站标志等内容。标题中更简洁的选项,如本地化选择器等。一如既往的非常非常好,Don!

3 个赞

铅笔图标和导航主题与导航栏一起折叠。

1 个赞
4 个赞

嗨 Don。感谢您出色的工作。我很喜欢。
我有一个问题。在我点击汉堡包菜单或通知后,有时我不需要采取进一步的操作。此时,我需要返回文章列表。但是,我只能通过点击空白页来关闭汉堡包菜单或通知。这可能会导致意外点击头像或回复。

再举一个简单的例子,当我处于聊天页面并需要返回主页时,我必须点击左上角的返回按钮,这在移动设备上实际上并不可用户友好。

那么,是否可以将菜单栏一直保留在顶部?

希望我的描述能够被理解。

2 个赞

你好 Max :wave:

你能就这个问题截一些图/录制一段屏幕录像吗?

/chat 页面,我们隐藏了导航,并使用了默认的聊天标题。我不确定在聊天页面显示导航是否值得,因为这可能会在不同浏览器上引起问题,但我会对此进行检查。

1 个赞

你好 Don :smiley:
谢谢你的回复。
请参考下面的截图。前两张截图的意思是,当我想要关闭汉堡菜单或通知时,我只能点击黄色区域。问题是,很容易意外地点击到文章或头像。

第三张截图的意思是我必须点击左上角的返回按钮才能离开聊天界面。



1 个赞

感谢您的澄清 :blush:

是的,我明白了。这里出现的问题不是组件本身,而是当您在设备上启用了“减弱动态效果”设置时出现的核心问题。您的设备上启用了该设置吗?

当“减弱动态效果”关闭时,“header-cloak”(菜单后面的暗区)会阻止点击操作。

当我在我的设备上启用它时,它不会阻止用户点击。

如果是这种情况,您也可以安全地使用滑动操作来关闭菜单。

我想我之前有一个关于这个问题的帖子 :thinking:

那是默认的聊天标题。

我将检查我们是否可以在那里启用导航。

3 个赞