F NAV - 移动导航标签

:information_source: 摘要 F NAV - 移动端导航标签页
:eyeglasses: 预览 Theme Creator
:hammer_and_wrench: 代码仓库 GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub
:question: 安装指南 如何安装主题或主题组件
:open_book: 初次使用 Discourse 主题? Discourse 主题使用入门指南

安装此主题组件

你好 :wave:

之前,我曾在 Development 主题 中将其作为主题组件概念提出,现在它已具备成为 Customization > 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:

22 个赞

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

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

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

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

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