Can it be done with CSS? Grouping categories on category page

开发
13

您知道有不适用于 RTL 的主题示例吗？如果您知道，请在此处发布主题链接，我将测试我的理论，并在测试后解释问题所在。

编辑：这是对问题的解释：

对于位于 Discourse 主代码库中的 CSS 文件，RTL CSS 是通过“翻转”大多数依赖于站点布局方向的 CSS 规则来创建的。例如，padding-left 会被翻转为 padding-right。这是通过 RTLcss gem 完成的：https://github.com/discourse/rtlcss。

问题在于 Discourse 主题的 CSS 规则不会被翻转。这意味着，如果一个主题有指定方向的 CSS 规则，那么在使用 RTL 语言时，方向将与使用 LTR 语言时相同。这是一个小例子：

当主题与 RTL 界面一起使用时，padding-left: 8px; 不会被翻转为 padding-right: 8px;。这会导致轻微的对齐问题。我相信在使用 RTL 语言时会出现更严重问题的示例。

对于您添加到主题编辑器中默认 Discourse 主题的任何 CSS，情况也是如此。这是一个使用本主题代码的示例：Can it be done with CSS? Grouping categories on category page - #4 by cosdesign

这是该 CSS 中设置方向的一条规则：

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0; // This needs to be changed
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

在使用 RTL 语言时，这是问题所在：

image
image863×676 57.5 KB

如果该规则位于核心 Discourse CSS 文件中，当选择 RTL 语言时，left: 0; 将自动转换为 right: 0;。由于 CSS 添加到主题中，您需要手动将其编辑为：

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // Changed to the proper position for RTL layouts
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

image
image829×674 57.1 KB

Discourse 在使用 RTL 布局时会向 html 标签添加一个 rtl 类。主题开发者可以使用此类别使他们的主题同时适用于 LTR 和 RTL 布局。这有效，而且我认为它是正确的，但可能不需要 left: auto 声明。

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}
/* Fix positioning for rtl layouts */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

我不确定开发者是否应该采用这种方法来开发他们的主题。这很耗时，并且可能导致错误和维护问题。也许 Discourse 可以编译一些主题，并考虑提供 RTL 版本。也许值得用其中一些来测试这种方法：

require "rtlcss"

Rtlcss.flip_css("theme_css")

这本应是一个简短的回答 :slight_smile: 如果我写的内容是正确的，并且没有在其他主题中处理过，也许应该将其移到一个新主题中。