Barra de Discourse :cerveja: :coquetel: (uma estrutura de sidebar)

merefield · Março 6, 2024, 4:17pm

Visão Geral

Um Componente de Tema que permite organizar Componentes^[1] em barras superiores e laterais.

Especifique um conjunto de “widgets” distintamente para Rota e Posição.
Suporta configurações para cada um de: descoberta^[2], tópico, tag^[3], categoria^[3:1], categorias^[3:2] OU interseção de tags^[4]
As “Barras” podem ser: superior, esquerda, direita OU localização alternativa à direita.
Cada barra pode ser recolhida ou dispensada (recarregue o navegador para redefinir a dispensa). Elas podem ser minimizadas por padrão.
Lida com a Barra Lateral Oficial, mas se você pretende usar uma Barra Lateral Esquerda, o modo Dropdown da Barra Lateral oficial é recomendado.
Ele vem com configurações de exemplo existentes que mostram algumas letras grandes, em parte como uma demonstração e em parte para que você possa ver as configurações de exemplo. Exclua-as e substitua pelos nomes dos seus próprios Componentes.
Vem com um Componente: bars-custom-html (veja as configurações de exemplo pré-preenchidas) - mas componentes de muitos Componentes de Tema e Plugins existentes são compatíveis.
Suporte móvel ainda não foi implementado.

Links Rápidos


Obter o código	`https://github.com/merefield/discourse-tc-bars`
Ver o código	GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars
Guia de Instalação	Installing a theme or theme component

Gostando deste Componente de Tema? Por favor, dê no GitHub !

Exemplo gratuito:

Ao carregar pela primeira vez:

Algumas coisas importantes a notar sobre este TC!

Este Componente de Tema destina-se principalmente a desenvolvedores e administradores que possuem algum conhecimento técnico sobre desenvolvimento de temas. Se você não for suficientemente técnico e precisar de ajuda para implementar barras laterais usando Barras, você pode me contratar ou contratar um desenvolvedor em Marketplace
Este Componente de Tema destina-se a fornecer uma estrutura para suportar barras laterais. Ele não e não se destina a fornecer polimento visual final, que você precisará adicionar em seu Tema com CSS adicional. No entanto, ele faz muito trabalho para você e dá a você menos coisas para pensar e talvez até lhe dê a capacidade de fazer coisas que você não tinha a capacidade de fazer antes …

Considerações sobre o Componente

Você deve especificar um nome de Componente. O nome do componente é, na verdade, o mesmo que o nome do arquivo no diretório do tema, tc ou plugin component, sem o sufixo.
- o nome do componente não é o nome do Componente de Tema (que pode conter muitos Componentes Glimmer Ember), é o nome do arquivo do Componente Ember real , então, por exemplo:
image659×364 12.3 KB

então layouts-tag-list
Eles podem ser de um Componente de Tema ou Plugin existente. Componentes existentes podem funcionar. Exemplos são:
- 🏷️ Bars Tag List Component
- Render a component within a Widget. (Using select-kit components within plugin code) - #31 by merefield
- Discourse AI Topic Summary 🤖 … e possivelmente até:
- O widget Leaderboard: https://github.com/discourse/discourse-gamification/blob/main/assets/javascripts/discourse/components/minimal-gamification-leaderboard.js (me avise se você tentar abaixo!)
Requer alguma experiência para construir Componentes
- Mas tente construir seu próprio Componente em outro Componente de Tema e certifique-se de que ambos estejam ativos no mesmo Tema.
Os Componentes devem obter seus próprios dados (eles não podem usar modelos de passagem de plugin outlet infelizmente devido aos outlets de plugin específicos que precisam ser usados para organizar as coisas dessa forma)
- Fora da caixa, você só pode usar dados de API json existentes de, por exemplo, o núcleo do Discourse ou aqueles fornecidos por um Plugin existente. Se você precisar de dados personalizados que não pode obter das APIs atuais, você pode me contratar ou contratar alguém em Marketplace para ajudar você.
Você pode precisar estilizar a barra lateral e os limites do componente a gosto. (novamente, se precisar de ajuda, considere contratar um desenvolvedor).
- Uso estratégico de sombras e bordas pode deixar as coisas muito bonitas - seja artístico!

Por quê

