如何将类别拆分为带有标题的部分？

开发
1

I feel someone must have done this previously but i can’t find it mentioned anywhere here. I felt we needed three sub-categories so i made that fix, but honestly its not worth it with the bugs caused to other plugins.

We don’t need the third layer anyway, we just need a way to break the categories list page up into sections so each grouping is clearly different from the others and users instantly know what it is. Obviously i’ve already colour coded them accordingly, but there is nothing to explain to users what each colour means.

I want to add a space between categories in the category list view, and put a word of text in it as a title. For example:

Projects
| category 1 - sub1
| category 2
| category 3 - sub1+2

Learning
| category 4 - sub1
| category 5

Local
| category 6 - sub1+2+3
| category 7

2 个赞
2

You can select categories with their ids and inject your title texts before, e.g.:

body [data-category-id="1"]:before {
    content: "Projects";
}

Alternatively, you could use this new component, it comes with backend settings to add category sections:

4 个赞
3

我在 Discourse 论坛上使用了相同的 CSS 编辑，但最新的更新添加了侧边栏，现在有点乱了：

image
image823×1257 54 KB

如何仅将此编辑应用于主内容区域，而不应用于侧边栏？
谢谢！

编辑：页眉下拉菜单中也出现了这种情况：

image
image418×801 20.8 KB

1 个赞
4

您只需要在样式声明中更具体一些。代码片段在 body 元素上的任何位置声明样式。要更改它，请使用浏览器工具检查您要调整的元素，并将 body 替换为更具体的声明，例如：

#main-outlet .category-list {
  [data-category-id="1"]:before {
     content: "Projects";
  }
}
1 个赞