Barra lateral de tags populares do Discourse

Este componente de tema exibe as tags mais populares de uma categoria em uma barra lateral fixa em telas maiores que 767px (a maioria dos tablets e dispositivos desktop).

:warning: Você deve ativar a configuração mostrar filtro por tag no seu site para que este componente de tema funcione.

O que posso fazer com este componente de tema?

  • Exibir de 3 a 30 tags populares em uma barra lateral para cada categoria

  • Definir o lado da barra lateral como esquerdo ou direito

  • Impedir que a barra lateral apareça em certas categorias

  • Alterar o texto do cabeçalho “Tags populares”

CSS Personalizado

Cada barra lateral é envolvida por uma classe que contém o nome da categoria, então, para a categoria UX, seria .ux-sidebar. Você pode usar essas classes para estilizar barras laterais individuais.

A tag HTML nas páginas com barras laterais também tem uma classe adicionada, para que você possa usar html.custom-sidebar para aplicar estilos em todas as páginas que possuem uma barra lateral.

Instalar este componente de tema

43 curtidas

this would make an incredibly powerful navigation tool if it showed the most common in each category and tag-page and it was positioned in a banner, or other item at the top of the page.

3 curtidas

Very nice work.

I can see the sidebar only on the page of first category in the list of categories.

How do I enable it for all categories?

1 curtida

The tags sidebar that appear on the parent category include both parent category tags and child category tags. To enable it for all categories and subcategories you need to change the code here discourse-popular-tag-sidebar/desktop/header.html at master · awesomerobot/discourse-popular-tag-sidebar · GitHub.

2 curtidas

Right now, it shows only for the first category on categories page

So, which part of code i need to edit and how can i get it for all page.

Please help with details. Sorry and thanks

Can you help with that change? I do not understand the coding that much. Please help

It appears only on first category in category list. Not in any other one. Please help

2 curtidas

Existe alguma maneira de exibi-lo acima da lista de tópicos?

Caso você não soubesse, já existe um menu suspenso de tags opcional no Discourse padrão (mostrado na imagem acima), que aparece acima da lista de tópicos.

image

3 curtidas

Entendo, mas para o meu objetivo, quero exibir uma lista ou algo parecido com uma nuvem de tags.

3 curtidas

Sim, estou tendo esse problema também. Existe uma correção?

Vejo que funciona nas páginas de Categoria agora. Mas há uma maneira de fazê-lo funcionar na thread Mais recente?

Você pode descrever esse problema um pouco mais? A barra lateral aparece apenas para uma categoria e não para as outras?

Todas as categorias que você está tentando têm tópicos com mais de 3 tags? A barra lateral não será exibida se houver menos de 3 tags em uma categoria específica.

Sim, acho que posso adicionar algum suporte para outras páginas.

1 curtida

Apenas uma pergunta… quando clico em Tags na Barra Lateral de Tags, a URL é https://www.example.id/tags/c/sub-categoriy/Tags-name

Não há problema quando clico diretamente (na mesma página), mas quando clico com o botão direito e abro em uma nova aba, aparece a mensagem: “Ops! Essa página não existe ou é privada.

Por que o formato da URL não é como o de URLs normais de tags, https://www.example.id/tags/tag-name?

Outra pergunta: como adicionar um espaço entre o texto (tag) que não seja 1 ou 1,5 (não tenho certeza), mas sim 2.

Muito obrigado.

1 curtida

Adicionei um recurso para mostrar opcionalmente a barra lateral de tags nas páginas do menu superior (mais recentes, mais populares, novos, etc.). Ele está desabilitado por padrão; você pode ativá-lo nas configurações do componente do tema.

Foi um erro meu; não considerei as subcategorias e reestruturei a URL para se adequar. Já está corrigido.

Essa URL mostra todas as tags em todas as categorias. Quando você está dentro de uma categoria e clica em uma tag na barra lateral, eu quis fazer com que você visse essa tag no contexto da categoria atual.

Não tenho certeza do que você quer dizer. Pode me dar um exemplo específico?

1 curtida

Uau… agora funciona quando abro em uma nova aba. Muito obrigado…

Desculpe pelo meu inglês ruim :grinning:

“Adicionar espaço” significa alterar o espaçamento entre linhas (como no MS Word) para 2, que atualmente parece ser 1 ou 1,5, de modo que haja mais espaço entre as tags.

Além disso, posso alterar a cor do texto das tags? De azul para cinza.

Outra pergunta: as tags populares podem sempre ser vistas?

Quando rolo para baixo, as palavras “Tags populares” não ficam visíveis; apenas a lista de tags aparece.

image

Mais uma vez… Muito obrigado pela sua ajuda.

Ah, ok, você pode adicionar um pouco de CSS ao seu tema (admin > personalizar > temas) assim:

.tag-sidebar a:nth-of-type(2) {
    margin-top: 5px;
}

De forma similar para a cor do texto

.tag-sidebar a {
    color: red;
}

Isso provavelmente é um problema com o seu tema atual; você pode ajustar a posição superior da barra lateral assim:

.topic-list.with-sidebar > .tag-sidebar {
  top: 120px;
}

Todas essas são alterações gerais de CSS… se você quiser fazer mais mudanças de estilo como essas, sugiro seguir alguns tutoriais de CSS. CSS styling basics - Learn web development | MDN é uma ótima opção gratuita!

5 curtidas

Olá, estou com problemas na linha 31: discourse-popular-tag-sidebar/desktop/header.html at master · awesomerobot/discourse-popular-tag-sidebar · GitHub

Pode me ajudar a verificar esse erro?

Qual é o motivo do limite máximo de 30 tags?

Oi, Kris!
Estou me perguntando se a opção number_of_tags não foi perdida com esse commit? :thinking:

2 curtidas

Seria muito legal se o número máximo de tags fosse aumentado para 100 e exibido em uma nuvem de texto responsiva, com altura preenchida, ordenada alfabeticamente. Ou seja, quanto mais popular a tag, maior o tamanho da fonte. As “top 100” tags.

Além disso, seria bom que ela fosse posicionada horizontalmente acima das listas de categorias para dispositivos móveis. Eu realmente quero isso para mobile. :star_struck:

Olá,

Como posso exibir a lista de tags populares abaixo do cabeçalho? Por favor, me dê sugestões.

Obrigado

1 curtida

Infelizmente, este componente entra em conflito com Discourse Tag Sidebars. Quando habilito ambos, todas as tags ficam espremidas em uma única linha, assim:

E as barras laterais de tags não aparecem.

Isso é lamentável, porque eles deveriam ser complementares: a lista de tags para a visualização “todas as tags” (e possivelmente também “sem tags”), e a barra lateral para tags específicas. Na verdade, talvez eles pudessem ser combinados em um único componente?

1 curtida