Com a atualização do núcleo do Discourse para Ember 5, o truque que o plugin Layouts da Pavilion^[1:1] usava para fornecer uma excelente maneira de manipular o layout do Discourse deixou de funcionar. Agora não havia uma maneira fácil de mostrar uma barra lateral em uma rota de Tópico através de uma interface de usuário relativamente fácil.
Além disso, o Ember introduziu os Componentes Glimmer, que eram muito mais agradáveis de trabalhar. (Layouts usavam a API de Widgets, que está obsoleta em favor dos Componentes Glimmer).
Finalmente, a equipe principal do Discourse forneceu um novo editor JSON para configurações de Componentes de Tema, o que tornou possível implantar uma configuração mais complexa
Em vez de corrigir o plugin Layouts (TCs não existiam na época do Layouts), fez sentido reconstruir como um Componente de Tema, porque podemos alcançar a maioria das coisas que precisamos apenas no front-end.
Entre “Barras” Saúde!!

Problemas Conhecidos

A barra superior não fica fixa (posso remover a configuração correspondente se não conseguir resolver).

Créditos

Sucessor espiritual do Plugin Layouts agora quebrado, construído por @angus (Saúde!) que nos serviu bem por muitos anos.
Usa o sistema de parâmetros do Right Side Blocks (obrigado @pmusaraj!)

o termo ‘descoberta’ (rota) refere-se às páginas principais da Lista de Tópicos (por exemplo, “Mais Recentes”, “Novos”) que permitem navegar pelos Tópicos disponíveis antes de clicar e mergulhar em um específico. ↩︎ ↩︎
tecnicamente também uma rota de “descoberta”, mas estamos separando-as em nomes distintos para que você possa tratá-las de forma diferente, se desejar. ↩︎
Veja aqui para mais detalhes. Para que isso permaneça opcional (nem todos os instaladores de Barras desejarão uma página inicial personalizada), Barras não adiciona o modificador necessário em about.json, então você deve adicioná-lo no Tema pai ou em outro TC para ativá-lo. ↩︎ ↩︎ ↩︎
Veja o Plugin de Interseção de Tags ↩︎

Lilly · Março 6, 2024, 4:27pm

Uau, isso é legal! Bom trabalho, Robert. Obrigado por fazer isso e disponibilizar!

Forked!

thoka · Março 6, 2024, 5:57pm

Estou bem no início de aprender a adicionar widgets personalizados, mas: eu adoraria uma opção para adicionar widgets em um rodapé não rolável na visualização móvel.
Seria possível com uma versão futura deste componente?

merefield · Março 6, 2024, 6:00pm

Sem planos de adicionar “barras” adicionais neste momento, mas talvez assim que as coisas se acalmarem e o TC estiver claramente estável…

… PR ou patrocínio sempre bem-vindos também

denvergeeks · Março 6, 2024, 6:56pm

Isso parece incrível - Obrigado! Você poderia fornecer um exemplo de como as configurações se parecem para incluir o Widget da Lista de Tags em uma das barras laterais?

Por exemplo, pelas instruções, parece que isso funcionaria…

Mas a barra lateral esquerda ainda mostra apenas o ‘a’ grande…

merefield · Março 6, 2024, 7:03pm

Duas coisas:

Primeiro, aqui estão configurações semelhantes do StarZen:

O nome do componente é, na verdade, o mesmo nome do arquivo no Componente (vou adicionar isso ao OP)

https://starzen.space

Segundo, é realmente bobo, mas você tem que pressionar Salvar e clicar no tique depois de clicar em Salvar.

É um Salvar duplo!

Essa é a natureza da configuração de tema atual do core, não das barras. Posso adicionar uma nota sobre isso no OP.

denvergeeks · Março 6, 2024, 7:12pm

Sim, eu fiz o Salvar duplo

Ainda assim, devo estar perdendo alguma coisa porque o resultado é o mesmo. Há algo mais que eu possa fornecer para ajudar?

merefield · Março 6, 2024, 7:13pm

Compartilhe seu json de configurações (botão na parte inferior do TC).

denvergeeks · Março 6, 2024, 7:14pm

