Discourse Bars 🍻 🍸 (사이드바 프레임워크)

merefield · 3월 6, 2024, 4:17오후

개요

컴포넌트^[1]를 상단 및 사이드바 위에 레이아웃할 수 있도록 하는 테마 컴포넌트입니다.

Route(경로)와 Position(위치)별로 “위젯” 집합을 명확히 지정합니다.
discovery^[2], topic(토픽), tag(태그)^[3], category(카테고리)^[3:1], categories(카테고리 목록)^[3:2] 또는 tags-intersection(태그 교차)^[4] 각각에 대한 설정을 지원합니다.
"바(Bars)"는 top(상단), left(좌측), right(우측) 또는 대체 우측 위치 중 하나를 사용할 수 있습니다.
각 바는 접기(collapsed) 또는 닫기(dismissed)가 가능합니다 (닫은 상태를 초기화하려면 브라우저를 새로고침해야 합니다). 기본적으로 최소화(minimised) 상태로 설정할 수 있습니다.
공식 사이드바를 처리하지만, Bars의 좌측 사이드바를 사용할 계획이라면 공식 사이드바의 드롭다운(Dropdown) 모드를 사용하는 것이 권장됩니다.
일부 큰 글씨를 표시하는 기존 예시 설정이 포함되어 있으며, 이는 데모 목적이기도 하고 예시 설정을 확인할 수 있도록 하기 위함이기도 합니다. 이 설정들을 삭제하고 자신의 컴포넌트 이름으로 교체하세요.
하나의 컴포넌트, bars-custom-html(예시 설정 참고)이 기본 제공되지만, 기존 테마 컴포넌트 및 플러그인의 많은 컴포넌트와 호환됩니다.
모바일 지원은 아직 구현되지 않았습니다.

빠른 링크


코드 가져오기	`https://github.com/merefield/discourse-tc-bars`
코드 보기	GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars · GitHub
설치 가이드	Installing a theme or theme component

이 테마 컴포넌트를 즐기고 계신가요? GitHub에서 해주세요!

예시:

최초 로드 시:

이 TC에 대해 알아둘 몇 가지 중요한 사항!

이 테마 컴포넌트는 테마 개발에 대한 기술적 이해가 있는 개발자 및 관리자를 위한 것입니다. Bars를 사용하여 사이드바를 구현하는 데 도움이 필요하고 기술적 역량이 충분하지 않다면, 저나 Marketplace 채널의 개발자를 고용할 수 있습니다.
이 테마 컴포넌트는 사이드바를 지원하는 프레임워크를 제공하는 것이 목적입니다. 최종적인 시각적 마무리(polish)는 추가 CSS를 사용하여 테마에서 직접 추가해야 하며, 이 컴포넌트는 이를 제공하지 않습니다. 그러나 많은 작업을 대신 처리하여 고려할 사항을 줄여주고, 이전에는 불가능했던 작업을 수행할 수 있는 능력을 부여할 수도 있습니다 …

컴포넌트 고려 사항

컴포넌트 이름을 지정해야 합니다. 컴포넌트 이름은 실제로 테마, tc 또는 플러그인의 component 디렉터리 내 파일명에서 접미사를 제외한 것과 동일합니다.
- 컴포넌트 이름은 테마 컴포넌트의 이름(여러 개의 Ember Glimmer 컴포넌트를 포함할 수 있음)이 아니라, 실제 Ember 컴포넌트 파일의 이름입니다 . 예를 들어:
image659×364 12.3 KB

