# 在侧边栏中将子类别归入其父类别

**URL:** <https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581>\
**Category:** UX\
**Tags:** sidebar\
**Created:** [2022年九月20日 20:23 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581 "2022-09-20T20:23:16Z")\
**Posts on this page:** 16\
**Page:** 2

<div class="post-metadata">

**Author:** ![NDGA](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ndga/32/287018_2.png) [@NDGA](https://meta.discourse.org/u/NDGA)\
**Post date:** [2023年七月24日 09:39 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/22 "2023-07-24T09:39:30Z")

</div>

> [@DonH](#):
>
> 在侧边栏中切换子类别至关重要。我们已经有九个类别和 19 个子类别，而且我还没有完成排序。我预计会再添加 25 个子类别。我希望它们都能在侧边栏中可用。

同意这一点。关于这个问题有什么更新吗？或者在不久的将来会有吗？

---

<div class="post-metadata">

**Author:** ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)\
**Post date:** [2023年七月24日 18:35 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/23 "2023-07-24T18:35:57Z")

</div>

我们目前没有在此处进行其他更改的计划。

请注意，您现在可以看到子类别会显示在其父类别下方（例如，元上的 #Documentation 的子类别）：

 ![Screenshot 2023-07-24 at 2.34.27 PM](https://global.discourse-cdn.com/meta/original/4X/3/6/4/3640a2cdb6e7b3141352c5b7feabdc6e1b294df1.png)

此外，自本次讨论开始以来，用于选择类别的用户界面已发生变化，在该对话框中，子类别是嵌套的。

 ![Screenshot 2023-07-24 at 2.35.45 PM](https://global.discourse-cdn.com/meta/original/4X/c/e/6/ce6e7e934368a716cdcb2dcca6b19cb277c0e582.png)

这将有助于使选择要添加到侧边栏的类别的人更容易发现它们。

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2023年八月29日 19:01 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/24 "2023-08-29T19:01:54Z")

</div>

您好！

> [@omarfilip](#):
>
> 颜色徽章对于区分父子类别关系非常有帮助。排序和可能的缩进应该能巩固子类别的视觉识别。我的意思是：

真是巧合，我偶然发现了这篇文章。它和我之前写的一篇文章非常相似。  
[https://meta.discourse.org/t/navigation-menu-sidebar-modifier/267354/24?u=aizada\_m](https://meta.discourse.org/t/navigation-menu-sidebar-modifier/267354/24?u=aizada_m)

想知道——discourse 团队是否已经设想了解决方案，或者这个问题是否可以被视为已解决？

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [2023年八月29日 19:41 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/25 "2023-08-29T19:41:13Z")

</div>

我不确定，但我觉得如果 [显示父类别](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/23?u=lilly)，那么也许可以使用 CSS 来定位子类别，使它们缩进以提供嵌套外观？可以考虑使用 `::before` 伪元素？ 🤷🏻‍♀️

也许我会在更新我的某个导航菜单组件时，看看我能想出什么办法。我脑子里已经有了如何实现的逻辑，但不确定这是否真的可行。在我的设想中，不仅子类别是嵌套的，而且还可以通过单击项目符号来折叠子类别到它们的父类别中。 😆 🤯

---

<div class="post-metadata">

**Author:** ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)\
**Post date:** [2023年九月11日 15:35 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/26 "2023-09-11T15:35:27Z")

</div>

我加入进来以便在发生任何更改时收到通知，因为我们也有太多子类别，无法在侧边栏中展示，否则会堆积如山，从而破坏侧边栏带来的用户体验改进。

我们现在最好的解决方案是让用户选择他们的组，并且只显示与这些组相关的类别，再加上一个默认类别，这在用户选择过多并导致侧边栏堆积如山时会失效。

---

<div class="post-metadata">

**Author:** ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)\
**Post date:** [2023年九月12日 20:12 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/27 "2023-09-12T20:12:01Z")

</div>

@Lilly 如果该方法不起作用，我想知道是否已经存在创建嵌套类别的工具。

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/0/a/a0a512da661fd98f616b91469488a242d639403c.png)

能否告知“添加自定义”部分模块自动将所有顶级类别添加为自己的部分，并在其下方引入子类别？

此方法将为用户提供出色的侧边栏控制，因为它们都内置了编辑功能。

缺点是用户将失去类别的彩色框图标，以及显示每个部分中有多少新帖子的功能。

---

<div class="post-metadata">

**Author:** ![Steve\_Clark](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steve_clark/32/323838_2.png) [@Steve\_Clark](https://meta.discourse.org/u/Steve_Clark)\
**Post date:** [2023年九月13日 11:11 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/28 "2023-09-13T11:11:43Z")

</div>

**这个问题有解决方案吗？**

似乎很疯狂，我们只能有一个巨大的长列表……甚至没有为子类别添加任何类，我们可以用一个小缩进手动设置样式。

希望实现类似以下的效果：

市场营销 ⌄

- 以客户为中心
- 技术
- 工具

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [2023年九月13日 12:42 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/29 "2023-09-13T12:42:01Z")

</div>

我不知道，我最近一直在思考这个问题——我的意思是整个类别部分都可以由个人用户自定义，这是首选方式，应该受到鼓励。由于可以添加子类别而无需其父类别，并且它们具有半色圆点以指示其子类别状态，因此我认为嵌套/缩进列表并不值得麻烦，尤其是考虑到实现它的艰巨而困难的编程任务。从功能角度来看，也许通过单击项目符号来折叠父类别（例如“更多”部分）的想法比缩进对我来说更有吸引力，尽管这是一项更困难的编程工作。 🤔

---

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2023年十一月16日 16:53 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/30 "2023-11-16T16:53:05Z")

</div>

> [@Steve\_Clark](#):
>
> 甚至似乎没有为子类别添加任何类，我们可以手动设置一个小缩进。

然后使用子类别的 ID，虽然有点麻烦但可用：

```css
li.sidebar-section-link-wrapper {
  &[data-category-id="10"], /*子类别 ID*/
  &[data-category-id="11"], /*子类别 ID*/
  &[data-category-id="12"], /*子类别 ID*/
  &[data-category-id="13"] /*子类别 ID*/ {
    margin-left: 1em;
  }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/1/3/6136d8958b6c4675bba73308b1121b7f4cc8bc42.png)

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2023年十一月16日 18:42 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/31 "2023-11-16T18:42:24Z")

</div>

太棒了！！！感谢分享 🙌。我的问题是，侧边栏中的常规链接是否也可以实现类似的功能？😅

---

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2023年十一月16日 19:11 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/32 "2023-11-16T19:11:29Z")

</div>

打开您的开发者控制台，查看 `data-list-item-name` 记录：

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/3/3/2338833c2beb8ba3b022c98671b0cabeff3e0d4d.png)

然后您可以在 CSS 中定位它们，例如：

```css
li.sidebar-section-link-wrapper {
  &[data-list-item-name="New"],
  &[data-list-item-name="Global leaderboard"],
  &[data-list-item-name="Test leaderboard"] {
    margin-left: 1em;
  }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/3/e/63ec0070160b289b7abb13b348c36234e0350844.png)

使用类似的方法，您可以移动整个部分而不是单个链接：

```css
.sidebar-section-wrapper.sidebar-section[data-section-name="new-global-links-section"] {
    margin-left: 1em;
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/b/3/7b363f3e773d4eb76e7f4eb35159b21f36dfd195.png)

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2023年十一月21日 18:27 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/33 "2023-11-21T18:27:48Z")

</div>

你好 @dax！抱歉回复晚了 🙏  
是的，这是魔法 ✨ 而且它奏效了，我过去 3 个月一直在寻找这样的解决方案，我非常感谢你 🙌

---

<div class="post-metadata">

**Author:** ![Wall-E](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wall-e/32/184438_2.png) [@Wall-E](https://meta.discourse.org/u/Wall-E)\
**Post date:** [2024年十月4日 15:59 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/34 "2024-10-04T15:59:10Z")

</div>

在侧边栏中，我想知道是否可以将子类别显示在其父类别下方并缩进？请看我的侧边栏：

 ![Screenshot 2024-10-04 at 11.52.48 AM](https://global.discourse-cdn.com/meta/original/4X/3/6/7/367f2987841f9cb41b2be75fcd6055b0ddb1dc92.png)

例如，“Events”下面有一个子类别“AGU”，没有缩进。许多用户无法区分颜色，认为“AGU”只是一个不同的类别，与“Events”无关。因此，他们后来将“AGU”搜索为一个类别，而不是子类别，所以他们找不到它。

是否有缩进的选项？如果没有，那会很好。

---

<div class="post-metadata">

**Author:** ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)\
**Post date:** [2024年十月4日 17:40 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/35 "2024-10-04T17:40:53Z")

</div>

> [@dax](#):
>
> 然后使用子类别的 ID，这些 ID 有点麻烦但功能正常：
> 
> ```plaintext
> li.sidebar-section-link-wrapper {
> &[data-category-id="10"], /*subcategory ID*/
> &[data-category-id="11"], /*subcategory ID*/
> &[data-category-id="12"], /*subcategory ID*/
> &[data-category-id="13"] /*subcategory ID*/ {
> margin-left: 1em;
> }
> }
> 
> ```

我想知道我们是否可以简化一下？

在 Category Hider 主题组件中，添加了一个切换按钮来隐藏所有子类别

```plaintext
.hamburger-panel .category-link.subcategory {
      display:none;
}

```

在此组件之前，我曾手动隐藏所有子类别，逐个定位。直到有人分享了一行代码，可以隐藏所有子类别

```plaintext
li.sidebar-section-link-wrapper {
  .category-link.subcategory {
    margin-left: 1em;
  }
}

```

我将立即测试上面的代码。

不幸的是，这不起作用。😥。有没有办法调整这段代码使其生效？

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [2024年十月5日 01:58 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/36 "2024-10-05T01:58:53Z")

</div>

我做了一个简单的组件来实现这个功能

> [@缩进/嵌套的侧边栏分类或子分类](https://meta.discourse.org/t/nested-sidebar-categories-or-subcategories/329437):
>
> warning 此主题组件已弃用，请改用 [Discourse 缩进的子分类](https://meta.discourse.org/t/discourse-indented-subcategories/393838)。 请切换到那个组件，它更简单、更容易使用。此仓库将不再维护，并将在 2026 年 2 月 20 日 左右存档。 information_source摘要 在侧边栏中缩进/嵌套选定的分类或子分类hammer_and_wrench仓库 [https://github.com/Lillinator/discourse-nested-categories](https://github.com/Lillinator/discourse-nested-categories)eyeglasses预览 [在 Discourse 主题创建器上预览](https://discourse.theme-creator.io/theme/Lilly/discourse-nested-categories)question安装指南 [如何安装主题或主题组件](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_book对 Discourse 主题不熟悉？ [Discourse 主题使用入门指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) 安装此主题组件 使用这个简单的主题组件有两种方式：选择要缩进（或嵌套）在侧边栏中的分类或子分类；或者允许缩进所有分类，但排除一个选定的列表。大多数人当然只想缩进子分类，使它们看起来像嵌套的，但你可以缩进任何你列出的分类。在桌面和移动视图以及标题下拉菜单中均可使用。感谢…

---

<div class="post-metadata">

**Author:** ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)\
**Post date:** [2024年十月5日 05:06 UTC](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581/37 "2024-10-05T05:06:55Z")

</div>

太棒了！谢谢！

[上一頁](https://meta.discourse.org/t/nest-subcategories-under-their-parent-categories-in-the-sidebar/239581.md?page=1)