Componente de tema de Cabeçalhos de Categorias do Discourse

[Rhidian (Rhidian Bramley)]

Este componente de tema oferece várias melhorias para o cabeçalho de categoria do Discourse.

O cabeçalho de categoria ‘padrão’ do Discourse é exibido no topo de cada página de categoria, acima dos links de navegação e da lista de tópicos. Normalmente, ele só é visível se uma imagem de logotipo da categoria foi carregada nas configurações da categoria. O cabeçalho exibe o logotipo e uma breve descrição da categoria, extraída do primeiro parágrafo do tópico ‘Sobre a.. categoria’.

Este componente de tema oferece as seguintes melhorias

O cabeçalho da categoria agora é exibido por padrão para todas as categorias. Ele agora inclui o nome da categoria, além do logotipo (se definido) e da descrição da categoria. Também pode incluir uma imagem de fundo do logotipo e pode ser estilizado para aparecer como uma ‘caixa’ ou um ‘banner’, usando as configurações de cor da categoria. Há uma ampla gama de opções configuráveis nas configurações do tema.

Configurações do tema

• mostrar nome da categoria: Exibir o nome da categoria no cabeçalho
• mostrar descrição da categoria: Exibir o texto da descrição da categoria (o primeiro parágrafo do tópico “Sobre esta categoria”)
• tamanho do texto da descrição: Tamanho do texto dentro da descrição da categoria
• alinhamento do texto: Alinhamento do texto dentro do cabeçalho da categoria
• mostrar cabeçalho de subcategoria: Exibir cabeçalho para subcategorias
• mostrar nome da categoria pai: Prefixar o nome da categoria pai nos cabeçalhos de subcategoria (isso atua como um link de breadcrumb para a página da categoria pai)
• mostrar ícone de bloqueio: Exibir o ícone de bloqueio em categorias protegidas por permissões
• mostrar logotipo da categoria: Exibir a imagem do logotipo da categoria dentro do cabeçalho
• mostrar logotipo da categoria pai: Exibir o logotipo da categoria pai quando um logotipo de subcategoria não estiver definido
• mostrar logotipo do site: Exibir o pequeno logotipo do site se um logotipo de categoria não estiver definido
• posicionar logotipo: Posição do logotipo dentro da caixa
  – ‘esquerda’ e ‘direita’ exibem o logotipo na mesma linha que o texto.
  – ‘topo’ exibe o logotipo acima, alinhado com o texto
• tamanho do logotipo: Tamanho do logotipo dentro do cabeçalho.
  – Pequeno: 50px de altura, semelhante ao logotipo de uma caixa de subcategoria.
  – Padrão: 150px de altura.
  – Original: tamanho da imagem carregada
• stilo do cabeçalho: Definir o estilo do cabeçalho como:
  – Caixa: o cabeçalho da categoria é exibido no mesmo estilo das caixas padrão do Discourse
  – Banner: definir o fundo do cabeçalho com a cor de fundo da categoria e o texto com a cor de primeiro plano
  – Nenhum: sem borda ou estilo de fundo
• imagem de fundo do cabeçalho: Aplica-se se você tiver carregado uma imagem de fundo da categoria
  – ‘contain’, ‘cover’ e ‘resize’ exibem o fundo dentro do cabeçalho.
  – ‘outside’ é o padrão do Discourse, exibindo-o fora do cabeçalho, sobre toda a página.
• mostrar no móvel: Exibir cabeçalho da categoria em dispositivos móveis
• forar alinhamento móvel: Forçar o alinhamento móvel do logotipo-texto para o topo-central do cabeçalho
• sconder se não houver descrição da categoria: Ocultar o cabeçalho se a descrição da categoria não estiver definida
• sconder exceções de categoria: Os cabeçalhos não serão exibidos para essas categorias

Instalar o componente de tema

Repositório Git: https://github.com/naidihr/discourse-category-headers

Como instalo um Tema ou Componente de Tema?

Créditos

Obrigado a @Johani pelo seu excelente Guia do Desenvolvedor para Temas do Discourse
Este componente de tema foi inspirado em outros temas, notadamente o tema Discourse Category Banners de @awesomerobot

Exemplos

Estilo caixa: O cabeçalho da categoria é exibido no mesmo estilo das caixas de subcategoria

Subcategoria, observe que a subcategoria não tem logotipo, mas está configurada para herdar o logotipo da categoria pai. O nome da categoria pai também está configurado para aparecer como um link de breadcrumb.

Se a subcategoria tiver seu próprio logotipo, ele será exibido em seu lugar.

Visualização móvel mostrando um alinhamento diferente de texto e ícone.

Configurações de tamanho de texto.

Exemplo de opções de alinhamento: texto centralizado, logotipo à direita.

Estilo banner: Usa as cores de fundo e de primeiro plano da categoria

Imagem de fundo: Usa a imagem de fundo da categoria

[awesomerobot (Kris)]

A ampla variedade de opções torna isso realmente flexível, ficou ótimo!

[Heliosurge (Dan DeMontmorency)]

