오른쪽 사이드바 블록

:discourse2: 요약 Right Sidebar Blocks는 주제 목록 오른쪽에 설정 가능한 블록 목록으로 구성된 사이드바를 표시합니다.
:eyeglasses: 미리보기 Discourse Theme Creator에서 미리보기
:hammer_and_wrench: 저장소 링크 https://github.com/discourse/discourse-right-sidebar-blocks
:open_book: Discourse 테마에 처음이신가요? Discourse 테마 사용 입문 가이드

이 테마 컴포넌트 설치

기능

이 컴포넌트에는 사이드바에 표시할 수 있는 몇 가지 블록이 포함되어 있습니다:

  • popular-tags
  • top-contributors
  • recent-replies
  • category-topics
  • custom-html
  • category-list
  • subcategory-list
  • upcoming-events-list*
  • minimal-gamification-leaderboard**

:information_source: Top Contributors 목록이 채워지려면 사용자 디렉터리가 활성화되어 있어야 합니다. 목록이 비어 있다면 관리자 설정에서 enable user directory를 검색하여 활성화되어 있는지 확인하세요.

* Calendar 플러그인과 함께 사용할 때만 사용할 수 있습니다.
** Gamification 플러그인과 함께 사용할 때만 사용할 수 있습니다.

사이드바 블록으로 다른 Ember 컴포넌트도 사용할 수 있으며, 올바른 이름만 사용하면 됩니다. 예를 들어, 코어에는 signup-cta Ember 컴포넌트가 포함되어 있으며, 이를 사이드바에서 그대로 사용할 수 있습니다. 매개변수 집합을 기대하는 컴포넌트는 사용할 수 없지만, 별도의 테마에서 자체 Ember 컴포넌트를 구축하고 사이드바의 blocks 설정에서 이름만 참조하여 사용할 수 있습니다.

제공된 블록의 일부 기능은 매개변수를 통해 제어할 수 있습니다.

이름 설명 기본값 값 적용 대상
count 결과 수 제한 다양 숫자 custom-html 제외 모두
excerptLimit 각 답변 발췌문의 길이 제한 150 숫자 recent-replies
id 카테고리 ID 카테고리 ID (category-list는 쉼표로 구분) category-topics, category-list
content 표시할 내용 html custom-html
scopeToCategory 카테고리 또는 하위 카테고리 X에서만 표시 카테고리 ID popular-tags
excludedTags 제외할 태그 목록 태그 이름 popular-tags
displayInSpecificCategories 위젯을 표시할 카테고리 목록 전체 쉼표로 구분된 숫자 popular-tags
id 리더보드 ID 숫자 minimal-gamification-leaderboard
tag 표시할 태그 태그 이름 tag-topics
period 상위 주제 시간 기간 weekly all, yearly, quarterly, monthly, weekly, daily top-topics
title 블록 제목 다양 문자열 tag-topics, category-list, top-contributors
excludedGroupNames 지정된 그룹 제외 그룹 이름 top-contributors
order 기여자 정렬 문자열 (likes_received 또는 likes_given) top-contributors
period 상위 기여자 시간 기간 yearly all, yearly, quarterly, monthly, weekly, daily top-contributors
includeSubcategories 하위 카테고리 이벤트 포함 false false, true upcoming-events-list
upcomingDays 제공된 값보다 이전에 시작된 이벤트 180 숫자 upcoming-events-list
timeFormat 이벤트 날짜/시간 형식 LT momentjs 형식 upcoming-events-list

설정

이름 설명
blocks
show in routes 고급 사용자 전용: 사이드바를 선택된 루트로 제한합니다.
예: discovery.latest, discovery.unread, discovery.new, discovery.top, tag.show, “c/category-slug” (카테고리의 경우), “tag/sample-tag” (태그의 경우).
비어 있으면 사이드바가 모든 목록 루트에 표시됩니다.

blocks: 표시할 블록을 선택하고 순서를 조정합니다

