Topic List Sidebars

:information_source: Formerly “Discourse Category Sidebars” — the name of this theme component has been updated to Topic List Sidebars now that it supports both categories and tags.

:discourse2: Summary Topic List Sidebars takes a topic and applies it as a sidebar for a category or tag’s topic list.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-topic-list-sidebars
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

This theme component takes a topic and applies it as a sidebar for a category or tag’s topic list. These sidebars are only visible when the browser is 767px or wider (most tablets and monitors).

What can I do with this theme component?

  • Choose a topic and display its content as a sidebar for a category or tag.

  • Set a sidebar to be displayed on the /latest, /new, /unread, and /top pages by using all as the category name in your settings.

  • Choose for the sidebars to appear on the left or the right of the topic list.

  • By default a category’s sidebar will also display for all its subcategories unless a subcategory has its own sidebar defined (you can disable this by unchecking the inherit parent sidebar setting).

How do I configure it?

Choose your categories and tags, and add the id of the topic (e.g. example.com/t/example-topic/57) that you would like to use to populate the sidebar’s content

I recommend creating sidebar topics in their respective categories/tags, closing the topic so there are no replies, and unlisting it (so it doesn’t appear in the topic list).

Note that you cannot use a topic in a private category as a sidebar in a public category (you can technically, but users without access to that private topic will just see a empty sidebar!).

Settings

Name Description
sidebars Add and remove sidebars
sidebar side Choose from Left or Right
inherit parent sidebar If checked subcategories will inherit their parent category’s sidebar (unless the subcategory has its own sidebar assigned).

When unchecked subcategories will only display a sidebar if one is specified.
stick on scroll When checked sidebar has a sticky position on scroll

Developer Notes

Each category sidebar is wrapped with a class that contains the category slug, so for the staff category that would be .category-sidebar-staff. You can use these classes to style the individual sidebars.

The body tag on pages with sidebars also has a class added so you can use body.custom-sidebar to apply styles on all pages that have a sidebar.

Credits

:heart: Special thanks to @xrav3nz for laying the groundwork to make this component possible!


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-18T11:18:45Z

Check documentPerform check on document:
59개의 좋아요

Trying to figure out how to make this work with tags as well. (we use tags heavily rather than having tons of categories.)

It looks like it may be about replacing controller:navigation/category with whatever the equivalent for tags is but not sure.

2개의 좋아요

I just took a quick look and it’s possible to do this for tags…

I’ll probably work on this more tomorrow and spin it off into its own repo.

Yep, that’s the core of it — this seems to work for tags:

const controller = container.lookup("controller:tags-show");
const tag = controller.get("tag");

Update: I’ve got a theme component available, Discourse Tag Sidebars

10개의 좋아요

Since I am using the header submenu plugin, A part of the text is covered by my header bar. It would be great if it was possible to add extra margin/offset or whatever it’s called for the case when additional elements before the header are covering the sidebar’s content.

Also: is there any way to keep the category drop down menu above the sticky sidebar’s content? that would make it easy for users to jump between categories quickly.

altogether I think the category sidebar is a great plugin and has huge potential to add useful information to the forum structure!

크리스, 또 멋진 플러그인을 올려주셨네요! 감사합니다!

도와주실 수 있기를 바라며 몇 가지 질문/제안을 드립니다…

1 - 사용자가 포럼을 둘러보며 페이지를 이동할 때, 사이드바에 포함된 게시물의 최신 버전이 항상 확인되도록 설정할 수 있을까요? 현재 사이드바의 콘텐츠는 페이지 새로고침 시에만 업데이트되는 것 같습니다. 불행히도, 내용이 거의 변하지 않는 콘텐츠는 사용자(특히 활발하게 활동하는 사용자)들에게 오래된 것으로 인식되기 시작하므로, 가능하다면 사이드바에 연결된 주제를 자주 업데이트하고 싶습니다. (마찬가지로, 해당 페이지 옵션에서 주제 ID가 변경되면 다음 페이지 뷰에서 이를 반영하도록 하면 좋겠습니다.) 페이지/뷰당 추가 로딩은 괜찮지만, 다른 사용자들에게 부담이 될까 봐 걱정되신다면 현재와 같은 방식으로 작동하도록 하는 “게시물 내용 캐시” 옵션을 추가해 주실 수 있을까요?