따라서 layouts-tag-list
기존 테마 컴포넌트나 플러그인에서 가져올 수 있습니다. 기존 컴포넌트가 작동할 수 있습니다. 예시:
- 🏷️ Bars Tag List Component
- Render a component within a Widget. (Using select-kit components within plugin code) - #31 by merefield
- Discourse AI Topic Summary 🤖 … 그리고 어쩌면:
- 리더보드 위젯: https://github.com/discourse/discourse-gamification/blob/main/assets/javascripts/discourse/components/minimal-gamification-leaderboard.js (시도해 보시면 아래에 알려주세요!)
컴포넌트를 구축하려면 상당한 전문 지식이 필요합니다.
- 하지만 다른 테마 컴포넌트에서 자신의 컴포넌트를 구축해 보고, 두 컴포넌트가 동일한 테마에서 모두 활성화되어 있는지 확인해 보세요.
컴포넌트는 자체 데이터를 소싱해야 합니다 (이러한 방식으로 레이아웃을 구성하는 데 필요한 특정 플러그인 아웃렛 때문에 플러그인 아웃렛을 통한 모델 패스쓰루를 사용할 수 없습니다).
- 기본적으로는 Discourse 코어 또는 기존 플러그인이 제공하는 기존 JSON API 데이터만 사용할 수 있습니다. 현재 API에서 소싱할 수 없는 맞춤 데이터가 필요하면 저나 #marketplace의 누군가를 고용하여 도움을 받을 수 있습니다.
사이드바 및 컴포넌트 경계를 취향에 맞게 스타일링해야 할 수 있습니다. (다시 한번 말하지만, 도움이 필요하면 개발자 고용을 고려해 보세요).
- 박스 섀도우와 테두리의 전략적인 사용은 디자인을 훨씬 멋지게 만들 수 있습니다 - 예술적으로 접근하세요!

왜 만들었는가

Discourse 코어가 Ember 5로 업데이트되면서, Pavilion의 플러그인 Layouts가 Discourse 레이아웃을 조작하는 데 사용하던 트릭이 더 이상 작동하지 않게 되었습니다. 이제 비교적 쉬운 사용자 인터페이스를 통해 토픽 경로에서 사이드바를 표시하는 쉬운 방법이 없었습니다.
또한, Ember는 작업하기 훨씬 나은 Glimmer 컴포넌트를 도입했습니다. (Layouts는 Glimmer 컴포넌트를 대체하기 위해 비추천(deprecated)된 Widgets API를 사용했습니다).
마지막으로, Discourse 코어 팀이 테마 컴포넌트 설정을 위한 새로운 JSON 편집기를 제공하여 더 복잡한 설정 배포가 가능해졌습니다
Layouts 플러그인을 수정하는 것(Layouts 시대에는 TC가 존재하지 않았습니다)보다는, 대부분의 필요한 작업을 프론트엔드에서만 달성할 수 있으므로 테마 컴포넌트로 재구축하는 것이 합리적였습니다.
“Bars” 등장 Cheers!!

알려진 문제

상단 바가 고정되지 않습니다 (해결할 수 없으면 해당 설정을 제거할 수 있습니다).

크레딧

수년간 유용하게 사용되었으나 현재는 깨진 Layouts 플러그인의 정신적 후속작입니다. @angus가 제작했습니다 (Cheers!).
Right Side Blocks의 params 시스템을 사용합니다 (감사합니다 @pmusaraj!).

‘discovery’(경로)라는 용어는 특정 토픽에 진입하기 전에 이용 가능한 토픽을 탐색할 수 있는 주요 토픽 목록 페이지(예: “최신”, “새로움”)를 가리킵니다. ↩︎
기술적으로는 “discovery” 경로이지만, 선택적으로 다르게 취급할 수 있도록 구분된 이름으로 분리했습니다. ↩︎
여기에서 더 자세한 내용을 볼 수 있습니다. 모든 Bars 설치자가 사용자 정의 홈 페이지를 원하지는 않으므로(선택 사항으로 유지하기 위해), Bars는 about.json에 필요한 수정자를 추가하지 않습니다. 따라서 활성화하려면 상위 테마 또는 다른 TC에서 이 수정자를 직접 추가해야 합니다. ↩︎ ↩︎ ↩︎
Tags Intersection 플러그인을 참조하세요. ↩︎

Lilly · 3월 6, 2024, 4:27오후

와, 이건 정말 멋지네요! 잘하셨어요, 로버트. 이걸 만들어서 공개해 주셔서 감사합니다.

포크했습니다!

thoka · 3월 6, 2024, 5:57오후