show_in_routes: 사이드바를 표시할 주제 목록 루트를 결정합니다. 기본적으로 /categories를 제외한 모든 탐색(discovery) 루트에 표시됩니다.

번역 기본값
top_contributors.heading 상위 기여자
top_contributors.view_all 전체 보기
popular_tags.heading 인기 태그
popular_tags.view_all 전체 보기
recent_replies.heading 최근 답변
subcategory_list.heading 하위 카테고리
top_topics.heading 상위 주제
category_list.heading 카테고리

스크린샷

컴포넌트는 매우 기본적인 스타일링만 포함된다는 점에 유의하세요. 컴포넌트를 사용하는 관리자가 자신의 테마에서 자체 스타일링을 추가할 것으로 가정합니다.

상호작용

Discourse Calendar 플러그인과 함께 사용할 경우, 다가오는 이벤트를 위한 사이드바 블록을 추가할 수 있습니다. 블록 이름은 upcoming-events-list이며, 날짜 형식은 이 구문을 따르도록 사용자 지정할 수 있습니다(예: MMMM D, YYYY). 미래까지 얼마나 멀리 볼지 및 하위 카테고리 이벤트가 포함되는지 여부도 설정할 수 있습니다(위 표 참조)


:discourse2: 우리가 호스팅하고 있나요? 테마 컴포넌트는 Pro, Business, Enterprise 플랜에서 사용 가능합니다.

65개의 좋아요
Discourse Gamification
Sidebar for Subcategories
Add User leaderboard in sidebar
FKB Pro - Social theme
Setup Continuous Integration using GitHub Actions
Blogroll (feature request)
How to extend the Discourse sidebar?
How to include a YouTube video or video widget on the community home page?
Adding a recent comments widget
How do you force keep open the sidebar?
Add social media handles on home page
Alternate presentation of sub-categories which puts the _top_ category first?
Discourse Bars :beers: :cocktail: (a sidebar framework)
FKB Pro - Social theme
Looking for the perfect theme
Discourse Bars :beers: :cocktail: (a sidebar framework)
Discourse Bars :beers: :cocktail: (a sidebar framework)
Add right sidebar gamification mini-leaderboard
Add right sidebar gamification mini-leaderboard
Pyx's Modern Theme
Homepage Blocks
Topic List Excerpts
Creating a 'Blocks' API for injecting content
Discourse Bars :beers: :cocktail: (a sidebar framework)
When to switch themes/plugins to `.gjs`?
FKB Pro - Social theme
Recent replies takes 2 seconds to display
Leaderboard in homepage
Discourse Gamification Plugin in the Header
Discourse Calendar updated to use fullcalendar 6
I'm getting errors when I switch categories too quickly
目前我感觉看到的最好看的Discourse主题,有没有谁能爱心奉献一个
Discourse Sidebar Blocks
Tag Icons + Tag Banners + Right Sidebar Blocks
Topic List Previews (TLP)
Hide admin user from user-directory and top contributors
Feedback wanted: userscript to theme component/plugin, or possible core sidebar browsing idea?
Have the upcoming-events block respect the subcategory filter when in Category lists
A reddit-ish theme for Discourse
Cache the right hand sidebar contents
A sense of place: Meta's new sidebar
🏷️ Bars Tag List Component
Using Discourse to Build a Blog, Reddit, X or Facebook-Style Scrolling Platform
Adding ‘hot topics’ to the Sidebar
Custom Components -- add button or text at any plugin outlet
Using Discourse to Build a Blog, Reddit, X or Facebook-Style Scrolling Platform
Top Posters Widget?
Creating a Top 20 leaderboard for a specific date range
Connectors not rendering
Sidebar for Subcategories
Displaying tags along with categories
FKB Pro - Social theme
Creating and managing events
Customizing your site with existing theme components
Creating and installing plugins?
FKB Pro - Social theme

custom-html을 사용하는 경우 “name” 매개변수에 무엇을 추가해야 하나요?

1개의 좋아요

