카테고리를 제목이 있는 섹션으로 나누는 방법?

개발
1

누군가가 이전에 이 문제를 해결했을 것 같은데, 여기 어디에도 언급되어 있는 것을 찾을 수 없습니다. 세 개의 하위 범주가 필요하다고 판단하여 해당 수정을 했지만, 솔직히 다른 플러그인에 버그를 유발하는 것을 고려하면 그만한 가치가 없습니다.

어쨌든 세 번째 계층은 필요하지 않으며, 카테고리 목록 페이지를 섹션으로 나누어 각 그룹이 서로 명확히 구분되고 사용자가 즉시 그 의미를 알 수 있는 방법만 있으면 됩니다. 물론 이미 그에 맞게 색상 코딩을 적용했지만, 각 색상이 무엇을 의미하는지에 대해 사용자에게 설명하는 요소가 없습니다.

카테고리 목록 보기에서 카테고리 사이에 공간을 만들고, 그 안에 제목으로 텍스트를 추가하고 싶습니다. 예를 들어 다음과 같습니다:

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

ID가 있는 카테고리를 선택하고, 예를 들어 다음과 같이 제목 텍스트를 앞에 삽입할 수 있습니다:

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

대신, 이 새로운 컴포넌트를 사용할 수도 있습니다. 카테고리 섹션을 추가할 수 있는 백엔드 설정이 포함되어 있습니다:

3

Discourse 포럼에 동일한 CSS 편집을 적용했는데, 최신 업데이트로 사이드바가 추가되면서 이제 약간 엉망이 되었습니다:

image
image823×1257 54 KB

이 편집을 사이드바가 아닌 메인 아웃렛에만 적용하려면 어떻게 해야 하나요?
감사합니다!

수정: 헤더 드롭다운에서도 동일한 문제가 발생합니다:

image
image418×801 20.8 KB

4

스타일 선언을 더 구체적으로 작성하기만 하면 됩니다. 해당 코드 스니펫은 body 요소 어디에나 스타일을 적용하도록 선언되어 있습니다. 이를 변경하려면 브라우저 개발자 도구를 사용하여 조정하려는 요소를 검사한 뒤, body를 더 구체적인 선언으로 대체하세요. 예를 들어:

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