Organizador de Categorias da Barra Lateral

[Drew-ART (Drew)]

Eu criei um organizador de barra lateral. Houve muitas discussões sobre isso há algum tempo e outros sentiram que não era necessário, mas eu sempre senti que meus usuários não são muito técnicos ou não sabem como o fórum funciona bem o suficiente no início, então criei este organizador suspenso para ajudar.

Instalar este componente de tema

Há um pequeno alternador (toggle) no topo para que os usuários possam alternar entre o padrão e este, e escolher o que preferem. Eu o coloquei lá porque acho que muitos usuários experientes gostariam de personalizar sua barra lateral de navegação (nav-sidebar), mas a maioria dos usuários mais novos não.

Organizador de Categorias da Barra Lateral

Um componente de tema Discourse que organiza as categorias da barra lateral em seções personalizáveis, com código de cores e recursos avançados.

Recursos

• 10 Seções Recolhíveis: Agrupe categorias em até 10 seções personalizadas
• Personalização de Cores: Defina cores de fundo e de texto para cada cabeçalho de seção
• Fundos em Degradê (Gradient): Efeito de desvanecimento em degradê opcional, como nas fotos
• Badges de Categoria: Badges coloridas padrão do Discourse ao lado das categorias podem ser ativadas e desativadas
• Suporte a Subcategorias: Alternância por seção para mostrar/ocultar subcategorias (exibição recuada)
• Ocultar Categorias: Oculte categorias específicas de todas as visualizações
• Alternância Bidirecional: Alterne entre seções personalizadas e a visualização padrão do Discourse (botão de alternância aparece em ambas as visualizações)
• Estado Persistente: Lembra quais seções estão abertas/fechadas e a preferência de visualização do usuário
• Consciência de Permissão: Mostra apenas as categorias às quais os usuários têm acesso
• Categorias Não Agrupadas: Exibe automaticamente quaisquer categorias não categorizadas em uma seção separada
• Responsivo para Dispositivos Móveis: Funciona em todos os tamanhos de tela

Instalação

1. Vá para Admin → Personalizar → Temas em sua instância do Discourse
2. Clique em Instalar → De um repositório Git
3. Insira: https://github.com/focallocal/sidebar-categories-organizer
4. Clique em Instalar
5. Adicione o componente ao seu tema ativo

Configuração

Configurações Globais

• Ativar Organizador da Barra Lateral: Ativa/desativa a visualização personalizada
• Mostrar Botão de Alternância: Exibe o ícone para alternar entre as visualizações (aparece nos cabeçalhos das visualizações personalizada e padrão)
• Mostrar Badges de Categoria: Exibe quadrados coloridos ao lado dos nomes das categorias
• Usar Desvanecimento em Degradê: Ativa o efeito de fundo em degradê nos cabeçalhos das seções (50% cor sólida, 50% desvanecimento para transparente)
• Categorias a Ocultar: Slugs de categorias separadas por vírgula para ocultar de todas as visualizações (ex: staff,private)
• Visualização Padrão: Escolha qual visualização carrega por padrão (personalizada ou padrão)

Configurações de Seção (1-10)

Cada seção possui:

• Ativado: Alterna a seção para ligada/desligada
• Título: Texto do cabeçalho da seção
• Cor de Fundo: Seletor de cores para o fundo do cabeçalho da seção
• Cor do Texto: Seletor de cores para o texto do cabeçalho
• Categorias: Slugs de categorias separadas por vírgula (ex: geral,suporte,feedback)
• Mostrar Subcategorias: Alterna para mostrar/ocultar subcategorias para esta seção
• Padrão Aberto: Se a seção começa expandida ou recolhida

Encontrando Slugs de Categoria

Slugs de categoria estão no URL:

• seusite.com/c/general/5 → o slug é general
• seusite.com/c/feature-requests/12 → o slug é feature-requests

Uso

Após a instalação e configuração:

1. Visualização Personalizada: As categorias são agrupadas em suas seções configuradas com cabeçalhos coloridos
2. Expandir/Recolher: Clique nos cabeçalhos das seções para alternar a visibilidade do conteúdo
3. Alternar Visualizações: Clique no ícone no cabeçalho para alternar entre as visualizações personalizada e padrão
   • Na visualização personalizada: O botão de alternância aparece no cabeçalho da visualização personalizada
   • Na visualização padrão: O botão de alternância aparece no cabeçalho “Categorias” padrão
4. Subcategorias: Quando ativadas por seção, as subcategorias aparecem recuadas abaixo das categorias principais
5. Badges de Categoria: Pequenos quadrados coloridos (se ativados) mostram a cor de cada categoria
6. Categorias Não Agrupadas: Quaisquer categorias não atribuídas a seções aparecem em “Outras Categorias”
7. Preferências: Sua escolha de visualização e estado aberto/fechado são salvos por navegador

