Cabeçalho de Categorias em Destaque

[manuel (Manuel Kostka)]

	Resumo	Categorias de recursos em visualizações selecionadas.
	Link do Repositório	Manuel Kostka / Discourse / Components / Featured Categories · GitLab
	Novo no Discourse Themes?	Guia para iniciantes sobre o uso de Discourse Themes

Instale este componente de tema

Visualização em cartões

Visualização em lista

Configurações

Você pode alternar entre os dois layouts acima ou escolher nenhum e declarar seus próprios estilos. Você também pode escolher uma rota e definir uma saída para o componente.

Modelo

.featured-categories {
  &__container {
  }
  &__heading {
  }
  &__list-container {
  }
  &__category-container {
  }
  &__category-link {
    .category-logo {}
    .category-name {}
    .category-description {}
}

[Zup]

Obrigado, Handy TC.

Imagino que seriam adições desejáveis um alternador para exibir apenas na página inicial, exibir o logotipo do site e exibir a descrição do site abaixo do logotipo.

[manuel (Manuel Kostka)]

@Zup

Uma alternância para exibir apenas na página inicial

No momento, ele aparece nas listas globais (mais recentes/novos/não lidos/top). Estava pensando em adicionar um menu suspenso nas configurações para selecionar as páginas globais em que ele deve aparecer. Então, sim, está no meu roteiro quando tiver tempo para isso novamente!

Qual seria o caso de uso para ter o logotipo? Nas páginas globais, você já está quase “em casa”, certo?

O que eu realmente estaria mais interessado em adicionar é uma visualização para dispositivos móveis. Até agora, não tive uma ideia para isso, então ele simplesmente não é exibido em dispositivos móveis. Obrigado por compartilhar! Se você tiver alguma ideia para isso!

[Zup]

@manuel

Qual seria o caso de uso para ter o logotipo?

Estética personalizada e, combinado com uma breve descrição, ofereceria uma visão rápida sobre uma comunidade para novos visitantes e serviria como um lembrete para usuários existentes sobre a missão da comunidade. Posicionado acima ou à esquerda dos links.

Exibir isso nos links globais por padrão, além de opcionalmente por categoria (e páginas de tags?), serviria como um menu de navegação conveniente para áreas prioritárias — esse seria meu principal uso pretendido. (Aliás, a capacidade de incluir links personalizados — não apenas categorias — seria outra funcionalidade desejável.)

Pessoalmente, acho que a maioria dos sites Discourse tende a ser um pouco vaga, especialmente na visita inicial, e, por padrão, acho que a navegação do Discourse pode ser confusa para o usuário médio. Geralmente, meus sites são projetados para priorizar apenas algumas áreas (de muitas), e essas adições propostas tornariam muito claro para o usuário médio quais são essas áreas, além de facilitar o acesso.

[valsha (KingPin)]

Bom componente,

Instalamos o Versatile Banner. Como podemos mover este componente PARA BAIXO do Versatile Banner?
Assim, o componente Versatile Banner será exibido primeiro e, em seguida, o seu.

Obrigado.

[manuel (Manuel Kostka)]

Sim, ambos os componentes são renderizados no mesmo outlet. Não sei o que causa a ordem dos elementos nesse caso? No meu site, ele aparece abaixo do banner por padrão..

Mas você deve poder controlar a ordem com declarações CSS:

.below-site-header-outlet.categories-header {
  order: -1 !important;
}
.below-site-header-outlet.banner-themes {
  order: -2 !important;
}

[manuel (Manuel Kostka)]

@Zup

Por falar nisso, a capacidade de incluir links personalizados — não apenas categorias — seria outra funcionalidade desejável.

Isso soa como muitas opções personalizadas. Não gostaria de adicionar tanta lógica a este componente.
Criar uma navegação em destaque parece mais um caso de uso para um banner HTML personalizado, não acha? Você só precisaria de alguns links com imagens e títulos.

@Zup

Acho que a maioria dos sites Discourse tende a ser um pouco vaga, especialmente na visita inicial, e, por padrão, acredito que a navegação do Discourse pode ser confusa para o usuário médio.

Concordo com isso! Acredito que banners dedicados para visitantes e para usuários recém-inscritos podem ser úteis e acolhedores.

[JammyDodger]

Há uma opção ‘inverter posicionamento padrão’ nas configurações do Versatile Banner, caso seja útil para você?

inverter posicionamento padrão>

Se houver outro componente relacionado a banners ativo, use esta opção para inverter sua posição com o Versatile Banner

[valsha (KingPin)]

Tente essa configuração, não funcionou para mim

[Rhod (Rodolfo)]

Instalei um componente de tema, mas ele não se encaixa no conteúdo principal, o que o torna muito deslocado (feio), eu uso o tema air.
Você pode me ajudar, por favor, onde posso fazer o componente aparecer dentro do contêiner de cor escura?

Parece com isto:

Eu gostaria que parecesse com isto:

[AkaiBukai]

Olá,
Estou apenas começando com o Discourse e temas…
Quero ter algum tipo de cartões no topo, como você pode ver aqui: Secret World Legends - Funcom Forums
Este componente de tema parece ajudar nessa direção…
Eu o instalei e consegui selecionar as categorias que quero que apareçam, mas só obtive os títulos…
O que faz sentido, pois ainda não defini nenhuma imagem…

Minha pergunta (que provavelmente é uma pergunta boba, pois ninguém mais a fez ainda) é como posso definir a imagem das categorias…
E como eu as “carrego”?

Obrigado por qualquer ajuda…

[Heliosurge (Dan DeMontmorency)]

Vá para as configurações de Categorias que você usou para criar a categoria e selecione a aba de imagem.

Carregar imagem

[Vasan_Cannane]

Olá, sou novo no Discourse e tenho uma pergunta sobre o cabeçalho das categorias em destaque

Estou tentando conseguir isso, mas não consigo.

Eles forneceram algumas linhas de código:

html.categories-header{
  .below-site-header-outlet.categories-header {
    .wrap {
      .categories-header-item {
        [link, logo, nome de cada item...]
      }
    }
  }
}

Como posso especificar o link, o logo e o nome do item?

Alguém pode esclarecer isso?

Obrigado

[Arkshine]

Olá, seja bem-vindo

Se você quiser exibir uma imagem como a do exemplo, precisará selecionar as categorias relevantes na configuração do componente de tema e garantir que cada uma delas tenha uma imagem atribuída (configurações da categoria → Imagens → Imagem do Logo da Categoria)

[Vasan_Cannane]

Esta é a configuração do componente temático Categorias em Destaque e não consigo encontrar nada

[Arkshine]

Você precisa editar a configuração da sua categoria:

Clique na aba Images:

…e faça o upload de uma Imagem de Logo da Categoria!

[Vasan_Cannane]

Tenho uma linha de produtos, como posso dividir os produtos em várias colunas?

[Arkshine]

Algo assim?

Se sim, tente este CSS. Adicione-o ao CSS do seu tema ou em um componente.

Dentro, você pode ver variáveis que pode controlar.
Você pode escolher o número de colunas, o espaçamento entre os elementos e a largura de cada elemento.
Os elementos estão empilhando automaticamente.

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 6;
    --ch-gap: 2.5em;
    --ch-width: 110px;

    display: grid !important;

    grid-template-columns: repeat(auto-fill, minmax(var(--ch-width), 0fr));
    gap: var(--ch-gap) !important;

    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap))) !important;
}

[Vasan_Cannane]

Obrigado pela ajuda.

Posso pedir mais uma ajuda?

É isso que estou tentando alcançar.

Você pode me ajudar com isso?

[Arkshine]

Tente algo assim:

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 4;
    --ch-gap-row: 2em;
    --ch-gap-col: 6em;
    --ch-width: 120px;
    
    > div {
        width: var(--ch-width);
    }
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap-col))) !important;
}