Changez la façon dont les listes de tags sont séparées

[awesomerobot (Kris)]

Les listes de tags sur les sujets dans Discourse sont séparées par des virgules par défaut. Cela ne change pas, mais la façon dont c’est implémenté et comment vous pouvez le modifier a changé :

Auparavant, nous utilisions un pseudo-élément CSS pour ajouter les virgules, ce qui n’est pas idéal car le contenu n’est techniquement pas disponible dans le document — les lecteurs d’écran ne peuvent pas y accéder, ils ne sont pas sélectionnables, les robots d’exploration ne peuvent pas les voir…

Ce changement fusionné aujourd’hui déplace les séparateurs de tags vers du HTML approprié : FEATURE: customizable tag separator with value transformer in proper HTML by awesomerobot · Pull Request #31674 · discourse/discourse · GitHub

Pour la plupart des sites, cela ne changera rien d’évident, mais si vous avez précédemment supprimé ou modifié le séparateur de tags, vous devrez utiliser un transformateur de valeur au lieu du CSS.

C’est un processus assez simple avec JS, par exemple si vous voulez supprimer complètement la virgule :

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

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

ou si vous voulez utiliser un séparateur pipe |

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

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

associé à un peu de CSS :

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

Faites-nous savoir si vous rencontrez des problèmes avec ce changement !

[jesus2099]

Nous constatons des virgules en double :

Discourse tags separated by two commas?

Probablement que l’une provient du nouveau code HTML et l’autre du CSS du thème personnalisé (ancien code).

La première (HTML) est effectivement sélectionnable, tandis que la seconde (CSS) ne l’est pas.

Suite à ce changement, tous les thèmes personnalisés devraient être corrigés, apparemment ?

[Arkshine]

D’après ce que je vois sur votre forum, c’est lié à Multilingual Plugin 🌐.

assets/stylesheets/common/multilingual/content-language-tags.scss

Il utilise toujours l’ancienne méthode avec des pseudo-éléments CSS.
Ce CSS pourrait être supprimé.

[jesus2099]

Wow ! Merci pour votre diagnostic rapide !

[Olle11]

Bonjour Arkshine,

Je voulais essayer d’installer le plugin Multilingue, et lorsque je l’ai essayé, les doubles virgules sont apparues. Lorsque j’essaie de désactiver le plugin, ma langue devient l’anglais (et donc les doubles virgules disparaissent). Lors de la réactivation, cela redevient ma langue à nouveau.

Penses-tu que je devrais supprimer le plugin si je n’en ai pas vraiment besoin pour l’instant, et si oui, pourquoi la langue est-elle maintenant en anglais ? La « locale par défaut » est vide lorsque je désactive le plugin multilingue.

Si le plugin n’affecte pas le site web d’une quelconque manière, je peux peut-être le garder et essayer de supprimer les doubles virgules.

Cordialement
Olle

Mise à jour : Je l’ai corrigé en supprimant le plugin.

[manuel (Manuel Kostka)]

Il semble que le séparateur soit masqué par défaut lorsque le style de balise est box ou bullet :

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

Cependant, cela est remplacé sur la liste mobile par une déclaration plus spécifique. Ainsi, sur mobile, le séparateur s’affiche :