[
	{
		"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 · Março 6, 2024, 7:15pm

O seu component_name ainda está errado, veja o meu exemplo e talvez você queira apagar o resto.

denvergeeks · Março 6, 2024, 7:22pm

Hmm… OK, excluí todos, exceto o primeiro, e alterei o nome para corresponder ao seu (embora o nome do componente venha do 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. - onde eu encontraria que o nome correto do componente é layouts-tag-list?)

No entanto, alterar o nome do componente no modal não parece alterá-lo no JSON de configurações, nem remover os outros itens, mesmo após salvar duas vezes…

[
	{
		"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 · Março 6, 2024, 7:25pm

Como expliquei acima (e agora detalhei no OP), o nome do componente não é o nome do Componente de Tema (que poderia conter muitos Componentes Ember Glimmer), é o nome do Componente Ember real:

então layouts-tag-list

Este é um mal-entendido útil, vou esclarecer mais no OP, usando este exemplo.

Não tenho certeza por que sua configuração está sendo persistente

Tente excluir o Componente de Tema e adicioná-lo novamente e passar pelo mesmo processo.

Ou apenas atualize seu navegador?

ckshen · Março 6, 2024, 7:34pm

Obrigado pelo trabalho @merefield!

Funcionalmente, como o Discourse Bars difere dos Blocos da Barra Lateral Direita com HTML personalizado, além do fato de que a localização não precisa ser apenas à direita?

merefield · Março 6, 2024, 7:35pm

Bars é o sucessor espiritual do Pavilions Layouts, que veio antes do RSB.

Mas em comparação com o RSB, o suporte a multi-rota e multi-posição é o principal (o objetivo do Bar é reproduzir a utilidade e flexibilidade do Layouts), sendo a adição crítica o suporte a rota de Tópico. Além disso, eu não suporto params atualmente… ainda não encontrei um caso de uso. Eu também não incluo nenhum componente além das letras grandes de demonstração - isso é deliberado e destinado a ser mais um framework de Administrador/Desenvolvedor (muito parecido com o Layouts).

O roteiro pode ser mais ambicioso também - se eu receber financiamento, posso adicionar a funcionalidade móvel que o Layouts tinha - qualquer pessoa é livre para entrar em contato comigo para patrocinar esse trabalho.

denvergeeks · Março 6, 2024, 7:38pm

Ok, eu desinstalei e reinstalei ambos os TCs de barras e o TC de lista de tags de layouts (tentei removê-los e adicioná-los novamente, tanto individualmente quanto juntos), mas os resultados são todos os mesmos. E eu atualizei todas as vezes, como já havia feito antes. Eu também limpei o cache do meu navegador.

merefield · Março 6, 2024, 7:41pm

Não consigo reproduzir seu problema de configurações travadas. Acabei de adicionar e remover uma barra lateral esquerda.

Teria interesse em outros relatos sobre o mesmo problema.

denvergeeks · Março 6, 2024, 7:49pm

Obrigado pelo tempo que você dedicou tentando – tentarei em algumas de minhas outras instâncias do Discourse ainda hoje e relatarei novamente.

denvergeeks · Março 6, 2024, 8:17pm

Também removi todos os plugins e reconstruí (e não tenho outros TCs ou temas instalados), e é uma instalação nova de ontem à noite.

Caso seja útil, descobri que, com as mesmas configurações acima, embora a barra lateral esquerda não apareça em nenhum outro lugar, ela está aparecendo na rota /latest (embora apenas o título “Tags”, sem mostrar nenhuma tag.)

E aqui está o JSON de configurações…

[
	{
		"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 · Março 6, 2024, 8:22pm

Você terá que depurar isso sozinho - verifique seu console, CSS do tema, etc.

Funciona para mim:

Não me lembro se a Lista de Tags de Layouts requer Grupos de Tags… pode ser que sim!

denvergeeks · Março 6, 2024, 11:30pm

Sim, habilitar Grupos de Tags nas configurações (e depois criar alguns Grupos de Tags) fez com que as tags aparecessem.

No entanto, definir a rota para o item do componente como discovery ainda mostra apenas a barra esquerda nas listas /latest, /new e /top.

Você poderia, por gentileza, me indicar uma lista de todas as “rotas” disponíveis que podem ser usadas aqui?

Obrigado novamente!

Tópico		Respostas	Visualizações
Discourse Tab Bar for Mobile Theme component	78	21511	10 de Novembro de 2025
Topic List Sidebars Theme component official , topic-list-sidebars	22	13793	6 de Junho de 2025
Right Sidebar Blocks Theme component official , right-sidebar-blocks , desktop	145	13805	10 de Outubro de 2025
Discourse Popular Tag Sidebar Theme component	26	7287	9 de Janeiro de 2023
Looking for the perfect theme Community	6	286	19 de Setembro de 2024