커스텀 위젯을 추가하는 법을 배우는 단계의 초보이지만: 모바일 뷰에서 스크롤되지 않는 푸터에 위젯을 추가할 수 있는 옵션이 있으면 좋겠습니다.
이 컴포넌트의 향후 버전에서 이것이 가능할까요?

merefield · 3월 6, 2024, 6:00오후

현재 단계에서 추가 "바"를 추가할 계획은 없지만, 상황이 안정되고 TC가 명확하게 안정화되면 …

… PR이나 스폰도 항상 환영합니다

denvergeeks · 3월 6, 2024, 6:56오후

정말 멋지네요. 감사합니다! 사이드바 중 하나에 태그 목록 위젯을 포함할 때 설정이 어떻게 보이는지 예시를 제공해 주실 수 있나요?

예를 들어, 설명서에 따르면 이렇게 하면 작동할 것 같은데…

하지만 왼쪽 사이드바에는 여전히 대문자 a만 표시되고 있습니다…

merefield · 3월 6, 2024, 7:03오후

두 가지가 있습니다:

첫째, StarZen의 유사한 설정입니다:

컴포넌트 이름은 실제로 컴포넌트 파일 이름과 동일합니다(본문에 추가하겠습니다).

https://starzen.space

둘째, 정말 어리석은 일이지만, 저장 버튼을 누른 후 저장 버튼 옆의 체크표식도 눌러야 합니다.

이중 저장입니다!

이것은 바가 아닌 코어의 현재 테마 설정의 특성입니다. 본문에 해당 사항에 대한 주석을 추가할 수도 있습니다.

denvergeeks · 3월 6, 2024, 7:12오후

네, 이중 저장을 했습니다

그래도 결과는 똑같네요. 뭔가 놓치고 있는 것 같습니다. 도움을 드릴 수 있는 다른 정보가 있을까요?

merefield · 3월 6, 2024, 7:13오후

설정 JSON을 공유해 주세요 (TC 하단의 버튼).

denvergeeks · 3월 6, 2024, 7:14오후

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

merefield · 3월 6, 2024, 7:15오후

여러분의 component_name은(는) 여전히 잘못되었습니다. 제 예를 참고해 보시고, 나머지 부분은 삭제하는 것이 좋을 수도 있습니다.

denvergeeks · 3월 6, 2024, 7:22오후