2 - 사이드바 하나당 주제 하나 이상에서 콘텐츠를 가져오거나 연결할 수 있을까요? 예를 들어 ‘최신’ 페이지에서는 33, 55번 주제(그 순서대로)의 콘텐츠를 표시하고 싶을 수 있습니다. 이렇게 하면 페이지별로 다른 콘텐츠를 표시하면서도, 모든 사이드바 하단에 표시되기를 원하는 공통 정보/링크를 포함할 수 있어 매우 유용할 것입니다.

3 - 플러그인을 확장하여 사이트 전체에서 사용할 수 있게 해줄 수 있을까요? 현재는 특정 페이지에서만 사용할 수 있는 것 같습니다. 이상적으로는 이 기능을 포럼 전체의 모든 주요 섹션/페이지에서 사용하고 싶습니다. (아마도 태그 사이드바 플러그인을 이 플러그인과 함께 사용하면 더 정밀한 제어(예: 개별 태그 및/또는 주제)가 가능할 것입니다. 두 가지를 결합하면 매우 강력한 사이드바 패키지가 될 수 있을 것 같아요!!)

4 - 사이드바 너비 옵션과 함께 설정 가능한 잘림/표시 안 함 지점도 추가할 수 있을까요? CSS 변경을 통해 가능하기 때문에 큰 문제는 아니지만, 옵션에 포함되어 있으면 좋겠다고 생각합니다.

5 - 마지막으로… 설문을 작동하게 해주시겠어요? 사용자가 사이드바에서 바로 설문에 투표할 수 있다면 정말 훌륭할 것 같아요!!! 사이드바에 이러한 동적 콘텐츠를 포함하면 사용자가 흥미를 느끼고, 자동으로 무시할 가능성이 줄어든다고 생각합니다.

위 내용들이 모두 반영된다면, 이 플러그인은 코어에 포함되거나 공식 DC 플러그인으로 채택될 좋은 후보가 될 것이라고 생각합니다. 제 생각에는 이 플러그인이 사람들이 자신의 포럼에 개성을 부여하는 데 도움이 될 것이며, 사람들이 재미있고 흥미로운 방식으로 이를 활용할 것이라고 확신합니다! :smiley:

안녕하세요,

훌륭한 컴포넌트네요. 특정 카테고리 내 각 주제에 대해 이러한 사이드바를 사용할 수 있을까요?

감사합니다.

하위 카테고리를 참조하는 문법은 무엇인가요? 지금까지 시도해 본 것들:

category/subcategory,123
subcategory,123
category-subcategory,123

이 중 어느 것도 작동하지 않는 것 같습니다. 상위 카테고리는 표시되긴 합니다.

1개의 좋아요

음, 누군가 답변해 주실 수 있나요? 답을 주는 게 그렇게 어렵지는 않을 텐데…

리그레이션이 발생한 것 같으며, 일부 경우에서 하위 카테고리가 작동하지 않았습니다. 구문은 카테고리와 동일해야 합니다: subcategory, 123

테마를 리팩토링했으므로, 업데이트 후 하위 카테고리가 정상적으로 작동할 것입니다!

6개의 좋아요

정말 잘 작동했습니다: 완벽합니다!
그랜드 오프닝에 딱 맞춰 주셔서 정말 감사합니다.

1개의 좋아요

훌륭한 플러그인이네요!

혹시 그룹에서도 사용할 수 있을까요? 그룹에 사이드바를 추가하면 그룹에 대한 정보를 제공하기에 매우 유용할 것 같습니다.

그룹 파라미터(컴포넌트가 그룹 안에 있음을 인식하도록 하는 방법)를 가져오는 방법을 알려주실 수 있을까요? 직접 시도해서 PR을 만들어 보고 싶습니다.

@hyphalos Layouts Plugin 사이드바에 추가할 수 있는 Groups Widget을 만들었습니다.

해당 위젯을 위해 작성했던 코드가 PR 작성에 도움이 될 수 있습니다:

