사이드바 카테고리 정리

Drew-ART · 11월 21, 2025, 12:22오전

사이드바 정리 도구를 만들었습니다. 이전에도 이에 대해 많은 논의가 있었으며, 일부는 필요 없다고 생각했지만, 저는 사용자들이 초기에는 기술에 익숙하지 않거나 포럼의 작동 방식을 충분히 모를 수 있다고 생각하여 이 드롭다운 정리 도구를 만들었습니다.

이 테마 컴포넌트 설치

상단에 작은 토글 버튼이 있어 사용자가 기본 보기와 이 도구 보기 사이를 전환하고 원하는 것을 선택할 수 있습니다. 저는 많은 경험 있는 사용자가 내비게이션 사이드바를 커스터마이즈하기를 원하지만, 대부분의 신규 사용자는 그렇지 않다고 생각하여 여기에 배치했습니다.

Sidebar Categories Organizer

고급 기능을 갖춘 사용자 정의 가능하고 접을 수 있는 색상 코드 섹션으로 사이드바 카테고리를 정리하는 Discourse 테마 컴포넌트입니다.

기능

10개의 접을 수 있는 섹션: 카테고리를 최대 10개의 사용자 정의 섹션으로 그룹화
색상 커스터마이즈: 각 섹션 헤더의 배경색과 텍스트 색상 설정
그라디언트 배경: 사진과 같은 선택적 그라디언트 페이드 효과
카테고리 배지: 카테고리 옆의 기본 Discourse 색상 배지를 켜고 끌 수 있음
하위 카테고리 지원: 섹션별 토글로 하위 카테고리 표시/숨김 (들여쓰기 표시)
카테고리 숨김: 특정 카테고리를 모든 보기에서 숨김
양방향 토글: 사용자 정의 섹션과 기본 Discourse 보기 사이 전환 (토글 버튼은 두 보기 모두에 표시됨)
상태 유지: 열려 있는/닫혀 있는 섹션과 사용자의 보기 선호도를 기억
권한 인식: 사용자가 접근할 수 있는 카테고리만 표시
미분류 카테고리: 분류되지 않은 카테고리를 별도의 섹션에 자동 표시
모바일 반응형: 모든 기기 크기에서 작동

설치

Discourse 인스턴스에서 관리자 → 커스터마이즈 → 테마로 이동
설치 → Git 저장소에서 클릭
입력: https://github.com/focallocal/sidebar-categories-organizer
설치 클릭
컴포넌트를 활성 테마에 추가

설정

전역 설정

사이드바 오거나이저 활성화: 사용자 정의 보기 켜기/끄기
토글 버튼 표시: 보기 전환용 아이콘 표시 (사용자 정의 보기와 기본 보기 헤더 모두에 표시됨)
카테고리 배지 표시: 카테고리 이름 옆에 색상 사각형 표시
그라디언트 페이드 사용: 섹션 헤더에 그라디언트 배경 효과 활성화 (고유색 50%, 투명하게 페이드 50%)
숨길 카테고리: 모든 보기에서 숨길 카테고리 슬러그 (쉼표로 구분, 예: staff,private)
기본 보기: 기본적으로 로드될 보기 선택 (사용자 정의 또는 기본)

섹션 설정 (1-10)

각 섹션에는 다음이 포함됩니다:

활성화: 섹션 켜기/끄기
제목: 섹션 헤더 텍스트
배경색: 섹션 헤더 배경용 색상 선택기
텍스트 색상: 헤더 텍스트용 색상 선택기
카테고리: 쉼표로 구분된 카테고리 슬러그 (예: general,support,feedback)
하위 카테고리 표시: 이 섹션의 하위 카테고리 표시/숨김 토글
기본 열림: 섹션이 확장된 상태로 시작할지, 접힌 상태로 시작할지 여부

카테고리 슬러그 찾기

카테고리 슬러그는 URL에 있습니다:

yoursite.com/c/general/5 → 슬러그는 general
yoursite.com/c/feature-requests/12 → 슬러그는 feature-requests

사용법

설치 및 설정 후:

사용자 정의 보기: 카테고리가 색상 헤더가 있는 설정된 섹션으로 그룹화됩니다
펼치기/접기: 섹션 헤더를 클릭하여 콘텐츠 표시/숨김 전환
보기 전환: 헤더의 아이콘을 클릭하여 사용자 정의 보기와 기본 보기 사이 전환
- 사용자 정의 보기: 토글 버튼이 사용자 정의 보기 헤더에 표시됨
- 기본 보기: 토글 버튼이 기본 “카테고리” 헤더에 표시됨
하위 카테고리: 섹션별로 활성화되면 하위 카테고리가 부모 카테고리 아래 들여쓰기로 표시됩니다
카테고리 배지: 작은 색상 사각형 (활성화된 경우)이 각 카테고리의 색상을 표시합니다
미분류 카테고리: 섹션에 할당되지 않은 카테고리는 "기타 카테고리"에 표시됩니다
선호 설정: 보기 선택과 열림/닫힘 상태가 브라우저별로 저장됩니다

고급 기능

그라디언트 배경

활성화된 경우, 섹션 헤더는 부드러운 그라디언트를 사용합니다:

고유색 50% (선택한 배경색)
투명하게 페이드 50%
현대적이고 세련된 외관을 생성

카테고리 숨김

사이드바에서 완전히 숨길 카테고리 슬러그를 지정합니다:

스태프 전용 또는 폐기된 카테고리에 유용
사용자 정의 보기와 기본 보기 모두에 적용
쉼표로 구분된 목록 (예: staff,private,archived)

하위 카테고리

섹션별 토글 (전역 아님)
약간 작은 글꼴로 들여쓰기 표시
시각적 계층 구조를 위해 불투명도 감소
카테고리 배지 색상 유지

버전

현재: 1.0.1
최소 Discourse 버전: 3.3.0
저자: Andy@Focallocal

라이선스

MIT License - LICENSE 파일 참조

지원

이슈 보고: Issues · focallocal/sidebar-categories-organizer · GitHub

Lilly · 11월 21, 2025, 12:43오전

잘하셨네요

카테고리 설정 팁

관리자가 카테고리 슬러그를 직접 입력하게 하는 대신, settings.yml 파일에 다음을 사용할 수 있습니다:

categories_to_hide:
  type: list
  list_type: category
  default: ""
  description:
    en: "Categories to hide from sidebar completely."

이렇게 하면 다음과 같은 설정이 생성됩니다:

그룹 드롭다운을 만들려면 그룹에 대해서도 동일한 방법을 사용할 수 있습니다:

groups_this_setting_applies_to:
  type: list
  list_type: group
  default: ""
  description:
    en: "Groups this setting will apply to."

이렇게 하면 다음과 같은 결과가 나옵니다:

jenmck · 11월 21, 2025, 6:11오전

정말 마음에 들고, 확실히 한 번 생각해 본 적이 있어서 감사합니다!

질문 하나 드리고 싶은데요 — 사용자가 특정 섹션 내의 어떤 카테고리에도 접근할 수 없다면, 해당 섹션 자체가 사용자에게 여전히 표시되나요?

NateDhaliwal · 11월 21, 2025, 6:22오전

네, 맞습니다:

github.com/focallocal/sidebar-categories-organizer

javascripts%2Fdiscourse%2Fapi-initializers%2Fsidebar-organizer.js

