Изменение способа разделения списков тегов

[awesomerobot (Kris)]

Списки тегов по темам в Discourse по умолчанию разделяются запятыми. Это не изменится, но изменился способ реализации и то, как вы можете это настроить:

Ранее мы использовали CSS псевдоэлемент для добавления запятых, что не было идеальным решением, так как контент технически не является частью документа — скринридеры не могут его прочитать, его нельзя выделить, веб-краулеры его не видят…

Это изменение, объединённое сегодня, переносит разделители тегов в корректный HTML: FEATURE: customizable tag separator with value transformer in proper HTML by awesomerobot · Pull Request #31674 · discourse/discourse · GitHub

Для большинства сайтов это не приведёт к очевидным изменениям, но если вы ранее удаляли или изменяли разделитель тегов, вам теперь нужно будет использовать трансформер значений вместо CSS.

Это довольно простой процесс с использованием JS. Например, если вы хотите полностью убрать запятую:

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

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

или если вы хотите использовать разделитель в виде вертикальной черты:

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

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

в сочетании с небольшим CSS:

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

Сообщите нам, если вы столкнётесь с какими-либо проблемами в связи с этим изменением!

[jesus2099]

Мы видим двойные запятые:

Discourse tags separated by two commas?

Вероятно, одна из них исходит от нового HTML-кода, а другая — от кастомной темы CSS (старый код).

Первая (HTML) действительно выделяется, тогда как вторая (CSS) — нет.

Следовательно, после этого изменения все кастомные темы, видимо, должны быть исправлены?

[Arkshine]

Судя по тому, что я вижу на вашем форуме, это связано с Multilingual Plugin 🌐 .

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

Там всё ещё используется старый подход с псевдоэлементами CSS.
Этот CSS можно удалить.

[jesus2099]

Вау! Спасибо за быструю диагностику!

[Olle11]

Привет, Arkshine,

Я попытался установить плагин Multilingual, и при его включении появились двойные запятые. Когда я пытаюсь отключить плагин, язык меняется на английский (и, следовательно, двойные запятые исчезают). При повторном включении возвращается мой язык.

Как вы думаете, мне стоит удалить плагин, если он мне сейчас не очень нужен? И если да, то почему язык теперь английский? При отключении плагина Multilingual поле «локаль по умолчанию» пустое.

Если плагин никак не влияет на работу сайта, возможно, я смогу оставить его и попытаться убрать двойные запятые.

С наилучшими пожеланиями,
Олле

Редакция: Я исправил это, удалив плагин.

[manuel (Manuel Kostka)]

Похоже, разделитель скрыт по умолчанию, когда стиль тега — «box» или «bullet»:

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

Однако на мобильном списке это переопределяется более специфичным объявлением. Поэтому на мобильных устройствах разделитель отображается: