Ändern Sie, wie Tag-Listen getrennt werden

[awesomerobot (Kris)]

Die Listen von Schlagwörtern zu Themen in Discourse werden standardmäßig durch Kommas getrennt. Dies ändert sich nicht, aber die Implementierung und wie Sie sie ändern können, hat sich geändert:

Zuvor haben wir ein CSS-Pseudoelement pseudo element verwendet, um die Kommas hinzuzufügen, was nicht ideal ist, da der Inhalt technisch gesehen nicht Teil des Dokuments ist – Screenreader können nicht darauf zugreifen, er ist nicht auswählbar, Web-Crawler können ihn nicht sehen…

Diese heute zusammengeführte Änderung verschiebt die Tag-Trennzeichen in korrektes HTML: FEATURE: customizable tag separator with value transformer in proper HTML by awesomerobot · Pull Request #31674 · discourse/discourse · GitHub

Für die meisten Websites wird sich dadurch nichts Offensichtliches ändern, aber wenn Sie zuvor das Tag-Trennzeichen entfernt oder geändert haben, müssen Sie stattdessen einen Werttransformator anstelle von CSS verwenden.

Dies ist ein ziemlich einfacher Vorgang mit JS, zum Beispiel, wenn Sie das Komma vollständig entfernen möchten:

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

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

oder wenn Sie ein Pipe-Trennzeichen verwenden möchten

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

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

gepaart mit etwas CSS:

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

Lassen Sie uns wissen, wenn Sie Probleme mit dieser Änderung feststellen!

[jesus2099]

Wir sehen doppelte Kommas:

Discourse tags separated by two commas?

Wahrscheinlich kommt eines vom neuen HTML-Code und das andere vom benutzerdefinierten Theme-CSS (alter Code).

Ersteres (HTML) ist tatsächlich auswählbar, während letzteres (CSS) nicht auswählbar ist.

Nach dieser Änderung sollten alle benutzerdefinierten Themes anscheinend behoben sein?

[Arkshine]

Nach allem, was ich in Ihrem Forum sehe, hängt es mit Multilingual Plugin 🌐 zusammen.

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

Es verwendet immer noch den alten Weg mit CSS-Pseudo-Elementen.
Dieses CSS könnte entfernt werden.

[jesus2099]

Wow! Danke für deine schnelle Diagnose!

[Olle11]

Hallo Arkshine,

ich wollte versuchen, das Multilingual-Plugin zu installieren, aber beim Testen sind die doppelten Kommas aufgetreten. Wenn ich das Plugin deaktivieren, wird meine Sprache Englisch (und die doppelten Kommas verschwinden). Wenn ich es wieder aktivieren, wird meine Sprache erneut eingestellt.

Denkst du, ich sollte das Plugin entfernen, wenn ich es momentan nicht wirklich brauche, und warum ist die Sprache jetzt auf Englisch eingestellt? Der ‘Standard-Locale’ ist leer, wenn das Multilingual-Plugin deaktiviert ist.

Wenn das Plugin keinen Einfluss auf die Webseite hat, könnte ich es vielleicht behalten und versuchen, die doppelten Kommas zu entfernen.

Beste Grüße
Olle

Edit: Ich habe es gelöst, indem ich das Plugin entfernt habe.

[manuel (Manuel Kostka)]

Es scheint, dass der Trenner standardmäßig ausgeblendet wird, wenn der Tag-Stil „Box“ oder „Bullet“ ist:

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

Dies wird jedoch in der mobilen Liste durch eine spezifischere Deklaration überschrieben. Daher wird der Trenner auf Mobilgeräten angezeigt: