사이드바 메뉴 섹션, 특히 전역 사용자 정의 섹션의 순서를 변경하고 싶어하는 Discourse 관리자 요청을 여러 번 확인했습니다. 현재 CSS를 통해 이를 수행하는 것은 대부분의 사용자에게 직관적이지 않고 복잡하며, 관리 및 수정이 어려운 경우가 많습니다. 이에 따라 관리자 UI에서 이 작업을 훨씬 쉽게 수행할 수 있도록 테마 컴포넌트를 제작했습니다.
개요
이 Discourse 테마 컴포넌트는 관리자가 관리자 사용자 인터페이스에서 포럼의 사이드바 메뉴 섹션 순서를 변경할 수 있게 해줍니다. 이는 기본 섹션과 전역으로 표시되는 모든 사용자 정의 섹션을 포함합니다.
이 컴포넌트는 데스크톱 및 모바일 사이드바 뷰, 그리고 헤더 드롭다운 모드 모두에서 작동합니다(다만, 사이드바 모드를 위해 최적화되었습니다).
community 섹션은 사이드바의 기본 상단 섹션을 의미하며, Topics 헤더와 More 드롭다운 하위 메뉴를 포함합니다. community 섹션 위에 기본 또는 사용자 정의 섹션을 1~2개 이상 올리는 것은 권장되지 않습니다.
설정에서 기본 섹션을 삭제하지 마세요. 삭제하면 순서가 어긋날 수 있습니다(언제든 다시 추가하거나 설정을 초기화할 수 있습니다).
이 컴포넌트를 설정하는 가장 좋은 방법은 컴포넌트 관리자 화면(순서 변경 목록 설정 포함)을 하나의 브라우저 창에서, 그리고 테스트 사용자로 포럼 사이드바 뷰를 옆에 있는 다른 창에서 확인하는 것입니다. 목록에서 메뉴 섹션 순서를 변경할 때마다 페이지를 새로고침하세요.
컴포넌트 관리자 설정에서 사용자 정의 섹션은 슬러그(slug) 명명 규칙을 사용해야 하며, 그렇지 않으면 무시됩니다(예: "Custom Menu Name"의 경우 custom-menu-name, "Useful Links"의 경우 useful-links 등).
설정
설정
설명
Sidebar menu order
기본 메뉴 섹션을 포함하는 목록 설정입니다. (community는 사이드바의 기본 상단 섹션이며 More 드롭다운 하위 메뉴를 포함합니다.) 측면의 위/아래 화살표를 사용하여 메뉴 섹션의 순서를 변경합니다. 전역으로 표시되는 사용자 정의 섹션도 추가할 수 있습니다 - 메뉴 이름 슬러그를 사용하세요(예: Test Menu라는 제목의 사용자 정의 메뉴의 경우 설정에 test-menu를 추가).
테마 컴포넌트는 기본적으로 기본 설정을 사용합니다. 관리자는 순서 목록에 혼합하려는 전역 사용자 정의 메뉴 섹션을 추가한 다음, 기본 섹션과 함께 순서를 다시 정렬해야 합니다.
아래 스크린샷은 community 섹션과 “Dev Links”(dev-links), “Toolbox”(toolbox)라는 두 개의 예시 사용자 정의 메뉴 섹션이 왼쪽의 컴포넌트 관리자 패널과 오른쪽의 일반 사용자에게 어떻게 표시되는지 보여줍니다. 컴포넌트 관리자 설정에서 메뉴 섹션을 위/아래로 이동하는 화살표는 작은 빨간색 상자에 표시되어 있습니다.
또한, 위 관리자 스크린샷에서 inbox-section이라고 표시된 섹션을 주목해 보세요. 이는 Messages section for sidebar 컴포넌트가 사이드바에 삽입하는 Messages 섹션입니다(위에서 toolbox 사용자 정의 메뉴 아래). 이 컴포넌트를 사용하여 해당 섹션의 위치도 이동할 수 있음을 보여줍니다.
sidebar_menu_order 설정에 새로운 전역 사용자 정의 섹션을 추가한 후, 포럼 사용자는 브라우저를 새로고침하거나 사이드바를 접었다 펼쳤을 때 새로운 올바른 메뉴 순서를 확인하게 됩니다.
이 컴포넌트가 활성화된 상태에서 새로운 전역 사용자 정의 메뉴 섹션을 생성하면, 사이드바가 다시 렌더링될 때까지(페이지 새로고침 또는 접기/펼치기) 관리자에게 일시적으로 중복된 섹션이 표시될 수 있습니다.
사용자가 생성한 사용자 정의 메뉴 섹션은 해당 사용자의 사이드바 하단에 항상 표시되며, 그 외에는 영향을 받지 않습니다.
Admin -> All Site Settings -> Chat Separate Sidebar Mode 설정이 Always로 설정되어 있으면, 채팅 버튼은 평소와 같이 하단에 표시되며, 컴포넌트는 기본 채팅 메뉴 섹션(chat-dms, chat-channels, chat-search)을 무시합니다.
이는 제목이 다르지만 section_type이 community임을 확인시켜 줄 것입니다. 그러면 다음을 수행할 수 있습니다:
# rails enum을 통해 기본 커뮤니티 섹션 찾기
section = SidebarSection.find_by(section_type: :community)
# 폴백: 타입으로 찾지 못하면 특정 커스텀 제목을 찾아보기
section ||= SidebarSection.find_by(title: 'the-forum', public: true)
if section
section.update!(title: 'Community')
puts "성공: 섹션이 'Community'로 이름이 변경되었습니다."
else
puts "오류: 섹션을 찾을 수 없습니다."
end
제목이 the-forum인 커뮤니티 섹션을 보여주고 이를 다시 Community로 변경한 뒤, 변경이 제대로 되었는지 확인하는 제 Rails 콘솔 스크린샷:
저는 이 멋진 테마 컴포넌트를 릴리의 또 다른 멋진 Group Sidebar Menus 컴포넌트와 함께 사용하고 있습니다. 제 사용 사례는 클라이언트를 위한 커스텀 메뉴를 만들어 조직 내 모든 구성원이 자신에게 관련 있는 빠른 링크를 커뮤니티 섹션 바로 위, 상단에 볼 수 있도록 하는 것입니다.
향후 이 기능을 사용할 분들(저를 포함하여)을 위해 참고할 점이 하나 있습니다. 사이드바 섹션 이름은 매우 민감하며 정확히 일치해야 합니다. 이름의 공백은 대시(-)로 변환됩니다. 즉, "Doing business"는 "doing-business"가 됩니다.
이것까지는 모두 잘 작동하지만, 그룹 사이드바 섹션을 만들 때 실수로 그룹 이름 끝에 공백을 넣게 되어 "doing-business-"가 되어버렸습니다. 개발자 도구를 통해 문제를 해결하는 데 꽤 시간이 걸렸습니다.
이 기능들은 저에게 매우 중요하므로, 모든 디스커스 사이트에서 더 쉽게 접근하고 사용할 수 있도록 코어에 추가되는 것을 진심으로 고려해 주셨으면 합니다.
소개
개요
설치 및 설정
설정
스크린샷
참고 사항
