在新更新之后，这个功能不再起作用了。@Don 你是否做了一些相关的更改或其他操作？
你好 
不，我不这么认为。上次更改是在 2 个月前。 Merge pull request #6 from VaperinaDEV/show-label · VaperinaDEV/f-nav-for-mobile@085e07f · GitHub
是的，它又开始正常工作了。一些其他的组件导致了这个问题。
1 个赞
你好 嗯，我无法重现此问题……你使用的是什么设备和浏览器？
嗨 Don，谢谢你的回复。
这很奇怪。以下是我测试过的几个浏览器，都出现了相同的现象 
PC 上的 Edge 浏览器
iPhone Discourse Hub 应用
iPhone Safari
Android Edge
我使用了以下 CSS 来调整位置，效果相当不错。
/* 使用 Flexbox 来居中 chat-channel-unread-indicator__number */
.chat-channel-unread-indicator {
display: flex;
justify-content: center;
align-items: center;
position: relative; /* 确保容器具有定位上下文 */
}
/* 确保数字元素的样式不会干扰居中 */
.chat-channel-unread-indicator__number {
display: inline-flex;
align-items: center;
justify-content: center;
}
2 个赞
看起来很酷。如果能向未登录用户展示就更好了。
@Don 你接受 PR 吗？我添加了一个功能，可以添加一个额外的函数来打开一个模态菜单，你可以在其中添加其他项目。
在我们的用例中，我们希望创建一个子菜单，在创建新主题时具有多个变体（例如，提交错误报告、提交支持请求、提交想法、创建新日记或创建常规新主题）。
参见：GitHub - jrgong420/f-nav-for-mobile: F NAV - Mobile Navigation Tabs
4 个赞
Quick update about my Fork of “F-NAV for Mobile” with Back Button, Custom Submenu, and Visibility Controls
Why this fork?
- Provide a header “Back” button on topic pages that mirrors common mobile app UX
- Offer a “customMenu” tab type that opens a configurable submenu (ideal for linking to multiple destinations; we use it to add custom pre-populated “New Topic” links)
- Add group-based visibility to tabs and menu items, so you can show certain items to staff only, etc.
- Small fixes with some deprecations and polishing of styles/accessibility
Summary about newly added features here
- Header Back Icon (optional)
- Replaces the header home logo with a back arrow on topic pages
- Behavior: go back if there’s history, otherwise route to “/”
- Toggle with setting:
header_back_icon_enabled
- Custom Submenu tab type
- New f_nav_tabs function: customMenu
- New setting: f_nav_submenu_items
- Configure menu items with label and URL (optional icon)
- Great for quick access to multiple pages from a single tab
- Group‑based visibility controls
- Tabs, submenu items, and profile_extra_items can be limited to selected groups
- Behavior:
- Empty groups => visible to all
- If groups set => only members of at least one selected group can see
- Anonymous users can’t see restricted items
- Optional: Hide nav bar on topic pages
- Toggle with setting: hide_nav_in_topic
- Zipped “build” artifacts and testing docs
- Convenience build artifacts (v1–v5) under builds/
- TESTING_GUIDE.md and TEST_RESULTS.md documenting manual validation
Enhancements to existing features
- F‑NAV items and tabs
- Adds visibleTabs getter to respect group visibility
- Integrates the new CustomSubmenu component into FNavItem flow
- Header avatar/profile menu
- Mobile view detection moved into the component, improving behavior and resolving warnings
- Profile extra items now support group‑based visibility
- Styling and accessibility
- New SCSS for the custom submenu and the back icon
- Consistent hover/active/focus-visible states
- Consistent border‑radius with core variables; refined padding/spacing (e.g., back button padding set to 0)
Bug fixes and maintenance
- Resolve site.mobileView deprecation warnings by moving checks from initializers into component rendering
- Fix a rendering edge case by moving a function out of the block
- Minor polish to match Discourse header behaviors (hover/active states, opacity transitions)
- Small CSS tidy-ups (e.g., ensure back button padding is zero, prevent accidental sizing shifts)
High‑level comparison (Original vs Forked Branch)
- Original (main): F‑NAV mobile tabs + chat optional import; no back button or custom submenu
- Fork (feat/home-logo-arrow-back):
- Adds header back icon feature with routing fallback
- Introduces “customMenu” tab function with configurable submenu items
- Adds group‑restricted visibility for tabs, submenu items, and profile items
- Optionally hides the F‑NAV on topic pages
- Improves a11y and consistency of interaction states
- Provides testing docs and packaged builds
Notes:
- This component targets recent Discourse versions that support the Discourse Plugin API level 1.14+ (as indicated in the initializers)
- If you rely on group‑based visibility, ensure your groups and memberships are configured first
Word of warning: Please test with caution as I am not a coder, and the TC was made and tested entirely with AI. Works best with 3.6beta1.
Shoutout to Don for this great component; it’s a fantastic addition! 
关于我的“F-NAV for Mobile”分支的快速更新，包含后退按钮、自定义子菜单和可见性控件
为什么是这个分支？
- 在主题页面上提供一个“后退”标题按钮，以反映常见的移动应用用户体验
- 提供一个“customMenu”选项卡类型，可打开可配置的子菜单（非常适合链接到多个目的地；我们用它来添加自定义预填充的“新主题”链接）
- 为选项卡和菜单项添加基于组的可见性，以便您可以仅向员工显示某些项等
- 修复了一些弃用的小问题，并优化了样式/可访问性
此处是关于新增功能的摘要
- 标题后退图标（可选）
- 在主题页面上将标题主页徽标替换为后退箭头
- 行为：如果有历史记录则后退，否则路由到“/”
- 通过设置切换：
header_back_icon_enabled
- 自定义子菜单选项卡类型
- 新的 f_nav_tabs 函数：customMenu
- 新设置：f_nav_submenu_items
- 使用标签和 URL（可选图标）配置菜单项
- 非常适合从单个选项卡快速访问多个页面
- 基于组的可见性控件
- 选项卡、子菜单项和 profile_extra_items 可以限制为选定的组
- 行为：
- 空组 => 对所有人可见
- 如果设置了组 => 只有至少一个选定组的成员才能看到
- 匿名用户无法看到受限项目
- 可选：隐藏主题页面的导航栏
- 通过设置切换：hide_nav_in_topic
- 压缩的“构建”工件和测试文档
- 在 builds/ 下提供方便的构建工件（v1–v5）
- TESTING_GUIDE.md 和 TEST_RESULTS.md 记录手动验证
对现有功能的增强
- F‑NAV 项目和选项卡
- 添加 visibleTabs getter 以尊重组可见性
- 将新的 CustomSubmenu 组件集成到 FNavItem 工作流中
- 标题头像/个人资料菜单
- 移动视图检测已移至组件内，从而改善了行为并解决了警告
- 个人资料额外项目现在支持基于组的可见性
- 样式和可访问性
- 为自定义子菜单和后退图标添加了新的 SCSS
- 一致的悬停/活动/焦点可见状态
- 与核心变量保持一致的边框半径；改进了内边距/间距（例如，后退按钮内边距设置为 0）
Bug 修复和维护
- 通过将检查从初始化程序移至组件渲染来解决 site.mobileView 弃用警告
- 通过将函数移出 block 来修复渲染的边缘情况
- 对匹配 Discourse 标题行为（悬停/活动状态、不透明度过渡）进行了微调
- 少量 CSS 整理（例如，确保后退按钮内边距为零，防止意外的尺寸变化）
高层级比较（原始 vs 分支）
- 原始（main）：F‑NAV 移动选项卡 + chat 可选导入；无后退按钮或自定义子菜单
- 分支（feat/home-logo-arrow-back）：
- 添加了带有路由回退功能的标题后退图标功能
- 引入了带有可配置子菜单项的“customMenu”选项卡功能
- 为选项卡、子菜单项和个人资料项添加了基于组的限制可见性
- 可选地隐藏主题页面的 F‑NAV
- 改进了交互状态的可访问性和一致性
- 提供测试文档和打包的构建
注释：
- 此组件针对支持 Discourse 插件 API 级别 1.14+ 的最新 Discourse 版本（如初始化程序所示）
- 如果您依赖基于组的可见性，请确保首先配置您的组和成员资格
警告：请谨慎测试，因为我不是程序员，并且 TC 完全由 AI 创建和测试。最适合 3.6beta1 版本。
感谢 Don 提供的这个出色组件；这是一个绝佳的补充！
2 个赞