# 如何用CSS显示主题列表中的类别层次结构

**URL:** <https://meta.discourse.org/t/how-to-show-category-hierarchy-in-topic-list-with-css/325060>\
**Category:** Development\
**Tags:** css\
**Created:** [2024 年9 月 5 日 07:05 UTC](https://meta.discourse.org/t/how-to-show-category-hierarchy-in-topic-list-with-css/325060 "2024-09-05T07:05:27Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

作者： ![elRicharde](https://avatars.discourse-cdn.com/v4/letter/e/5e9695/32.png) [@elRicharde](https://meta.discourse.org/u/elRicharde)\
发布日期： [2024 年9 月 5 日 07:05 UTC](https://meta.discourse.org/t/how-to-show-category-hierarchy-in-topic-list-with-css/325060/1 "2024-09-05T07:05:27Z")

</div>

大家好，感谢您花时间阅读。我花了好几个小时在论坛上搜索，并在 ChatGPT 和一个测试论坛上尝试了一些方法，但我在这里需要一些帮助。

在我们的非政府组织中，我们希望重新组织我们的类别，以便每个部门都有自己的类别，并包含 3 个子类别：

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/c/9/bc9f3a20b60e453ac77e52e34aa166dee0c68fc7.png)

基本上是通用的，例如：

- 顶级类别 = 部门名称
- 子类别：
  - 新闻
  - 问题
  - 内部

想象一下，有 10 个或更多的部门撰写新闻，在结果列表中您将看不到新闻来自哪个部门，因为那里只显示实际的（子）类别。  
这是一个测试实例的示例，在所有命名为 faq 的不同子类别中创建帖子：

> ![image](https://global.discourse-cdn.com/meta/original/4X/5/e/8/5e88e05f52bd8e7c016949f92e852c8bc8d74fcb.png)

您可以看到不同的彩色气泡，这表明它是子组，但一眼仍无法知道是哪个部门。

所以在结果列表中有元素

> link-bottom-line

如果这看起来像

> ember 80 ember-view topic-category

来自 ThreadView，那就完美了。

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

搜索结果中也显示了您需要的内容，只是为了让您明白我的意思：

> ![image](https://global.discourse-cdn.com/meta/original/4X/5/3/9/53977ace7d646b6bad0ec5c14d14d26e2c40bc03.png)

我不知道该怎么做，因为我不会 CSS，而且这比隐藏东西更难。

我希望这里有人能花时间帮助我，这将非常有帮助，我们可以继续重新组织我们的论坛。

如果有任何问题，请告诉我。

非常感谢，致以诚挚的问候。

---

_[View the full topic](https://meta.discourse.org/t/how-to-show-category-hierarchy-in-topic-list-with-css/325060)._