Alterar como as listas de tags são separadas

As listas de tags em tópicos no Discourse são separadas por vírgulas por padrão. Isso não vai mudar, mas a forma como é implementado e como você pode alterá-lo mudou:

Anteriormente, usávamos um pseudo elemento CSS para adicionar as vírgulas, o que não é ideal porque o conteúdo tecnicamente não está disponível como parte do documento — leitores de tela não conseguem acessá-lo, eles não são selecionáveis, rastreadores da web não podem vê-los…

Esta alteração mesclada hoje move os separadores de tags para HTML adequado: FEATURE: customizable tag separator with value transformer in proper HTML by awesomerobot · Pull Request #31674 · discourse/discourse · GitHub

Para a maioria dos sites, isso não mudará nada óbvio, mas se você removeu ou alterou o separador de tags anteriormente, precisará usar um transformador de valor em vez de CSS.

Este é um processo bastante simples com JS, por exemplo, se você quiser remover a vírgula completamente:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.registerValueTransformer("tag-separator", () => "");
});

ou se você quiser usar um separador de pipe

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.registerValueTransformer("tag-separator", () => "|");
});

combinado com um pouco de CSS:

.discourse-tags__tag-separator {
  margin-inline: 0.25em;
}

Informe-nos se encontrar algum problema com esta alteração!

8 curtidas

Estamos vendo vírgulas duplicadas:

Provavelmente uma vem do novo código HTML e a outra vem do CSS do tema personalizado (código antigo).

O primeiro (HTML) é de fato selecionável, enquanto o último (CSS) não é.

Após esta alteração, todos os temas personalizados devem ser corrigidos, aparentemente?

2 curtidas

Pelo que vejo no seu fórum, está relacionado a Multilingual Plugin 🌐 .

Ainda usa a maneira antiga com pseudo-elementos CSS.
Este CSS poderia ser removido.

2 curtidas

Uau! Obrigado pelo seu diagnóstico rápido!

1 curtida

Oi Arkshine,

Queria tentar instalar o plugin Multilingual e, quando o testei, as vírgulas duplas apareceram. Quando tento desativar o plugin, meu idioma fica em Inglês (e, consequentemente, as vírgulas duplas desaparecem). Quando ativo novamente, volta a ser meu idioma.

Você acha que devo remover o plugin se não preciso dele por enquanto? E, se sim, por que o idioma está agora em Inglês? O ‘locale padrão’ fica em branco ao desativar o plugin multilíngue.

Se o plugin não afeta o site de forma alguma, talvez eu possa mantê-lo e tentar remover as vírgulas duplas.

Atenciosamente,
Olle

Edit: Resolvi removendo o plugin

Parece que o separador está oculto por padrão quando o estilo da tag é caixa ou marcador:

.discourse-tags .box + .discourse-tags__tag-separator, 
.discourse-tags .bullet + .discourse-tags__tag-separator {
  display: none;

No entanto, isso é substituído na lista móvel por uma declaração mais específica. Portanto, no celular, o separador é exibido:

2 curtidas