이것이 #공식 테마 컴포넌트로 추가되어 정말 기쁩니다. 확실히 커스터마이징의 새로운 지평을 열었습니다.

질문이 두 가지 있습니다:

  1. 사이드바에서 category-topics가 표시하는 방식과 유사하게 /latest 주제 목록을 표시하고 싶습니다. 이것이 가능한가요? recent-replies가 거의 그 역할을 할 수 있지만(특히 발췌문을 숨길 경우), 답글이 없는 주제까지 포함하는 것이 정말로 필요합니다.

  2. 특정 카테고리에서만 사이드 블록을 표시할 수 있나요? 제가 의미하는 것은, 표시되는 유일한 라우트가 카테고리 주제 목록이고, 제가 지정하는 카테고리에서만 그렇게 하겠다는 것입니다.

1개의 좋아요

죄송합니다. 이 부분에 대한 문서가 부족합니다(지금 바로 업데이트하겠습니다). custom-html의 파라미터 이름은 content입니다.

/latest 전체 목록에 대해 미리 준비된 기능은 없지만, 직접 생성한 후 해당 이름으로 설정에 추가할 수 있습니다. 카테고리/태그 목록과 매우 유사할 것입니다. 다만 필터가 없는 것이 다릅니다.

현재는 특정 카테고리에서만 표시할 수 없습니다. 대신 show in routes 설정에서 discovery.category를 사용할 수 있으며, 이렇게 하면 사이드바가 카테고리 경로에서만 표시됩니다(일부 카테고리가 아니라 모든 카테고리에서).

3개의 좋아요

감사합니다. 각 주제에도 사이드바를 포함할 수 있을까요?

4개의 좋아요

해당 컴포넌트의 한계를 하나 발견했습니다. 특히 category-topics와 subcategory-list 블록의 경우, **서로 다른 id**를 가진 해당 유형의 여러 블록을 추가하면 항상 런치 에디터에서 가장 위에 있는 블록의 주제/하위 카테고리만 표시되는 문제가 발생합니다(제 생각에는).

현재 겪고 있는 버그는 subcategory-list 블록을 약 10~12회 정도 조작한 후, 스테이징 사이트에서 해당 블록이 아예 표시되지 않게 되는 것입니다(아래 영상 참조).

2개의 좋아요

subcategory-list 블록은 어떤 매개변수도 받지 않습니다. 이 블록을 사용하면 현재 탐색 중인 카테고리에 따라 해당 카테고리의 하위 카테고리가 표시됩니다… 따라서 이 블록을 한 번 이상 사용하는 것은 의미가 없습니다.

그래서 비디오에서 subcategory-list가 표시되지 않는 것입니다. 카테고리가 아닌 경로에 있으면 이 블록은 표시되지 않습니다.

category-topics의 경우, 비디오에서 동일한 ID인 7이 두 번 사용되고 있는 것을 볼 수 있습니다. 로컬 테스트를 해본 결과, 서로 다른 ID를 사용하면 서로 다른 토픽이 표시됩니다(즉, 보고된 버그를 재현할 수 없습니다).

4개의 좋아요

안녕하세요, 멋진 플러그인을 만들어 주셔서 진심으로 감사드립니다!

subcategory-list 사이드바에 대해 질문이 있습니다. 특정 카테고리에서만 표시되도록 할 수 있는 옵션이 있을까요?

개발팀이 확인해 본 결과, subcategory-list에는 parameter id 지원이 없는 것 같습니다. 혹시 이 기능을 추가해 주실 수 있을까요?

2개의 좋아요

그리고 top-contributors 블록에 대해: 일주일 동안의 결과를 가져올 수 있는 방법이 있나요?

2개의 좋아요

현재는 해당 옵션이 없습니다. 추가하는 것이 합리적일 것 같지만, 여러 ID를 지원하여 카테고리 목록(예: A, B, C)에 대해 블록을 표시할 수 있도록 해야 할 것 같습니다. 개발자 분들이 이 기능을 추가할 수 있다고 생각하신다면 레포지토리에 PR을 검토해 드리겠습니다. (그렇지 않다면 테마 컴포넌트의 nice-to-have 목록에 추가하겠습니다.)

