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 curtidas

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 curtidas

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 curtidas

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!

Another great plug-in Kris, thanks!

I have a few questions/suggestions that I hope you can help with…

1 - Is it possible to make this so that when a user browses the forum, going from page to page the sidebar always checks for the latest version of the post that it contains? At the moment I think the content of the sidebar only updates on a page refresh? Unfortunately content that rarely changes begins to appear stale to users (particularly active users) and so I’d like to update the topic associated with the sidebar frequently if I can. (Similarly, if the ID of the topic in the options for that page is changed, it would pick it up on the next page-view). I’m quite happy for the additional load per page/view but if you’re worried others may not be perhaps you could add a “cache post contents” option which would make it work like it does now.

2 - Is it possible to associate/pick up content from more than one topic per sidebar please? So for example on the Latests page you might want the content from topics 33,55 (and in that order). This would be great to allow different content per page while also include common info/links that you might want to appear at the bottom of every sidebar.

3 - Is it possible to expand the plugin so it can be used site-wide please? At the moment I think it can only be used on certain pages? Ideally I’d like to use this across the whole forum on all main sections/pages. (Perhaps your tags sidebar plugin could be used in conjunction with this for finer control - eg for individual tags and/or Topics - I think both combined could become a very power sidebar package!!)

4 - Is it possible to add a sidebar width option as well as a configurable cut-off/display-none point please? This isn’t a biggie as it can be done via css changes but think it would be nice to have in the options.

5 - Last but not least… could you get polls to work please? I think allowing users to vote in polls right out of the sidebar would be awesome!!! I find dynamic content like this in sidebars can make them interesting to users, and so less likely that they’ll automatically ignore them.

I think with all the above this plugin would make a very good candidate to be included in core or an official DC plugin - imo it could help people put an individual stamp on their forums and I’m sure people would use them in fun and interesting ways! :smiley:

Hello,

Great component. Is it possible to have such sidebar for each topic under a specific category?

Thanks.

What is the syntax to adress a subcategory? Things I tried so far:

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

None of these seem to work. Main categories are displayed, though.

1 curtida

Hm, anyone, please? It shouldn’t be that hard to give an answer…

It looks like there was a regression and subcategories weren’t working in some cases, the syntax should be the same as categories: subcategory, 123

I’ve refactored the theme, so if you update it subcategories should work as expected!

6 curtidas

That did the trick: perfect!
Thank you so much, just in time for our grand opening.

1 curtida

Plugin incrível!

Por acaso isso também é possível para grupos? Ter uma barra lateral para grupos seria ótimo para fornecer informações sobre o grupo.

Alguém pode me direcionar para obter os parâmetros do grupo (informar ao componente que você está dentro de um grupo) para que eu possa tentar e criar um PR eu mesmo?

@hyphalos Criei um Groups Widget que pode ser adicionado às barras laterais do Layouts Plugin.

Talvez o código que eu tinha para isso possa te ajudar a escrever seu PR:

Alternativamente, você também poderia usar o plugin Layouts e o próprio widget.

2 curtidas

Pode ser um pouco ousado pedir, já que se chama sidebar (barra lateral), mas: seria possível adicionar uma opção para colocar o conteúdo não ao lado, mas sempre acima da lista de tópicos?

Usamos o Discourse como uma intranet social e, para algumas categorias, temos a necessidade de uma área de fácil manutenção para links, listas de pessoas, etc. - esse mecanismo seria ótimo para isso, mas há muito pouco espaço na barra lateral.
Hacks de CSS também são bem-vindos.

Já tentei os banners de categoria, mas eles são limitados ao primeiro parágrafo, então essa não é uma opção.

Atenciosamente,
Ralf
(Biblioteca Estadual de Berlim)

E quanto a este TC?

Acho que você ainda ficará preso ao primeiro parágrafo. Mas isso poderia ser potencialmente alterado.

Olá Kris, isso é muito bom.

Eu estava imaginando se isso poderia ser modificado ou ter uma opção para movê-lo de uma barra lateral para a barra superior abaixo do cabeçalho do site ou talvez apenas abaixo de um logotipo de categoria?

Ou se eu poderia receber orientação sobre como adicionar CSS personalizado para movê-lo e também fazê-lo exibir para dispositivos móveis como uma barra superior, é uma barra fixa? ancorada logo abaixo da barra principal do site?

Posso estar a entender mal como este componente de tema funciona, mas seria possível utilizá-lo para mostrar a lista de tópicos à esquerda, clicar num tópico na lista e ter as publicações mostradas à direita (e manter a lista de tópicos fixada à esquerda)? Não preciso de ver categorias. Pareceria o Flarum.

1 curtida

Não, o que este componente faz é pegar o conteúdo de um tópico e usá-lo para preencher uma barra lateral para a lista de tópicos de uma categoria específica. Ele não é visível ao navegar para um tópico.

Ok, obrigado!

Olá a todos! Acabei de mesclar uma grande atualização neste componente que faz algumas coisas: FEATURE: include tag sidebars, migrate to objects setting by awesomerobot · Pull Request #22 · discourse/discourse-topic-list-sidebars · GitHub

  • Migra a configuração de estilo da lista para uma configuração de objetos. Isso significa:
  • Cada barra lateral pode ser configurada para várias categorias ao mesmo tempo
  • Agora você pode selecionar categorias do menu suspenso em vez de adicionar slugs manualmente
  • Inclui também uma opção de tag! isso significa que você não precisará mais de um componente separado (Discourse Tag Sidebars)

As configurações existentes devem migrar automaticamente na atualização… a menos que seu slug seja diferente do nome da categoria, então você precisará atualizar manualmente as configurações.

Por exemplo, site-feedback migrará corretamente para Site Feedback, mas não há um método para migrar slugs que não se alinham com os nomes (por exemplo, seu slug para Site Feedback é hamburgers em vez de site-feedback).

Provavelmente mudarei o nome deste componente de tema e desativarei as barras laterais de tags para refletir a nova situação.

5 curtidas

Isso migrará automaticamente as configurações de tags?

Com a nova configuração, pode haver barras laterais diferentes para a mesma tag em categorias diferentes? Como os conflitos são resolvidos?

2 curtidas