更改标签列表的分隔方式

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,

我想尝试安装多语言插件,但当我试用它时,出现了双引号。当我尝试禁用插件时,我的语言变成英语(因此双引号就消失了)。当我再次启用它时,它又变回我的语言。

你认为我应该删除这个插件,如果我暂时不需要它的话?为什么现在语言变成了英语?在禁用多语言插件后,“默认地区设置”是空的。

如果插件对网站没有任何影响,也许我可以保留它,然后尝试解决双引号的问题。

此致
奥莱

编辑:我通过删除插件解决了这个问题

默认情况下,当标签样式为“box”或“bullet”时,分隔符会被隐藏:

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

但是,在移动列表上,这会被更具体的声明覆盖。因此,在移动设备上分隔符会显示出来:

2 个赞