a) 결과를 가져와서 일주일 동안 캐싱하는 것, b) 모든 로드 시 지난 일주일의 상위 기여자를 가져오는 것 중 어떤 것을 의미하시나요? 후자는 추가하기 쉽지만, 캐싱은 조금 더 까다롭습니다.

3개의 좋아요

@pmusaraj 인기 태그에 아래 내용을 추가해 주실 수 있나요?

padding: 3px 4px 3px 4px

감사합니다.

1개의 좋아요

안녕하세요 @pmusaraj, 답변해 주셔서 정말 감사합니다!

저희 개발자가 여기서 PR을 공유했습니다. 확인해 주시면 좋겠습니다: Implement the `displayInCategories` parameter which allows to specify a list of categories where the `subcategories-list` block is displayed - Pull Request #10 - discourse/discourse-right-sidebar-blocks - GitHub

두 번째 방식이 완벽할 것 같습니다! 실제로 지난 일주일 동안의 상위 기여자 목록을 표시해야 하거든요. 정말 감사합니다!

4개의 좋아요

이 컴포넌트는 사용자가 자신의 테마/테마 컴포넌트에서 스타일을 직접 추가할 수 있도록 의도적으로 최소한의 스타일만 적용되어 있습니다.

감사합니다, 그 PR이 훌륭하고 이제 병합되었습니다!

곧 상위 기여자 블록에 설정 기능을 추가하는 작업도 진행할 예정입니다(혹시 다른 분이 더 빠르시다면, PR 리뷰를 기꺼이 하겠습니다).

3개의 좋아요

해당 코드를 어디서 찾을 수 있는지 모르겠는데, 방향을 잡아주실 수 있을까요? 카테고리-토픽을 수정해서 ID가 없으면 모든 카테고리(즉, 사실상 /latest 목록)가 보이도록 해보고 싶습니다.

모든 블록에 이 기능이 있다면 좋겠습니다!

2개의 좋아요

@pmusaraj 훌륭해요! 도움을 주셔서 정말 감사합니다. 상위 기여자 블록을 사용하게 되기를 기대하고 있어요 :slight_smile:

1개의 좋아요

안녕하세요! 이 컴포넌트가 오류를 일으키는 것인지는 확실하지 않습니다. 하지만 비활성화하면 더 이상 오류가 발생하지 않습니다. :thinking: 이 문제를 해결하는 데 도움을 줄 수 있도록 확인해 주실 수 있을까요? 정말 감사하겠습니다.

활성화된 상태에서 데스크톱에서 특정 주제를 방문하고, 홈페이지로 돌아가기 위해 상단 바의 사이트 로고를 클릭하면 사라지지 않는 로딩 화면이 표시되고 브라우저 콘솔에 오류가 발생했습니다(아래 참조). mysite/logs 경로에서는 관련 오류 로그를 찾을 수 없었습니다.

d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe:98 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'findFiltered')
    at new CategoryTopics (d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe:98:18)
    at h.createComponent (base-component-manager.js:37:1)
    at h.createComponent (ember-component-manager.js:54:1)
    at C.create (manager.js:558:1)
    at Object.evaluate (runtime.js:3301:1)
    at Object.evaluate (runtime.js:1312:1)
    at Dt.evaluateSyscall (runtime.js:5232:1)
    at Dt.evaluateInner (runtime.js:5188:1)
    at Dt.evaluateOuter (runtime.js:5180:1)
    at Wt.next (runtime.js:6191:1)
    at Wt._execute (runtime.js:6175:1)
    at Wt.execute (runtime.js:6166:1)
    at qt.handleException (runtime.js:5369:1)
    at Kt.handleException (runtime.js:5605:1)
    at Lt.throw (runtime.js:5302:1)
    at Be.evaluate (runtime.js:2580:1)
    at Lt._execute (runtime.js:5285:1)
    at Lt.execute (runtime.js:5266:1)
    at Ht.rerender (runtime.js:5634:1)
    at Er.render (index.js:7578:1)
    at index.js:7896:1
    at It (runtime.js:5074:1)
    at Rr._renderRoots (index.js:7876:1)
    at Rr._renderRootsTransaction (index.js:7928:1)
    at Rr._revalidate (index.js:7970:1)
    at invoke (backburner.js:351:1)
    at p.flush (backburner.js:241:1)
    at h.flush (backburner.js:447:1)
    at q._end (backburner.js:999:1)
    at _boundAutorunEnd (backburner.js:648:1)