Recursos Avançados

Fundos em Degradê

Quando ativado, os cabeçalhos das seções usam um degradê suave:

• 50% cor sólida (sua cor de fundo escolhida)
• 50% desvanecimento para transparente
• Cria uma aparência moderna e elegante

Ocultar Categorias

Especifique slugs de categoria para ocultar completamente da barra lateral:

• Útil para categorias apenas para equipe ou descontinuadas
• Aplica-se a ambas as visualizações, personalizada e padrão
• Lista separada por vírgulas (ex: staff,private,archived)

Subcategorias

• Alternância por seção (não global)
• Exibição recuada com fonte ligeiramente menor
• Opacidade reduzida para hierarquia visual
• Mantém as cores dos badges de categoria

Versão

• Atual: 1.0.1
• Discourse Mínimo: 3.3.0
• Autor: Andy@Focallocal

Licença

Licença MIT - Consulte o arquivo LICENSE

Suporte

Relate problemas: GitHub · Where software is built

[Lilly]

Ótimo trabalho

Dica de configuração de categoria

Em vez de fazer com que os administradores insiram slugs de categoria, você pode usar isto no seu arquivo settings.yml, por exemplo:

categories_to_hide:
  type: list
  list_type: category
  default: ""
  description:
    en: "Categories to hide from sidebar completely."

o que lhe dará uma configuração como esta:

Você também pode fazer a mesma coisa com grupos, se alguma vez quiser um menu suspenso de grupo:

groups_this_setting_applies_to:
  type: list
  list_type: group
  default: ""
  description:
    en: "Groups this setting will apply to."

o que dará algo como isto:

[jenmck (jen)]

Eu realmente gostei disso e é definitivamente algo que passou pela minha cabeça, então obrigado!

Pergunta - se um usuário não tiver acesso a nenhuma categoria em uma determinada seção, a seção em si ainda aparecerá para o usuário?

[NateDhaliwal]

Sim, inclui:

javascripts%2Fdiscourse%2Fapi-initializers%2Fsidebar-organizer.js

[Drew-ART (Drew)]

Não, a categoria/subcategoria fica oculta se eles não tiverem acesso a ela. Você também pode ocultar manualmente qualquer uma que desejar nas configurações.

[Drew-ART (Drew)]

Obrigado, Lilly. Vou atualizar isso e meus outros componentes recentes para torná-los melhores.

[Drew-ART (Drew)]

O plugin foi atualizado com seletores de menu suspenso adoráveis agora.

[jenmck (jen)]

Certo, entendi essa parte - mas estou falando da seção real, não apenas da categoria.

Por exemplo, se eu tiver esta configuração:

Animais

• Gatos
• Cachorros

Nuvens

• Nimbus
• Cumulus

Dias

• Sábado
• Domingo

Digamos que um usuário não tenha acesso nem às categorias Nimbus nem Cumulus. A seção Nuvens ainda apareceria para o usuário, mas sem categorias, assim:

Animais

• Gatos
• Cachorros

Nuvens

Dias

• Sábado
• Domingo

Ou a seção Nuvens não apareceria de forma alguma, assim:

Animais

• Gatos
• Cachorros

Dias

• Sábado
• Domingo

[Drew-ART (Drew)]

se um usuário não tiver permissão para ver nenhuma categoria em uma seção, a seção inteira (aba) será ocultada

[Heliosurge (Dan DeMontmorency)]

Isto é muito legal!

Me faz repensar ideias, lol.

Eu tenho brincado com a ideia de usar o plugin Doc Categories para organizar seções personalizadas com menus focados. Mas preciso de um “embelezamento” para permitir cores e ícones.

Há um markdown para adicionar o “Install component” (Componente de Instalação) na Op.

Algo mudou no Meta? Não consigo selecionar algo para citar no Android aqui. - ok, parece ter resolvido.

[Heliosurge (Dan DeMontmorency)]

Olá Lily, poderíamos ter o Markdown para “Instalar Componente”?

[NateDhaliwal]

Aqui está um para este componente:

Instalar este componente de tema

Formato Markdown (substitua repoName e repoUrl):

[wrap=theme-install-button repoName="Nome do Componente" repoUrl="Link do repositório no GitHub"]
Instalar este componente de tema
[/wrap]

[Heliosurge (Dan DeMontmorency)]

Obrigado, Nate. Tentei fazer uma busca, mas talvez com termos muito genéricos.

[NateDhaliwal]

Ah, não tenho certeza se está mencionado em algum lugar. Eu tirei do modelo de tópico do Theme component .

[Heliosurge (Dan DeMontmorency)]

Isso é legal com certeza. A Meta pode querer considerar o outro TC do zOp, pois ele pode pré-inserir um modelo na criação de tópicos.