我不得不将其重建为一个纯 CSS 组件，因为我在让 JavaScript 版本的管理部分稳定下来时遇到了问题，这意味着您必须直接编辑 CSS 选择器才能使其在您的网站上正常工作。
该组件的目的是帮助您突出显示您希望用户遵循的特定路径。
链接：https://github.com/focallocal/nav-buttons-highlighter
这是安装并突出显示看板（Kanban）插件后的效果，我的平台上的大多数用户（尤其是使用移动设备的用户）在成为会员数月后也不知道在哪里可以找到它。
桌面版：
移动版：
导航按钮高亮器 (Nav Buttons Highlighter)
一个 Discourse 主题组件，用于高亮显示导航按钮，以引导用户遵循您希望他们遵循的特定路径或功能，并使移动端下拉菜单更清晰、更可见。
目的
此组件可帮助您：
- 引导用户：通过高亮显示重要的导航链接（例如，您的任务看板、文档或关键类别）
- 改善移动端用户体验 (UX)：使下拉导航按钮更加突出
- 在导航栏中创建视觉层次结构
特性
- 简洁的按钮样式，带有纯色和悬停效果
- 管理员可配置 - 无需编辑 CSS
- 支持多达 3 个自定义导航按钮
- 移动端响应式 - 包括移动端下拉按钮高亮显示
- 默认情况下为 Discourse 看板插件预配置
- 支持颜色选择器，方便自定义
默认配置
默认情况下，此组件设置为以蓝色（#4285F4）高亮显示 Discourse 看板插件（链接）。
安装
- 在 Discourse 管理控制台中，转到 Customize → Themes → Components 并点击 Install
- 复制 Git 仓库链接并粘贴：
https://github.com/focallocal/nav-buttons-highlighter - 安装后，将组件添加到您的活动主题中。
如何自定义
管理员设置面板
所有配置都通过简单的管理员设置完成 - 无需编辑 CSS！
进行配置：
- 转到 Admin → Customize → Themes
- 点击您当前的活动主题
- 在“Included Components”（包含的组件）部分找到 Nav Buttons Highlighter
- 点击 Settings（设置）
可用设置：
按钮 1 - 看板 (默认):
- Highlight Kanban (高亮看板): 切换开/关 (默认: 开启)
- Kanban Color (看板颜色): 颜色选择器 (默认: 蓝色 #4285F4)
- Kanban Selector (看板选择器): CSS 选择器 (默认:
a.kanban-nav)
按钮 2 - 自定义:
- Highlight Button 2 (高亮按钮 2): 启用第二个按钮 (默认: 关闭)
- Button 2 Color (按钮 2 颜色): 颜色选择器 (默认: 绿色 #4CAF50)
- Button 2 Selector (按钮 2 选择器): 输入您的 CSS 选择器 (例如,
a[href='/page'])
按钮 3 - 自定义:
- Highlight Button 3 (高亮按钮 3): 启用第三个按钮 (默认: 关闭)
- Button 3 Color (按钮 3 颜色): 颜色选择器 (默认: 橙色 #FF5722)
- Button 3 Selector (按钮 3 选择器): 输入您的 CSS 选择器
移动端:
- Highlight Mobile Dropdown (高亮移动端下拉菜单): 切换移动端“最新”下拉菜单 (默认: 开启)
- Mobile Dropdown Color (移动端下拉菜单颜色): 颜色选择器 (默认: 蓝色 #4285F4)
查找 CSS 选择器:
要高亮显示不同的导航链接，您需要它们的 CSS 选择器：
- 在浏览器中打开您的论坛
- 右键单击您想要高亮的链接
- 选择“检查元素” (Inspect Element)
- 查找
<a>标签并记下：- 类名：
class="kanban-nav"→ 使用：a.kanban-nav - Href 值：
href="/c/support"→ 使用：a[href="/c/support"]
- 类名：
常见示例:
- 看板插件：
a.kanban-nav - 支持分类：
a[href="/c/support"] - 文档标签：
a[href="/tags/documentation"] - 自定义页面：
a[href="/my-page"] - 第二个导航按钮：
#navigation-bar > li:nth-child(2) > a
颜色选择:
使用十六进制颜色代码（例如，蓝色为 #4285F4）。该组件会自动生成：
- 渐变顶部的较浅色调
- 底部/阴影的较深色调
- 悬停和活动状态颜色
常用颜色:
- 蓝色：
#4285F4(默认) - 绿色：
#4CAF50 - 红色：
#F44336 - 橙色：
#FF9800 - 紫色：
#9C27B0
稳定的纯 CSS 版本
如果您更喜欢直接编辑 CSS，则可以获取上一个版本 (2.0.1)：
安装纯 CSS 版本：
https://github.com/focallocal/nav-buttons-highlighter/tree/stable-v2.0.1
请参阅该分支的 README 以获取 CSS 编辑说明。
开发
此存储库包含：
common/common.scss— 所有按钮样式和详细的自定义指南assets/javascripts/discourse/api-initializers/nav-buttons-highlighter.js— 最小初始化程序（Discourse 所需）about.json— 组件元数据
故障排除
问：更改没有显示
答：编辑后，点击“保存”并硬刷新您的论坛页面 (Ctrl+F5 或 Cmd+Shift+R)。
问：我想高亮多个按钮
答：复制整个按钮 CSS 块并将其粘贴到现有 CSS 规则下方，然后更改选择器并可选地更改颜色。
许可证
MIT — 公共幸福运动 (Public Happiness Movement)