Topic List Sidebars

[Discourse]

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.

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

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Bug, UX, and Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

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

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

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 document

Perform check on document:

[emilio]

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.

[awesomerobot (Kris)]

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.

@emilio

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

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

[jrgong]

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!

[AstonJ]

Еще один отличный плагин, Крис, спасибо!

У меня есть несколько вопросов и предложений, на которые я надеюсь получить от вас ответы…

1 — Возможно ли сделать так, чтобы при просмотре форума пользователем, переходя со страницы на страницу, боковая панель всегда проверяла последнюю версию содержащегося в ней поста? На данный момент, как мне кажется, содержимое боковой панели обновляется только при перезагрузке страницы? К сожалению, контент, который редко меняется, начинает казаться пользователям устаревшим (особенно активным пользователям), поэтому я хотел бы как можно чаще обновлять тему, связанную с боковой панелью. (Аналогично, если в настройках для этой страницы изменить ID темы, она должна быть обнаружена при следующем просмотре страницы). Я не против дополнительной нагрузки на сервер при каждом просмотре страницы, но если вы опасаетесь, что другим это может не понравиться, возможно, стоит добавить опцию «кэшировать содержимое постов», чтобы вернуть текущее поведение.

2 — Возможно ли связать/извлекать контент из нескольких тем для одной боковой панели? Например, на странице «Последние» вы могли бы хотеть контент из тем 33 и 55 (и в таком порядке). Это было бы здорово для отображения разного контента на разных страницах, а также для включения общей информации/ссылок, которые вы хотели бы видеть в нижней части каждой боковой панели.

3 — Возможно ли расширить функционал плагина так, чтобы его можно было использовать на всём сайте? На данный момент, как мне кажется, его можно применять только на определённых страницах? В идеале я хотел бы использовать его на всём форуме во всех основных разделах и на всех страницах. (Возможно, ваш плагин боковой панели с тегами можно было бы использовать в сочетании с этим для более тонкого контроля — например, для отдельных тегов и/или тем. Я думаю, что в сочетании они могли бы стать очень мощным набором инструментов для боковых панелей!!)

4 — Возможно ли добавить опцию ширины боковой панели, а также настраиваемую точку отсечения/скрытия (display-none)? Это не критично, так как это можно реализовать через изменения CSS, но было бы здорово иметь такую возможность в настройках.

5 — И последнее, но не менее важное… не могли бы вы заставить работать опросы? Я думаю, что возможность для пользователей голосовать в опросах прямо из боковой панели была бы потрясающей!!! Я считаю, что динамический контент такого рода в боковых панелях делает их интересными для пользователей, и они с меньшей вероятностью будут автоматически их игнорировать.

Я думаю, что со всеми вышеперечисленными улучшениями этот плагин стал бы отличным кандидатом для включения в ядро или в качестве официального плагина DC. По моему мнению, он мог бы помочь людям придать их форумам индивидуальный стиль, и я уверен, что люди будут использовать его весело и интересно!

[marielavd10 (Mariela)]

Здравствуйте,

Отличный компонент. Возможно ли создать такую боковую панель для каждой темы в рамках определённой категории?

Спасибо.

[Ralf_Stockmann]

Какой синтаксис используется для обращения к подкатегории? Вот что я пробовал:

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

Ничего из этого, похоже, не работает. Однако основные категории отображаются.

[Ralf_Stockmann]

@Ralf_Stockmann

Каков синтаксис обращения к подкатегории?

Хм, кто-нибудь, пожалуйста? Не должно быть так сложно дать ответ…

[awesomerobot (Kris)]

Похоже, что произошла регрессия, и в некоторых случаях подкатегории не работали. Синтаксис должен быть таким же, как и для категорий: subcategory, 123.

Я рефакторировал тему, поэтому после её обновления подкатегории должны работать как ожидалось!

[Ralf_Stockmann]

@awesomerobot

Я провёл рефакторинг темы, поэтому после её обновления подкатегории должны работать как положено!

Это сработало: идеально!
Большое спасибо, как раз к нашему грандиозному открытию.

[hyphalos]

Отличный плагин!

Возможно ли это каким-то образом и для групп? Боковая панель для групп была бы отличным решением для предоставления информации о группе.

Может ли кто-нибудь подсказать, как получить параметры группы (чтобы компонент понимал, что вы находитесь внутри группы), чтобы я мог попробовать это сделать и создать собственный PR?

[keegan (Keegan George)]

@hyphalos Я создал виджет групп, который можно добавить в боковые панели плагина макетов.Возможно, код, который я использовал для этого, поможет вам написать ваш PR:GitHub - paviliondev/layouts-groups-widget: The Groups Widget allows each user to see what groups they are in currently. · GitHub

В качестве альтернативы вы также можете использовать плагин макетов и сам виджет.

[Ralf_Stockmann]

Возможно, будет немного смелым просить об этом, раз уж это называется sidebar, но: можно ли добавить опцию для размещения содержимого не сбоку, а всегда выше списка тем?

Мы используем Discourse как социальный интранет, и для некоторых категорий нам нужна легко поддерживаемая область для ссылок, списков людей и т. д. — этот механизм отлично подошёл бы для этого, но в боковой панели просто слишком мало места.

Также приветствуются CSS-хаки.

Я уже пробовал баннеры категорий, но они ограничены первым абзацем, так что это не вариант.

С наилучшими пожеланиями,
Ральф
(Государственная библиотека Берлина)

[nathank (Nathan Kershaw)]

Что насчёт этого TC?

Discourse Category Headers theme component

This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

Думаю, вы всё ещё останетесь с первым абзацем. Но его можно было бы потенциально изменить.

[Heliosurge (Dan DeMontmorency)]

Привет, Крис, это очень приятно.

Я wondered, можно ли это изменить или добавить опцию перемещения из боковой панели в верхнюю панель под заголовком сайта или, возможно, просто под логотипом категории?

Или, если бы вы могли дать рекомендации по добавлению пользовательского CSS для перемещения этого элемента, а также чтобы он отображался на мобильных устройствах как верхняя панель? Это липкая панель? Закреплена непосредственно под основной панелью сайта?

[bdfl (Bryan)]

Возможно, я неправильно понимаю, как работает этот компонент темы, но можно ли использовать его для отображения списка тем слева, при клике на тему в списке показывать посты справа (и при этом закреплять список тем слева)? Мне не нужно видеть категории. Это должно выглядеть как Flarum.

[awesomerobot (Kris)]

Нет, этот компонент извлекает содержимое из темы и использует его для заполнения боковой панели списка тем конкретной категории. Он не отображается при переходе к теме.

[bdfl (Bryan)]

Хорошо, спасибо!

[awesomerobot (Kris)]

Всем привет! Я только что объединил большое обновление этого компонента, которое решает несколько задач: 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 — hamburgers вместо site-feedback).

Скорее всего, я изменю название этого тематического компонента и уберу поддержку боковых панелей для тегов, чтобы отразить новую ситуацию.

[mattdm (Matthew Miller)]

@Kris

Существующие настройки должны автоматически мигрировать при обновлении… если только ваш слаг не отличается от названия категории, тогда вам нужно будет вручную обновить настройки.

Будут ли автоматически мигрировать настройки тегов?

В новой конфигурации могут ли быть разные боковые панели для одного и того же тега в разных категориях? Как разрешаются конфликты?