CategoryTopics @ d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe:98
createComponent @ base-component-manager.js:37
createComponent @ ember-component-manager.js:54
create @ manager.js:558
(匿名) @ runtime.js:3301
evaluate @ runtime.js:1312
evaluateSyscall @ runtime.js:5232
evaluateInner @ runtime.js:5188
evaluateOuter @ runtime.js:5180
next @ runtime.js:6191
_execute @ runtime.js:6175
execute @ runtime.js:6166
handleException @ runtime.js:5369
handleException @ runtime.js:5605
throw @ runtime.js:5302
evaluate @ runtime.js:2580
_execute @ runtime.js:5285
execute @ runtime.js:5266
rerender @ runtime.js:5634
render @ index.js:7578
(匿名) @ index.js:7896
It @ runtime.js:5074
_renderRoots @ index.js:7876
_renderRootsTransaction @ index.js:7928
_revalidate @ index.js:7970
invoke @ backburner.js:351
flush @ backburner.js:241
flush @ backburner.js:447
_end @ backburner.js:999
_boundAutorunEnd @ backburner.js:648
Promise.then(异步)
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
_boundAutorunEnd @ backburner.js:648
Promise.then(异步)
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
_boundAutorunEnd @ backburner.js:648
Promise.then(异步)
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
_boundAutorunEnd @ backburner.js:648
Promise.then(异步)
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_ensureInstance @ backburner.js:1206
scheduleOnce @ backburner.js:845
k @ index.js:522
queueRerender @ mount-widget.js:124
scheduleRerender @ widget.js:319
rerenderResult @ widget.js:365
F @ hooks.js:207
(匿名) @ hooks.js:247
dispatch @ jquery.js:5430
_.handle @ jquery.js:5234
frame:251 You dismissed the flag, but third party cookies are disabled on your browser so the flag will come back the next time you visit the page.

위 오류 로그 첫 줄에 언급된 js 파일에서 이 컴포넌트에 대한 정보를 확인할 수 있습니다.

// line 96-103 of d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe
      const filter = "c/" + categoryId;
      this.category = _category.default.findById(categoryId);
      this.store.findFiltered("topicList", {
        filter
      }).then(result => {
        const results = result.topic_list.topics;
        results.forEach(topic => {
          topic.url = "".concat((0, _getUrl.default)("/t/")).concat(topic.slug, "/").concat(topic.id);
1개의 좋아요

아, 네, 죄송합니다. 이제 수정되었습니다. 테마 컴포넌트의 최신 업데이트를 받아주시면 됩니다.

3개의 좋아요

감사합니다! 이제 잘 작동합니다.

3개의 좋아요

@pmusaraj 님, 강하게 들리진 않길 바라지만, 해당 기능 구현에 대한 예상 완료 시점(ETA)이 있는지 궁금해서 여쭤봅니다.

정말 멋진 추가 기능이 될 것 같습니다 :slight_smile:

감사합니다!

3개의 좋아요

멋진 컴포넌트를 만들어 주셔서 감사합니다!

이 기능이 활성화되어 있으면 헤더와 푸터가 전역적으로 사라지는 것을 확인했습니다 (header.html과 footer.html의 모든 내용). 의도된 동작인가요? 이 문제를 우회하려면 PluginAPI를 사용해 헤더/푸터를 수동으로 추가해야 합니다.

2개의 좋아요