Esse trabalho é incrível!

[Anatolia]

Essa aparência é excelente.

[labrumfield (Lauren Brumfield)]

Rhidian, você poderia compartilhar suas configurações para que as categorias apareçam no formato de grade, como na captura de tela que você compartilhou? (link abaixo)

Instalei este componente do tema e consigo ver apenas cabeçalhos em caixa no topo de cada página de categoria. Obrigado!

[labrumfield (Lauren Brumfield)]

Na verdade, acredito que descobri. Eu estava faltando o seguinte em Configurações:

[Rhidian (Rhidian Bramley)]

Ótimo, @labrumfield . Obrigado por postar a resposta também — suspeito que será útil para outras pessoas também. Espero que o componente de tema funcione bem para você.

[MichelleBarnett]

Você sabe se há uma maneira de visualizar essa configuração de Caixas com Subcategorias com um novo tema sem publicá-lo?

[Rhidian (Rhidian Bramley)]

Não tenho certeza do que você quer dizer com pré-visualização? Você pode pré-visualizar temas e componentes de tema nas configurações de administração de personalização

[MichelleBarnett]

Idealmente, eu gostaria de visualizar a configuração ‘Caixas com Subcategorias’ sem publicá-la. Ou, se houver alguma maneira de associar essa configuração apenas ao seu componente de tema e não a outros temas/componentes de tema.

Acho que não há como fazer isso, então só queria ver se alguém tinha alguma ideia. Obrigado!

[Rhidian (Rhidian Bramley)]

As caixas com a configuração de subcategoria não fazem parte deste componente. Elas são uma configuração de categoria do Discourse.

Discourse Category Headers theme component

Actually, I believe I figured it out. I was missing the following under Settings: [Screen Shot 2020-07-08 at 1.23.35 PM]

Você não pode ‘pré-visualizar’ isso, mas pode ativá-lo temporariamente para ver como fica. As configurações de categoria servem para exibir as subcategorias como linhas ou caixas.

[MichelleBarnett]

Olá,

Acabei de alterar uma configuração de categoria e os cabeçalhos da categoria ficaram um pouco desconfigurados. (veja a imagem)

A configuração alterada foi o Estilo da Lista de Subcategorias, que mudou de “Caixas” para “Caixas com Tópicos em Destaque”. Acredito que nenhuma outra configuração tenha sido alterada. Você tem alguma ideia de como fazer o banner voltar a ficar no topo, em vez da caixa no canto superior esquerdo?

Além disso, quando altero a configuração de volta para “Caixas”, ela ainda não volta ao normal.

[JacobDK]

Muito obrigado. Este é um componente realmente, realmente, realmente excelente.

Testei minha sorte e tentei inserir um vídeo do YouTube e um podcast do SoundCloud, mas, infelizmente, não foram exibidos na caixa de categoria.

Seria uma maneira incrível de apresentar às pessoas do que se trata a categoria se eu pudesse escolher entre imagem e/ou vídeo e/ou áudio. Fazer um vídeo de introdução curto para cada categoria em vez de uma imagem. Assim, um membro em potencial poderia ter uma visão geral a partir de um pequeno texto e assistir a um vídeo com uma introdução sobre o que a categoria trata, ou ainda ouvir uma versão em áudio/introdução em podcast, se essa for a preferência deles.

Mas muito obrigado pelo seu trabalho e contribuição.

[satonotdead]

Quais são as melhores dimensões e opções para tornar um banner responsivo? Talvez eu precise verificar outro componente?

Acho que seria ótimo exibir as informações da categoria com um bom design.

Obrigado por esse módulo. É incrível.

[Rhidian (Rhidian Bramley)]

Os banners utilizam os modelos responsivos padrão do Discourse, portanto devem redimensionar-se automaticamente ao seu dispositivo.

[satonotdead]

Bem, vejo que a configuração de correção automática não funciona bem para a largura total do banner em dispositivos desktop e móveis.

Você tem algum exemplo disso? Talvez eu possa fazer isso via CSS, usando algumas media queries, mas seria útil para todos. Ou talvez eu esteja perdendo algo na minha configuração.

Obrigado pela sua resposta, Rhidian.

[James_Lodge]

Olá,

Estou usando seu brilhante componente de tema, mas, independentemente das configurações que faço, nada muda no layout. A descrição não aparece e, ao mover o logotipo entre as posições superior, esquerda e direita, os efeitos não são exibidos.

O que estou esquecendo, por favor?

[James_Lodge]

Alguém ainda monitora este tópico ou este componente de tema não é mais mantido?

[Rhidian (Rhidian Bramley)]

Não houve nenhuma alteração no componente. Nesses casos, é provável que seja outro componente que esteja interagindo com ele. Sugerimos desativar os componentes um por um para ver se você consegue identificá-lo. Se conseguir, por favor, nos avise.

[evantill (Eric Vantillard)]

O link na descrição da minha categoria está estilizado como código normal devido à regra CSS a,a:visited {color: inherit;} no component.css.

common/common.scss

Esse é o resultado esperado?