侧边栏分类整理器

我制作了一个侧边栏整理器。之前对此有过很多讨论,其他人觉得它没有必要,但我一直觉得我的用户不太懂技术,或者一开始不怎么了解论坛的运作方式,所以我制作了这个下拉式整理器来提供帮助。

安装此主题组件

顶部有一个小切换按钮,用户可以在默认视图和这个视图之间切换,选择他们喜欢哪一个。我把它放在那里是因为我认为许多有经验的用户想要自定义他们的导航侧边栏,但大多数新用户不需要。

侧边栏分类整理器 (Sidebar Categories Organizer)

一个 Discourse 主题组件,可将侧边栏分类组织到可自定义的、带颜色编码的可折叠部分中,并具有高级功能。

功能

  • 10 个可折叠部分: 将分类分组到最多 10 个自定义部分中
  • 颜色自定义: 为每个部分的标题设置背景色和文本颜色
  • 渐变背景: 可选的渐变淡入效果,如照片所示
  • 分类徽章: 默认 Discourse 彩色徽章可以切换显示或隐藏在分类名称旁边
  • 子分类支持: 每个部分都有一个切换按钮,用于显示/隐藏子分类(缩进显示)
  • 分类隐藏: 从所有视图中隐藏特定分类
  • 双向切换: 在自定义部分和默认 Discourse 视图之间切换(切换按钮会出现在两个视图的标题中)
  • 持久状态: 记住哪些部分是打开/关闭的以及用户的视图偏好
  • 权限感知: 只显示用户有权访问的分类
  • 未分组的分类: 自动将任何未分类的分类显示在单独的部分中
  • 移动响应: 适用于所有设备尺寸

安装

  1. 在您的 Discourse 实例中,转到 管理 → 自定义 → 主题
  2. 点击 安装从 Git 仓库
  3. 输入:https://github.com/focallocal/sidebar-categories-organizer
  4. 点击 安装
  5. 将组件添加到您的活动主题中

配置

全局设置

  • 启用侧边栏整理器: 开启/关闭自定义视图
  • 显示切换按钮: 显示 :open_file_folder: 图标以在视图之间切换(会出现在自定义视图和默认视图的标题中)
  • 显示分类徽章: 在分类名称旁边显示彩色方块
  • 使用渐变淡入: 在部分标题上启用渐变背景效果(50% 实心颜色,50% 淡出至透明)
  • 要隐藏的分类: 用逗号分隔的分类 slug 列表,将从所有视图中隐藏(例如 staff,private
  • 默认视图: 选择默认加载哪个视图(自定义或默认)

部分设置 (1-10)

每个部分都有:

  • 启用: 开启/关闭该部分
  • 标题: 部分标题文本
  • 背景颜色: 用于部分标题背景的颜色选择器
  • 文本颜色: 用于标题文本的颜色选择器
  • 分类: 用逗号分隔的分类 slug 列表(例如 general,support,feedback
  • 显示子分类: 切换以显示/隐藏此部分的子分类
  • 默认展开: 该部分是开始时展开还是折叠

查找分类 Slug

分类 slug 位于 URL 中:

  • yoursite.com/c/general/5 → slug 是 general
  • yoursite.com/c/feature-requests/12 → slug 是 feature-requests

用法

安装并配置后:

  1. 自定义视图: 分类将按您配置的部分分组,并带有彩色标题
  2. 展开/折叠: 点击部分标题可切换内容的可见性
  3. 切换视图: 点击标题中的 :open_file_folder: 图标可在自定义视图和默认视图之间切换
    • 在自定义视图中:切换按钮出现在自定义视图标题中
    • 在默认视图中:切换按钮出现在默认的“分类”标题中
  4. 子分类: 如果在每个部分启用,子分类将缩进显示在父分类下方
  5. 分类徽章: 小彩色方块(如果启用)显示每个分类的颜色
  6. 未分组的分类: 任何未分配给部分的分类都将显示在“其他分类”中
  7. 偏好设置: 您的视图选择和打开/关闭状态会保存在每个浏览器中

高级功能

渐变背景

启用后,部分标题将使用平滑的渐变效果:

  • 50% 实心颜色(您选择的背景色)
  • 50% 淡出至透明
  • 营造出现代、时尚的外观

分类隐藏

指定分类 slug 以完全从侧边栏中隐藏:

  • 适用于仅限员工或已弃用的分类
  • 适用于自定义视图和默认视图
  • 逗号分隔的列表(例如 staff,private,archived

子分类

  • 每个部分单独切换(非全局)
  • 缩进显示,字体略小
  • 透明度降低,以实现视觉层次结构
  • 保持分类徽章颜色

版本

  • 当前: 1.0.1
  • 最低 Discourse 版本: 3.3.0
  • 作者: Andy@Focallocal

许可证

MIT 许可证 - 请参阅 LICENSE 文件

支持

报告问题:GitHub · Where software is built

8 个赞

干得好 :clap:

类别设置提示

与其让管理员输入类别 slug,不如在您的 settings.yml 文件中使用以下内容,例如:

categories_to_hide:
  type: list
  list_type: category
  default: ""
  description:
    en: "Categories to hide from sidebar completely."

这将为您提供如下设置:

如果您想使用组下拉菜单,也可以对组执行相同的操作:

groups_this_setting_applies_to:
  type: list
  list_type: group
  default: ""
  description:
    en: "Groups this setting will apply to."

这将显示如下内容:

7 个赞

我真的很喜欢这个,这绝对是我考虑过的事情,所以谢谢你!

问题——如果用户在给定部分中没有任何类别的访问权限,该部分本身还会显示给用户吗?

2 个赞

是的,它包含:

3 个赞

不,如果用户没有访问权限,则类别/子类别将被隐藏。您也可以通过设置手动隐藏您选择的任何类别。

1 个赞

谢谢莉莉。我会更新那个以及我最近的其他组件,使它们变得更好。

2 个赞

该插件现已更新,带有漂亮的下拉选择器。

3 个赞

好的,我明白了那部分——但我的意思是实际的章节,而不仅仅是类别。

例如,如果我有如下设置:

动物

  • 卷云
  • 积云

日期

  • 星期六
  • 星期日

假设用户无法访问卷云或积云类别。该“云”部分是否仍会显示给用户,但没有任何类别,如下所示:

动物

日期

  • 星期六
  • 星期日

或者“云”部分根本不会出现,如下所示:

动物

日期

  • 星期六
  • 星期日
2 个赞

如果用户没有权限查看某个分组中的任何类别,则整个分组(选项卡)将被隐藏

3 个赞

这太酷了!

让我一直在重新思考想法,哈哈。

我一直在琢磨使用 Doc Categories 插件来布局带有聚焦菜单的自定义部分。但需要美化一下才能允许颜色和图标。

有一个 markdown 可以将“安装组件”添加到 Op 中。

Meta 有什么变化吗?我似乎无法在安卓上高亮显示内容以引用。- 好的,似乎已解决。

1 个赞

嘿,莉莉,我们能得到“安装组件”的 Markdown 吗?

这是此组件的一个示例:

安装此主题组件

Markdown 格式(替换 repoNamerepoUrl):

[wrap=theme-install-button repoName="组件名称" repoUrl="GitHub 仓库链接"]
安装此主题组件
[/wrap]
2 个赞

谢谢内特。我试着搜索了一下,但用的词可能太笼统了。:joy:

1 个赞

哦,我不确定它是否在任何地方被提及过。我把它从 Theme component 主题模板中移除了 :wink:

1 个赞

那确实很酷。Meta 可能想考虑 zOp 的另一个 TC,因为它可以在创建主题时预先插入一个模板。:wink: