Reordenar menu lateral

Personalização Componente de tema
1
:information_source: Resumo Permite reordenar as seções do menu da barra lateral padrão e personalizadas
:eyeglasses: Visualização https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder
:hammer_and_wrench: Repositório https://github.com/Lillinator/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 vários pedidos de administradores do Discourse que desejam 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 pode ser difícil de gerenciar e fazer alterações, criei um componente de tema que facilita muito isso na interface de administração.

:woman_technologist:t2: Visão geral

Este componente de tema do Discourse permite que os administradores reordenem as seções do menu da barra lateral do fórum na interface de administração, incluindo todas as seções padrão, bem como quaisquer seções personalizadas visíveis globalmente.

O componente funciona tanto para visualizações de barra lateral em desktop quanto em mobile, bem como para o modo de menu suspenso no 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 sobre o 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 de uma ou duas seções (padrão ou personalizada) sejam movidas acima da seção community.
  • Não exclua nenhuma das seções padrão na configuração, ou elas ficarão desordenadas (você sempre pode 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 de slug para as seções personalizadas, caso contrário, elas serão ignoradas (ou seja: use custom-menu-name para “Nome do Menu Personalizado”, useful-links para “Links Úteis”, etc.)

:gear: Configurações

Configuração Descrição
Ordem do menu da barra lateral Uma configuração de lista que contém as seções do menu padrão. (community é a seção superior padrão na barra lateral e inclui o submenu suspenso Mais.) 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 intitulado Test Menu, adicione test-menu na configuração).

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

captura de tela das configurações padrão do componente

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 estão mostradas na pequena caixa vermelha.

image
image1709×1200 222 KB

Aqui, a configuração está definida 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 Mensagens que o componente Seção de mensagens para barra lateral insere na barra lateral (abaixo do menu personalizado toolbox acima), mostrando que este componente também pode ser usado para movê-la.

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: Observações

  • 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 o navegador ou recolherem/expandirem a barra lateral.
  • Criar novas seções de menu personalizadas globais enquanto este componente estiver 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.
  • As seções de menu personalizadas criadas pelo usuário sempre aparecerão na parte inferior da barra lateral para esse usuário, mas não são afetadas de outra forma.
  • Se a configuração Admin -> Todas as Configurações do Site -> Modo de Barra Lateral Separada para Chat estiver definida como Sempre, o botão de chat aparecerá como usual na parte inferior, e o componente ignorará as seções de menu de chat padrão (chat-dms, chat-channels e chat-search).
Confira meus outros conteúdos do Discourse
28 curtidas
Configuring the default sidebar for your users
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:

2 curtidas
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

6 curtidas