흠… 알겠습니다. 첫 번째 항목을 제외한 나머지를 모두 삭제하고, 이름을 당신의 것과 일치하도록 변경했습니다 (컴포넌트 이름은 TC GitHub - merefield/discourse-tc-bars-tag-list-component: The Tag List Widget allows you to display tags from Discourse in a sidebar using Pavilion's Custom Layouts Plugin. · GitHub 에서 가져오는 것인데, 올바른 컴포넌트 이름이 layouts-tag-list라는 것을 어디서 찾을 수 있을까요?).

하지만 모달에서 컴포넌트 이름을 변경해도 설정 JSON에서는 변경되지 않고, 나머지 항목들도 제거되지 않습니다. 두 번 저장해도 마찬가지입니다…

merefield · 3월 6, 2024, 7:25오후

위에서 설명했듯이 (그리고 이제 OP에서 더 자세히 설명했습니다), 컴포넌트 이름은 Theme Component의 이름(여러 Ember Glimmer Component를 포함할 수 있음)이 아니라, 실제 Ember Component의 이름입니다:

즉, layouts-tag-list입니다.

이것은 유용한 오해라고 생각합니다. 이 예를 들어 OP에서 더 자세히 설명하겠습니다.

왜 설정이 유지되는지 모르겠습니다

Theme Component를 삭제하고 다시 추가한 후 동일한 과정을 다시 시도해 보세요.

아니면 그냥 브라우저를 새로고침해 보세요?

ckshen · 3월 6, 2024, 7:34오후

@merefield 님, 수고하셨습니다!

기능적으로 Discourse Bars는 커스텀 HTML을 사용하는 우측 사이드바 블록(Right Sidebar Blocks)과 어떻게 다른가요? 위치가 반드시 우측에만 있어야 한다는 점을 제외하고는요.

merefield · 3월 6, 2024, 7:35오후

Bars는 RSB보다 앞서 등장한 Pavilions Layouts의 정신적 후속작입니다.

RSB와 비교했을 때, Bars는 주로 멀티 루트 및 멀티 포지션 지원(Bars의 목표는 Layouts의 유용성과 유연성을 재현하는 것입니다)을 제공하며, 핵심적인 추가 기능은 토픽 루트 지원입니다. 또한 현재 params를 지원하지 않으며, 아직 해당 사용 사례를 마주한 적이 없습니다. 데모용 큰 글자 컴포넌트를 제외하고는 다른 컴포넌트를 번들링하지 않으며, 이는 의도적인 선택입니다. 이 플러그인은 Layouts와 마찬가지로 관리자/개발자용 프레임워크로 설계되었습니다.

로드맵도 더 야심차게 꾸려질 수 있습니다. 자금을 확보할 수 있다면 Layouts에 있던 모바일 기능도 추가할 수 있습니다. 해당 작업을 후원하고 싶으신 분은 자유롭게 저에게 연락해 주세요.

denvergeeks · 3월 6, 2024, 7:38오후

그래서 바 TC와 layouts-tag-list TC를 모두 삭제하고 다시 설치해 봤어요 (둘을 각각 따로, 그리고 함께 제거하고 다시 추가해 봤는데) 결과는 전부 똑같아요. 그리고 이전처럼 매번 새로고침도 했고, 브라우저 캐시도 비웠습니다.

merefield · 3월 6, 2024, 7:41오후

설정 오류가 멈추는 문제를 재현할 수 없습니다. 저는 왼쪽 사이드바를 추가하고 제거해 보았지만 문제가 발생하지 않았습니다.

같은 문제가 발생한 다른 보고가 있는지 궁금합니다.

denvergeeks · 3월 6, 2024, 7:49오후

시도해 주셔서 감사합니다. 오늘 오후에 다른 Discourse 인스턴스 몇 개에서 테스트해 보고 다시 보고드리겠습니다.

denvergeeks · 3월 6, 2024, 8:17오후

또한 이제 모든 플러그인을 제거하고 재구축(그리고 다른 TC나 테마가 설치되어 있지 않음)했으며, 어젯밤에 새로 설치한 것입니다.

도움이 된다면, 위에서 언급한 설정과 동일한 상태에서 왼쪽 사이드바가 다른 곳에서는 나타나지 않지만 /latest 경로에서는 표시된다는 것을 발견했습니다(다만 태그가 표시되지 않고 제목 "Tags"만 표시됨).

그리고 여기 설정 json이 있습니다…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list\",\"route\":\"discovery\",\"position\":\"left\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

merefield · 3월 6, 2024, 8:22오후

그 부분은 직접 디버깅해야 합니다 - 콘솔, 테마 CSS 등을 확인해 보세요.

제 환경에서는 정상 작동합니다:

레이아웃 태그 목록(Layouts Tag List)이 태그 그룹(Tag Groups)을 요구하는지 기억이 나지 않습니다 … 필요할 수도 있겠네요!

denvergeeks · 3월 6, 2024, 11:30오후

네, 설정에서 Tag Groups를 활성화하고(그런 다음 몇 개의 Tag Groups를 생성하면) 태그가 표시되기는 했습니다.

그러나 컴포넌트 항목의 라우트를 discovery로 설정해도 여전히 /latest, /new 및 /top 목록에서만 왼쪽 바가 표시됩니다.

여기서 사용할 수 있는 모든 “routes” 목록을 알려 주시겠습니까?

다시 한번 감사합니다!

글		댓글	조회수
Discourse Tab Bar for Mobile Theme component	79	23812	7월 28, 2026
Right Sidebar Blocks Theme component official , desktop , right-sidebar-blocks	186	19226	9월 26, 2026
Topic List Sidebars Theme component official , topic-list-sidebars	23	14842	2월 24, 2026
FKB Pro - Social theme Theme	499	42832	10월 15, 2026
A reddit-ish theme for Discourse Theme	120	18040	7월 29, 2026