タグ一覧の区切り方法の変更

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;
}

この変更に関して問題が発生した場合は、お知らせください!

「いいね!」 8

重複したカンマが見られます。

おそらく、一つは新しいHTMLコードから、もう一つはカスタムテーマCSS(古いコード)から来ているのでしょう。
前者の(HTML)は確かに選択可能ですが、後者の(CSS)は選択できません。

この変更の後、すべてのカスタムテーマは修正されるのでしょうか?

「いいね!」 2

フォーラムで見たところ、Multilingual Plugin 🌐 に関連しているようです。

まだCSSの疑似要素を使った古い方法を使用しています。
このCSSは削除できます。

「いいね!」 2

わあ!迅速な診断ありがとうございます!

「いいね!」 1

Arkshine様

Multilingualプラグインをインストールしようとしたのですが、二重カンマが表示されました。プラグインを無効にすると、私の言語は英語になり(そのため二重カンマは消えます)、再度有効にすると私の言語に戻ります。

現時点ではあまり必要ないので、プラグインを削除した方が良いでしょうか?もしそうなら、なぜ言語が英語になるのでしょうか?Multilingualプラグインを無効にすると、「デフォルトロケール」は空白になります。

プラグインがウェブサイトに全く影響しないのであれば、そのままにして二重カンマを削除できるかもしれません。

よろしくお願いいたします。
Olle

編集:プラグインを削除して修正しました。

デフォルトでは、タグのスタイルがボックスまたは箇条書きの場合、区切り文字は非表示になります。

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

ただし、これはモバイルリストで、より具体的な宣言によって上書きされます。そのため、モバイルでは区切り文字が表示されます。

「いいね!」 2