Destaque de Categoria

[angus (Angus McLeod)]

Este componente de tema permite destacar uma categoria (ou categorias) no seu Discourse. Você pode:

1. Dar um estilo de fundo especial a categorias específicas
2. Adicionar um link de categoria ao cabeçalho com o mesmo estilo especial

Um caso de uso comum é para uma categoria com conteúdo “Premium”.

Como instalar

Obter o código

---

Navegação por Categorias e Rótulo no Cabeçalho

Lista de Tópicos	Menu do Site

Página de Categorias

Configuração

O componente de tema Category Highlighter possui uma configuração principal: “destacar categorias”. Você encontrará essa configuração no painel de configurações do componente de tema Category Highlighter.

Cada categoria que você deseja destacar terá seu próprio item de lista nessa configuração. O formato de cada item é:

slug_da_categoria~fundo~cor_do_texto~rótulo_cabeçalho~rótulo_cabeçalho_mobile~slug_pai~link_alternativo

Um exemplo desse formato é:

premium~linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%)~#88562e~:star:  Premium~:star:

Existem seis valores possíveis, cada um separado por ~ (um “til”). Vamos analisar cada valor em sequência.

Slug da Categoria

Este é o “slug” da categoria que você deseja destacar. Você pode encontrá-lo nas configurações da categoria.

Se precisar destacar uma subcategoria, use o slug da categoria “Pai”, seguido pelo slug da subcategoria, separados por um /.

Por exemplo, se houver uma subcategoria de premium com o slug videos que você queira destacar, usaria:

premium/videos

Permissões

Observe que apenas os usuários com permissões de leitura para a categoria destacada verão os destaques, incluindo o rótulo do cabeçalho. Você pode alterar as permissões da categoria nas configurações de “Segurança” da categoria.

Fundo

Este é um valor que será atribuído à propriedade CSS background da insígnia da categoria. Você pode usar qualquer entrada aqui que essa propriedade suporte.

background - CSS: Cascading Style Sheets | MDN

A propriedade CSS abreviada background define todas as propriedades de estilo de fundo de uma vez, como cor, imagem, origem e tamanho, ou método de repetição.

Por exemplo: linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%).

Cor do Texto

Este é um valor que será atribuído à propriedade CSS color da insígnia da categoria. Isso afeta a cor do texto. Você pode usar qualquer entrada aqui que essa propriedade suporte.

color - CSS: Cascading Style Sheets | MDN

A propriedade CSS color define o valor da cor de primeiro plano do texto de um elemento e de suas decorações de texto, e define o valor currentcolor. O currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cor, como…

No nosso exemplo, isso é #88562e.

Rótulo do Cabeçalho

Este valor serve a dois propósitos. Ele determina:

1. se a categoria destacada receberá um rótulo no cabeçalho; e
2. o conteúdo desse rótulo.

Se você não quiser um rótulo no cabeçalho, não inclua esse valor.

Este valor suporta texto, entidades HTML e emojis.

O valor do rótulo do cabeçalho aqui é: :star:  Premium. Isso é:

1. O shortcode para o emoji de estrela: :star:
2. Duas entidades HTML de espaço não quebrável (cada uma adiciona um espaço em branco):   
3. Nosso texto de rótulo: Premium

Você pode encontrar a lista completa de shortcodes de emojis aqui e a lista completa de entidades HTML aqui.

Rótulo do Cabeçalho Móvel

Este valor também serve a dois propósitos. Ele determina:

1. se a categoria destacada receberá um rótulo no cabeçalho móvel; e
2. o conteúdo do rótulo do cabeçalho móvel.

O uso e a formatação são os mesmos do rótulo do cabeçalho. Uma coisa a notar aqui é que você tem menos espaço no mobile, então pode ser prudente usar apenas um emoji ou uma palavra curta para economizar espaço.

Categoria Pai

Você pode criar um menu suspenso no cabeçalho definindo o “pai” de um item. Insira o slug de uma categoria como o sexto item e o item relevante se tornará um item de submenu dessa categoria no cabeçalho. Como no primeiro item, certifique-se de usar o slug da categoria aqui, que você pode obter no modal de configurações da categoria.

Link Alternativo

Por padrão, cada item de categoria linka para a categoria correspondente. Você pode alterar o link adicionando uma URL como o sexto item no bloco de configuração.

[jrgong]

Tão simples, mas tão impactante. Eu já tinha o plano de usar CSS em certas partes do fórum para destacar posts de categorias de clientes pagos. Isso torna tudo muito mais fácil agora. Obrigado pelo trabalho, isso é incrível!

Você já pensou em destacar tópicos na lista de tópicos quando todas as categorias estão ativas no seletor de categorias? Por exemplo, adicionar a estrela antes do título do tópico?

[angus (Angus McLeod)]

O destaque funciona em todos os locais onde o emblema aparece, então ele já está presente na lista

Lista de Tópicos	Menu do Site

Página de Categorias

Veja mais em https://try.thepavilion.io

[outofthebox (Carson)]

@Angus, você é um desenvolvedor incrível e é uma imensa alegria colaborar com você. Obrigado pela sua criatividade, excelência e meticulosidade. Você é um presente para a comunidade Discourse.

[jordan.vidrine]

Esse é um componente bem legal, bom trabalho

[codinghorror (Jeff Atwood)]

ooo isso parece tão.. preeemium

[Anatolia]

@angus

A princípio, pensei que havia uma barra lateral. Uma barra lateral com esse estilo seria legal.

[Paracelsus]

Ótimo componente, realmente legal.

@angus Gostaria de saber como aplicar um border-radius no fundo destacado, obrigado antecipadamente.

[angus (Angus McLeod)]

@Paracelsus

Gostaria de saber como aplicar um border-radius no fundo destacado, obrigado antecipadamente.

Devido à variedade de contextos em que o selo de categoria aparece, isso é um pouco complexo. Posso adicionar uma classe para facilitar isso, mas por enquanto você pode fazer o seguinte:

### Botão do cabeçalho
.highlight-category-button {
    border-radius: 4px;
}

### Selos
.badge-wrapper[class*=" updates "],
.extra-info-wrapper .categories-wrapper .badge-wrapper[class*=" updates "],
.category-title-link-component[class*=" updates "] .category-text-title,
.select-kit.combo-box.category-drop .category-row[class*=" updates "] .badge-wrapper {
    &:before {
        border-radius: 4px;
    }
}

“updates” é o slug da categoria no exemplo

Exemplo: https://try.thepavilion.io/

[fzngagan (Faizaan Gagan)]

O componente agora suporta um menu suspenso de categorias.

Se você usar o slug da categoria pai como o 6º item nas configurações, ele exibirá um menu suspenso com as categorias filhas como itens.

Nota: Você precisará passar o 5º item, ou seja, (Rótulo do cabeçalho móvel), como vazio se não quiser utilizá-lo.

Obrigado por patrocinar isso, @outofthebox.

[outofthebox (Carson)]

Ótimo trabalho @fzngagan!! A equipe do Pavilion é brilhante.

[satonotdead]

Seria possível destacar não apenas o slug, mas também .select-kit .select-kit-row.is-highlighted?

Acho que ficaria melhor para os nossos olhos.

Concordo com os comentários: seu trabalho é incrível. Estive olhando o site do Pavilion e estou testando muitas coisas.

Espero que em breve trabalhemos em algumas ideias que temos para nossa comunidade

[MarcP]

Primeiramente, obrigado por este componente incrível.

@angus

Lista de tópicos

Acho que ficaria melhor se houvesse um pouco mais de espaço em branco entre o título do tópico e o selo da categoria na visualização de lista de tópicos. Isso pode ser feito dentro do componente? Parece que as caixas estão um pouco maiores do que a visualização padrão em caixas, o que cria uma visualização dolorosa para alguns perfeccionistas, lol.

A visualização móvel é melhor do que a visualização do desktop:

[jrgong]

Isto ainda está funcionando com os testes mais recentes aprovados? Se sim, você ainda tem a documentação arquivada em algum lugar? @angus

[angus (Angus McLeod)]

Colei a documentação no OP acima. Me avisem se não estiver funcionando.

[jrgong]

Incrível! Especialmente a parte do gradiente foi crucial para atingir meu objetivo! Muito obrigado!

[jrgong]

Alguém ainda está usando este TC e talvez tenha encontrado uma solução para o seguinte problema?
Nas versões 2.9.0.beta9 e beta10, o TC faz com que a meta da categoria do sistema desapareça do campo de lista suspensa de categorias e da lista de tópicos.

O log do fórum está vazio, a única coisa no log do console é:

[THEME 190 'Category Highlighter'] Para evitar erros em testes, adicione uma chave `pluginId` à sua chamada `modifyClass`. Isso garantirá que a modificação seja aplicada apenas uma vez. 3 plugin-api.js:19