Reordenar menu da barra lateral do Discourse

Personalização Componente de tema
1
:information_source: Resumo Permite reordenar as seções padrão e personalizadas do menu da barra lateral
:eyeglasses: Pré-visualização https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder
:hammer_and_wrench: Repositório https://github.com/Lillinator/discourse-sidebar-menu-reorder
:question: Guia de Instalação Como instalar um tema ou componente de tema

Instale este componente de tema

:bulb: Introdução

Vi diversas solicitações de administradores do Discourse desejando reordenar as seções do menu da barra lateral, incluindo seções personalizadas globais. Como atualmente não é muito intuitivo ou direto para a maioria das pessoas fazer isso com CSS, e fazer isso pode ser difícil de gerenciar e modificar, criei um componente de tema que torna muito mais fácil na interface administrativa.

:woman_technologist:t2: Visão Geral

Este componente de tema do Discourse permite que administradores reordenem as seções do menu da barra lateral do fórum na interface de usuário administrativa, incluindo todas as seções padrão, bem como qualquer seção personalizada visível globalmente.

O componente funciona tanto para as visualizações da barra lateral em desktop quanto em dispositivos móveis, bem como no modo de menu suspenso do cabeçalho (embora, idealmente, seja feito para o modo de barra lateral).

:wrench: Instalação e Configuração

  • Instale este componente de tema conforme o Guia para iniciantes no uso de Temas do Discourse.
  • A seção community refere-se à seção superior padrão da barra lateral — o menu com o cabeçalho Tópicos e inclui o submenu suspenso Mais; recomenda-se que não mais do que uma ou duas seções (padrão ou personalizadas) sejam movidas acima da seção community.
  • Não exclua nenhuma das seções padrão nas configurações, pois elas ficarão fora de ordem (você sempre poderá adicioná-las de volta ou redefinir a configuração).
  • A melhor maneira de configurar este componente é ter a tela de administração do componente com a configuração de lista de reordenação em uma janela do navegador e a visualização da barra lateral do fórum como um usuário de teste em outra janela ao lado; recarregue a página após cada alteração na ordem das seções do menu na lista.
  • Na configuração de administração do componente, certifique-se de usar o formato de nomeação por slug para as seções personalizadas, caso contrário, elas serão ignoradas (ou seja, use custom-menu-name para „Custom Menu Name“, useful-links para „Useful Links“, etc.).

:gear: Configurações

Configuração Descrição
Sidebar menu order Uma configuração de lista que contém as seções padrão do menu. (community é a seção superior padrão na barra lateral e inclui o submenu suspenso More. Reordene as seções do menu com as setas para cima e para baixo ao lado. Seções personalizadas visíveis globalmente também podem ser adicionadas — use o slug do nome do menu (por exemplo, para um menu personalizado chamado Test Menu, adicione test-menu na configuração).

O componente de tema inicialmente possui as configurações padrão. Os administradores precisam adicionar quaisquer seções de menu personalizadas globais que desejam misturar na lista de ordenação e, em seguida, reordená-las junto com as seções padrão.

screenshot of default component setttings

image
image1632×2188 262 KB

:camera_flash: Capturas de Tela

As capturas de tela abaixo mostram a seção community e duas seções de menu personalizadas de exemplo chamadas „Dev Links“ (dev-links) e „Toolbox“ (toolbox) conforme aparecem no painel de administração do componente à esquerda e para um usuário comum à direita. As setas para mover uma seção do menu para cima e para baixo na configuração de administração do componente são mostradas na pequena caixa vermelha.

image
image1709×1200 222 KB

Aqui, a configuração está configurada para mostrar a seção padrão categories acima da seção community (modos recolhido e expandido):

image
image1632×2188 279 KB

image
image1363×2188 193 KB

image
image1462×2188 307 KB

Aqui está um exemplo usando duas seções personalizadas: uma chamada dev-links que está acima da seção padrão community e outra chamada toolbox que fica abaixo da seção padrão tags.

image
image1632×2188 281 KB

image
image1411×2188 280 KB

image
image1425×2188 266 KB

Além disso, observe a seção chamada inbox-section na captura de tela de administração acima — esta é a seção Messages que o componente Seção de Mensagens para Barra Lateral insere na barra lateral (sob o menu personalizado toolbox acima), mostrando que este componente pode ser usado para movê-la também.

Além disso, este componente de tema pode ser usado junto com os componentes Menus de Barra Lateral por Grupo e Subcategorias Recuadas (veja na captura de tela acima).

:backhand_index_pointing_right: Notas

  • Após adicionar novas seções personalizadas globais à configuração sidebar_menu_order, os usuários do fórum verão a nova ordem correta do menu quando recarregarem seu navegador ou recolherem/expandirem a barra lateral.
  • Criar novas seções de menu personalizadas globais enquanto este componente está habilitado pode resultar em seções duplicadas temporárias para o administrador até que a barra lateral seja renderizada novamente, seja com uma atualização da página ou recolhendo e expandindo.
  • Seções de menu personalizadas criadas pelo usuário sempre aparecerão na parte inferior da barra lateral para aquele usuário, mas de outra forma não são afetadas.
  • Se a configuração Admin -> Todas as Configurações do Site -> Modo de Barra Lateral Separado do Chat estiver definida como Sempre, o botão de chat aparecerá normalmente na parte inferior e o componente ignorará as seções padrão do menu de chat (chat-dms, chat-channels e chat-search).
Confira meus outros materiais do Discourse
27 curtidas
Configuring the default sidebar for your users
Discourse Group Sidebar Menus
Messages section for sidebar
2

É muito legal. Eu realmente gosto de usar a configuração de categorias (1) e depois bate-papo (2). Muito obrigado pelo seu ótimo trabalho, Lilly

4 curtidas
3

Isto ainda é suportado? Tentei instalar e recebi o seguinte erro. Tentei a partir daqui e também usando as instruções manuais.

Screenshot_20260225-174622
Screenshot_20260225-1746221008×2244 182 KB

4

Sim, é. O link no botão “install this theme component” está desatualizado, mas o link no topo ainda está correto e você pode usá-lo para instalar o componente manualmente

Ou você tenta este botão

Instalar este componente de tema

2 curtidas
5

Acabei de corrigir o link no botão de instalação no OP, então está tudo certo agora.

4 curtidas
6

Encontrei um pequeno bug, onde a ordem especificada não está funcionando quando tenho uma tela de ‘desktop’ incomumente estreita - como no meu telefone dobrável.

É assim que eu quero que fique:

image
image458×851 33.5 KB
   
image
image1059×862 74.5 KB

Quando tenho uma tela de tamanho estranho (parece ser uma largura de 640-820 ou algo assim), eu perco a ordem:

image
image670×862 60.9 KB

1 curtida
7

ai meu Deus, o retorno da barra lateral de 2 colunas. Pensei que aquilo tinha sumido? Vou dar uma olhada…

4 curtidas
8

Fui eu mesmo sendo um pouco tolo! Eu estava usando o componente antigo e nem percebi.

No entanto, notei uma coisa: o que era chamado de community agora é chamado de the-forum. Aqui está um PR para arrumar isso nos padrões:

1 curtida
9

No meu fórum ainda é chamado de community e aqui na Meta também.

image
image1258×159 35.2 KB

Eu me pergunto como você mudou isso.

2 curtidas
10

Isso é realmente estranho! Lembro-me de ter alterado o texto em algum momento, agora que penso nisso. Mas não sei como isso foi parar no HTML!

Vou retirar aquele PR e pensar um pouco mais. Pode ser que tenha que permanecer uma ‘esquisitice’ do meu site!

1 curtida
11

você deve ser capaz de executar alguns comandos do rails para renomeá-lo de volta. se sua seção for realmente chamada de the-forum, então eu acho que isso deve funcionar a partir do console do rails:

cd /var/discourse
./launcher enter app
rails c

section = SidebarSection.find_by(title: 'the-forum', public: true)
if section
  section.update!(title: 'community')
  puts "Concluído: renomeado para 'community'."
else
  puts "Seção não encontrada."
end

definitivamente faça um backup primeiro.

3 curtidas
12

Finalmente (por fim) tentei isso. Mas não encontrou a seção:

image
image1147×245 29.6 KB

Acho que isso pode apenas permanecer como uma peculiaridade do site, né?

1 curtida
13

(postagem excluída pelo autor)

2 curtidas
14

Nota: acabei de aplicar algumas correções móveis para este componente — ele começou a renderizar as linhas horizontais entre as seções da barra lateral, que devem aparecer apenas em visualizações de desktop ou tablet.

2 curtidas
15

Estou usando este componente de tema adorável junto com o igualmente adorável componente Discourse Group Sidebar Menus da Lilly. Meu caso de uso é criar menus personalizados para clientes, para que todos em uma organização possam ter links rápidos relevantes especificamente para eles, bem no topo, logo após a seção da comunidade.

Queria registrar para futuros viajantes (incluindo eu mesmo) que o nome da seção da barra lateral é muito sensível e deve ser uma correspondência exata, com espaços no nome convertidos em hífens. Então, “Doing business” torna-se “doing-business”.

Tudo isso é ótimo, mas quando criei a seção da barra lateral do grupo, coloquei acidentalmente um espaço no final do nome do grupo, o que resultou em “doing-business-”. Demorei um tempo fazendo troubleshooting com as ferramentas de desenvolvedor para descobrir isso.

Esses recursos são tão importantes para mim que realmente gostaria que fossem considerados para inclusão no núcleo, para que estejam mais prontamente disponíveis e fáceis de usar em qualquer site Discourse. :folded_hands:

1 curtida
16

Obrigado, Tobias. Na verdade, mencionei usar os slugs dos nomes das seções na descrição da configuração, e isso também está indicado nos exemplos de captura de tela (veja “dev-links” = DEV LINKS).[quote=“Lilly, post:1, topic:394049”]
Seções personalizadas visíveis globalmente também podem ser adicionadas — use o slug do nome do menu (por exemplo, para um menu personalizado intitulado Test Menu, adicione test-menu na configuração).
[/quote]

Talvez eu devesse adicionar isso em outro lugar além das descrições das configurações. :thinking:

edit: feito

4 curtidas