我不得不将其重建为一个纯粹的 CSS 组件，因为我无法使 JavaScript 版本稳定。目的是帮助您突出显示您希望用户采取的特定路径。
链接：https://github.com/focallocal/nav-buttons-highlighter
这里已安装并突出显示了看板插件，我的平台上的大多数用户即使成为会员数月也不知道在哪里可以找到它，尤其是那些主要使用移动设备的用户。
桌面：
移动版：
导航按钮高亮器
一个 Discourse 主题组件，用于突出显示导航按钮，以引导用户走向您希望他们遵循的特定路径或功能，并使移动下拉菜单更清晰可见。
目的
此组件可帮助您：
- 引导用户，通过突出显示重要的导航链接（例如，您的任务板、文档或关键类别）
- 改善移动用户体验，使下拉导航按钮更加突出
- 在导航栏中创建视觉层次结构
功能
- 具有渐变、阴影和悬停效果的 3D 按钮样式
- 移动设备响应式 - 突出显示移动设备上的“最新”下拉切换按钮，让用户更清楚他们可以/应该点击它
- 默认情况下为 Discourse 看板插件预配置
- 纯 CSS 实现 - 可靠且轻量级
- 易于自定义
默认配置
默认情况下，此组件设置为以蓝色突出显示Discourse 看板插件 [链接](https://meta.discourse.org/t/kanban-board/)。但是，您可以轻松地将其更改为以任何颜色突出显示您选择的任何导航链接。
安装
-
在 Discourse 管理控制台中，转到自定义 主题 组件，然后单击安装。
-
从 Git 存储库链接复制并粘贴：
https://github.com/focallocal/nav-buttons-highlighter -
安装后，将组件添加到您的活动主题中。
如何自定义
查找 CSS 文件
此组件没有管理员设置面板 - 所有自定义都通过直接编辑存储库中的 CSS 文件来完成。
CSS 文件位于：
common/common.scss
如何编辑它：
选项 1：在 GitHub 上编辑（最简单）
- Fork 此存储库的一个版本并安装
- 导航到
common/common.scss - 单击铅笔图标进行编辑
- 进行更改并提交
- 在 Discourse 管理 → 自定义 → 组件中，单击 Nav Buttons Highlighter 组件上的“检查更新”
选项 2：本地编辑
- 将存储库克隆到您的计算机
- 在任何文本编辑器中编辑
common/common.scss - 提交并推送您的更改
- 在 Discourse 管理 → 自定义 → 组件中，单击“检查更新”
注意：
- 此组件适用于所有启用的主题（不与特定主题绑定）
- CSS 文件包含详细的内联注释，确切解释了要更改的内容
- 更改后需要在 Discourse 管理中更新组件
CSS 文件注释解释：
- 要更改的选择器（例如，
a.kanban-nav）以突出显示不同的链接 - 要为不同颜色更新的值
- 如何添加/删除移动下拉突出显示
示例
将颜色从蓝色更改为绿色
该按钮使用三种蓝色调来创建渐变效果：
- 浅蓝色：
#5ca3ff（渐变顶部） - 中蓝色：
#4285F4（渐变中部） - 深蓝色：
#3a75e4（底部/阴影）
要更改为绿色，请在 common/common.scss 中查找并替换这些值：
| 当前蓝色 | 替换为绿色 |
|---|---|
\#5ca3ff |
\#5cb860 |
\#4285F4 |
\#4CAF50 |
\#3a75e4 |
\#45a049 |
rgba(66, 133, 244 |
rgba(76, 175, 80 |
突出显示不同的导航链接
将选择器 a.kanban-nav 替换为您的目标链接：
示例：
a[href=“/c/category-name”]- 突出显示特定类别a[href=“/tags/tag-name”]- 突出显示特定标签a[href=“/my-custom-page”]- 突出显示任何自定义链接#navigation-bar > li:nth-child(2) > a- 突出显示第二个导航按钮
如何找到选择器：
- 在浏览器中打开您的论坛
- 右键单击您想要突出显示的链接
- 选择“检查元素”
- 查找 HTML 中的类名（例如，
class=“kanban-nav”）或 href 值
禁用移动下拉突出显示
找到标记为 /* Latest dropdown button on mobile */ 的部分，然后执行以下任一操作：
- 删除整个部分，或
- 通过将其包装在
/* … */中来注释掉它
突出显示移动下拉菜单中的链接
在此 CSS 块之后添加以下 CSS 块：
.fk-d-menu-modal a.kanban-nav {
background: linear-gradient(135deg, #5ca3ff 0%, #4285F4 50%, #3a75e4 100%) !important;
color: #fff !important;
padding: 8px 16px !important;
border-radius: 8px !important;
}
将 a.kanban-nav 替换为您想要的选择器。
开发
此存储库包含：
common/common.scss所有按钮样式和详细的自定义指南assets/javascripts/discourse/api-initializers/nav-buttons-highlighter.js最少的初始化程序（Discourse 所需）about.json组件元数据
故障排除
**问：更改未显示**
答：编辑后，单击“保存”并硬刷新您的论坛页面（Ctrl+F5 或 Cmd+Shift+R）。
**问：我想突出显示多个按钮**
答：复制整个按钮 CSS 块并将其粘贴到现有 CSS 规则下方，然后更改选择器和可选的颜色。
许可证
MIT 公共幸福运动