类别组

:discourse2: Summary Category Groups allows you to assign categories to groups, which are then used to sort and collapse categories on the categories page.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-category-groups-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

:information_source: Important things to note:

  • This theme component only works with the site setting desktop category page style set to boxes with subcategories (as it replaces that category page template).

  • The category collapsing works using your browser’s local storage, so the collapsed state will not be remembered between different devices.

Settings

Name Description
category groups This is how the groups are configured. Format as: Group name: category-slug, extra-link-id, category-slug-2 (The category slug is the name of the category as it’s seen in URLs. Usually all lowercase with no spaces)
extra links Extra links that can be mixed into category list. Add link ID in category_groups setting to render
show on mobile Show the collapsible category box groups on mobile
show ungrouped Display a group of categories that aren’t assigned to another group
fancy styling Turn on additional styling (These are some custom styles added. They stray from our defaults, so if you’re working on your own theme you may want to disable this)
hide muted subcategories When enabled, a non-muted parent category will not appear under the muted section if it has a muted subcategory
Theme Translations Default
ungrouped_categories_title Other

:discourse2: Hosted by us? Theme components are available to use on our Pro, Business and Enterprise plans.

Last edited by @tobiaseigen 2025-06-24T03:16:42Z

Check documentPerform check on document:
53 个赞

我刚刚合并了此组件的重构。总体功能应保持不变,并进行了一些错误修复。

在后台,这使用了一些现代化的 Ember,并消除了模板覆盖,这对于 Discourse 的自定义来说可能有点脆弱。

这现在应该已经修复了

现在已经修复了,这些组将不再应用于子类别布局

我已经更新了这一点,因此类别徽标现在应该尺寸正常多了

6 个赞

是否可以不显示某个类别的子类别?我们有一个类别,其组织方式包含嵌套的子类别,这导致该框变得相当大。

2 个赞

也许可以试试 Theme component 中的 Category Hider

2 个赞

您能否告诉我是否可以将类别分组应用于侧边栏?如果不行,我想将其作为功能请求提交。谢谢!

1 个赞


我的网站上有一个问题,子类别之间没有空格。

2 个赞

感谢您的报告,更新应该可以解决此问题(已在 UX: include gap for subcategories by awesomerobot · Pull Request #19 · discourse/discourse-category-groups-component · GitHub 中修复)。

2 个赞

无法实现,侧边栏需要在 Discourse 中进行更大的更改才能实现此功能(已记录请求!)

2 个赞

如果用户可以自定义此分组,那将非常棒,我们社区里有些人想要这个。

是的,这需要一个插件,但我认为这是一个好主意

类别宽度为何如此之窄?有什么方法可以解决这个问题吗?

2 个赞

这是 Mint 主题吗?我刚刚进行了一项小更新,应该可以解决这个问题——该主题的 CSS 与此组件之间存在轻微冲突。

3 个赞

是的,是薄荷,谢谢你

2 个赞

如何防止框以类别颜色进行轮廓化?我尝试过 fork 它、添加 CSS,以及更改 categories-groups.hbs 中的 <li> 样式。

(请注意,我只是业余爱好者,并非专业开发人员)

3 个赞

您可以在主题中添加一些 CSS 来移除彩色边框:

.category-boxes .category-box {
  border-left: 2px solid var(--primary-low) !important;
}

或者,如果您开启了“花哨的样式”设置:

.custom-categories-groups .category-box {
    border: 2px solid var(--primary-low) !important;
}

1 个赞

谢谢 Kris,

看来我遇到了一个更大的问题。不知何故,每当我尝试更新 Theme 组件时,它根本不会加载更改。所以我的 CSS 是好的,只是没有被加载。这不是这个帖子的内容,我会搜索一下看看是不是我有什么愚蠢的操作。

1 个赞

是否可以在类别下方添加一个“最新”部分,其中包含精美的样式框?本质上,我想在 Air 主题的“现代类别 + 分组框”组件中实现相同的功能。您可以为桌面视图选择“带最新项的类别”,然后在类别下方显示最新项。

我正在尝试编辑自己的 CSS 版本,但我不是专家。这会是一件容易的事,还是可能超出了我的技能范围?

1 个赞

我有一个用例,我们有很多已启用的类别和子类别,这使得着陆页非常拥挤,用户难以找到他们感兴趣的内容。

因此,我们希望自定义“类别组”着陆页,使其更能针对特定兴趣领域的用户(通过用户组)。

因此,我建议为每个类别组添加一个可见性选项。如果定义了任何内容,则类别组将仅对设置中启用的那些用户组可见。

我创建了一个 pull request 来演示我的意思。请告诉我您对此选项的看法。您会使用它吗?它适用于您的 Discourse 站点吗?

附注:这个提议的新选项不应被视为替代的访问控制。它只是根据登录用户的组成员身份来控制哪些类别组可见。现有的权限仍然有效。

1 个赞

在最新的 Discourse 更新后,似乎没有显示出来,可能需要更新此 TC 才能正常工作

我不知道为什么不在移动设备上启用此样式,并带有默认类别选项?

它们与组件搭配起来非常棒!