또는 Layouts 플러그인과 위젯 자체를 사용할 수도 있습니다.

2개의 좋아요

사이드바(sidebar)라는 이름에서 알 수 있듯이, 이런 요청은 다소 대담할 수 있지만: 주제 목록 옆이 아니라 항상 _위_에 콘텐츠를 배치할 수 있는 옵션을 추가할 수 있을까요?

저희는 디스코스를 소셜 인트라넷으로 사용하며, 일부 카테고리에서는 링크, 사람 목록 등을 잘 관리할 수 있는 공간이 필요합니다. 이 메커니즘이 그런 용도에 매우 유용할 것 같지만, 사이드바의 공간이 너무 부족합니다.
CSS 해킹도 환영합니다.

이미 카테고리 배너를 시도해 보았지만, 첫 번째 단락으로만 제한되어 있어 이 옵션은 사용할 수 없었습니다.

감사합니다,
랄프
(베를린 주립도서관)

이 TC는 어떨까요?

아마도 첫 번째 단락은 여전히 그대로일 것 같습니다. 하지만 잠재적으로 수정할 수 있습니다.

크리스, 안녕하세요. 정말 좋습니다.

사이드바에서 상단 바로, 즉 사이트 헤더 아래나 카테고리 로고 바로 아래로 이동할 수 있도록 수정하거나 옵션을 추가할 수 있을까요?

혹은 커스텀 CSS를 추가하여 위치를 변경하고, 모바일에서도 상단 고정 스티키 바처럼 사이트 메인 바 바로 아래에 표시되도록 하는 방법에 대한 안내를 받을 수 있을까요?

이 테마 컴포넌트의 작동 방식을 잘못 이해하고 있을 수도 있지만, 왼쪽에 주제 목록을 표시하고 목록에서 주제를 클릭하면 오른쪽에 게시글이 표시되도록(그리고 왼쪽의 주제 목록은 고정된 상태로 유지되도록) 사용할 수 있을까요? 카테고리를 볼 필요는 없습니다. Flarum과 비슷한 모습이 될 것입니다.

1개의 좋아요

아니요, 이 컴포넌트가 하는 일은 특정 카테고리의 주제 목록에 대한 사이드바를 채우기 위해 해당 주제의 콘텐츠를 가져와 사용하는 것입니다. 특정 주제로 이동할 때는 표시되지 않습니다.

네, 감사합니다!

안녕하세요 여러분! 이 컴포넌트에 몇 가지 기능을 포함하는 큰 업데이트를 병합했습니다: FEATURE: include tag sidebars, migrate to objects setting by awesomerobot · Pull Request #22 · discourse/discourse-topic-list-sidebars · GitHub

  • 리스트 스타일 설정을 객체 설정으로 마이그레이션했습니다. 이는 다음을 의미합니다:
    • 각 사이드바를 여러 카테고리에 대해 한 번에 구성할 수 있습니다.
    • 이제 슬러그를 수동으로 추가하는 대신 드롭다운에서 카테고리를 선택할 수 있습니다.
    • 태그 옵션도 포함됩니다! 이는 더 이상 별도의 컴포넌트(Discourse Tag Sidebars)가 필요 없음을 의미합니다.

기존 설정은 업데이트 시 자동으로 마이그레이션되어야 합니다… 단, 슬러그가 카테고리 이름과 다른 경우를 제외합니다. 이 경우 설정을 수동으로 업데이트해야 합니다.

예를 들어, site-feedback은 Site Feedback으로 올바르게 마이그레이션되지만, 이름과 일치하지 않는 슬러그(예: Site Feedback의 슬러그가 site-feedback이 아니라 hamburgers인 경우)를 마이그레이션하는 방법은 없습니다.

새로운 상황을 반영하기 위해 이 테마 컴포넌트의 이름을 변경하고 태그 사이드바를 비추천(deprecate) 처리할 가능성이 높습니다.

5개의 좋아요

이것이 태그 설정도 자동으로 마이그레이션하나요?

새로운 구성 방식에서 동일한 태그에 대해 다른 카테고리별로 다른 사이드바를 사용할 수 있나요? 충돌은 어떻게 해결되나요?

2개의 좋아요