main


      
          const currentUser = api.getCurrentUser();
          
          // Get categories to hide - handle both list format (array of IDs) and legacy string format
          let hiddenSlugs = [];
          if (settings.categories_to_hide) {
            if (Array.isArray(settings.categories_to_hide)) {
              // New list format: array of category IDs
              hiddenSlugs = settings.categories_to_hide
                .map(id => allCategories.find(cat => cat.id === parseInt(id)))
                .filter(Boolean)
                .map(cat => cat.slug);
            } else if (typeof settings.categories_to_hide === 'string' && settings.categories_to_hide.trim() !== "") {
              // Check if it's pipe-separated IDs (from category picker) or comma-separated slugs (legacy)
              if (settings.categories_to_hide.includes('|')) {
                // New picker format: pipe-separated category IDs
                const idArray = settings.categories_to_hide.split("|").map(s => s.trim()).filter(s => s !== "");
                hiddenSlugs = idArray
                  .map(id => allCategories.find(cat => cat.id === parseInt(id)))
                  .filter(Boolean)
                  .map(cat => cat.slug);
              } else {

@Drew-ART 해당 조건의 경우 !currentUser || cat.read_restricted로 수정해야 합니까?

Drew-ART · 11월 21, 2025, 6:52오후

아니요, 해당 카테고리/하위 카테고리에 접근 권한이 없으면 숨겨집니다. 설정에서 원하는 항목을 수동으로 숨길 수도 있습니다.

Drew-ART · 11월 21, 2025, 6:53오후

릴리, 고마워. 그거랑 최근 다른 컴포넌트들도 좀 더 개선하도록 업데이트할게.

Drew-ART · 11월 21, 2025, 11:55오후

이제 컴포넌트가 아름다운 드롭다운 카테고리 선택기와 함께 업데이트되었습니다.

jenmck · 11월 23, 2025, 7:51오전

네, 그 부분은 이해했어요. 하지만 제가 말한 건 카테고리만 있는 게 아니라 실제 섹션 자체를 의미합니다.

예를 들어, 다음과 같은 구성이 있다고 가정해 보겠습니다:

Animals

Cats
Dogs

Clouds

Nimbus
Cumulus

Days

Saturday
Sunday

만약 사용자가 Nimbus 또는 Cumulus 카테고리에 대한 접근 권한이 없는 경우, Clouds 섹션은 카테고리가 하나도 없는 상태로 사용자에게 표시될까요? 즉, 다음과 같이?

Animals

Cats
Dogs

Clouds

Days

Saturday
Sunday

아니면, Clouds 섹션은 아예 표시되지 않을까요? 즉, 다음과 같이?

Animals

Cats
Dogs

Days

Saturday
Sunday

Drew-ART · 11월 24, 2025, 2:17오전

사용자가 섹션 내의 어떤 카테고리도 볼 권한이 없다면, 해당 섹션(탭) 전체가 숨겨집니다

Heliosurge · 12월 2, 2025, 5:06오전

정말 멋지네요!

아이디어를 다시 한번 생각하게 되네요, ㅋㅋ.

Doc Categories 플러그인을 사용해 집중된 메뉴가 포함된 맞춤형 섹션을 구성하는 아이디어를 검토해 보고 있습니다. 하지만 색상이나 아이콘을 사용할 수 있도록 좀 더 다듬어야 할 것 같습니다.

Op에 "Install component"를 추가하는 마크다운이 있습니다.

Meta에서 무언가 변경되었나요? 여기 Android에서 인용하려는 부분을 강조할 수 있는 것 같지 않네요. - 아, 해결된 것 같습니다.

Heliosurge · 12월 2, 2025, 5:26오전

Lily, "Install Component"의 Markdown을 받을 수 있을까요?

NateDhaliwal · 12월 2, 2025, 5:51오전

이 컴포넌트에 대한 예시는 다음과 같습니다:

이 테마 컴포넌트 설치

마크다운 형식(repoName과 repoUrl을 교체하세요):

[wrap=theme-install-button repoName="컴포넌트 이름" repoUrl="GitHub 저장소 링크"]
이 테마 컴포넌트 설치
[/wrap]

Heliosurge · 12월 2, 2025, 5:59오전

네이트, 고마워. 검색을 해봤는데, 너무 일반적인 용어를 쓴 것 같아.

NateDhaliwal · 12월 2, 2025, 6:43오전

아, 어디에 언급이 되어 있는지 잘 모르겠네요. Customization > Theme component 토픽 템플릿에서 그 내용을 삭제했어요 .

Heliosurge · 12월 2, 2025, 9:38오후

확실히 멋진 기능입니다. 메타는 zOp의 다른 TC도 고려해 볼 가치가 있을 것 같은데, 이 기능은 주제 생성 시 템플릿을 미리 삽입할 수 있거든요.

글		댓글	조회수
Nest subcategories under their parent categories in the sidebar UX sidebar	34	4113	10월 5, 2024
Topic List Sidebars Theme component official , topic-list-sidebars	23	14610	2월 24, 2026
Showcased Categories Theme component official , showcased-categories	70	11138	4월 8, 2025
Sidebar with categories Plugin	36	9938	6월 9, 2020
Ability to reorder categories in the sidebar UX sidebar	24	2634	11월 5, 2022

사이드바 카테고리 정리

Sidebar Categories Organizer

기능

설치

설정

전역 설정

섹션 설정 (1-10)

카테고리 슬러그 찾기

사용법

고급 기능

그라디언트 배경

카테고리 숨김

하위 카테고리

버전

라이선스

지원

카테고리 설정 팁

Related topics