inj3ct0r:
我仍然对如何使用上面的代码感到困惑
您知道有不适用于 RTL 的主题示例吗？如果您知道，请在此处发布主题链接，我将测试我的理论，并在测试后解释问题所在。
编辑：这是对问题的解释：
对于位于 Discourse 主代码库中的 CSS 文件，RTL CSS 是通过“翻转”大多数依赖于站点布局方向的 CSS 规则来创建的。例如，padding-left 会被翻转为 padding-right。这是通过 RTLcss gem 完成的：https://github.com/discourse/rtlcss。
问题在于 Discourse 主题的 CSS 规则不会被翻转。这意味着，如果一个主题有指定方向的 CSS 规则，那么在使用 RTL 语言时，方向将与使用 LTR 语言时相同。这是一个小例子：
height: calc(100vh - (var(--header-offset) + 80px));
@include box-shadow;
}
.sidebar-footer-wrapper {
background: var(--secondary);
}
}
body.has-sidebar-page {
#main-outlet-wrapper {
padding-left: 8px;
}
#main-outlet {
max-width: unset;
}
}
.desktop-view .sidebar-footer-wrapper .sidebar-footer-container::before {
background: linear-gradient(
to bottom,
transparent,
当主题与 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 语言时，这是问题所在：
如果该规则位于核心 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);
}
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")
这本应是一个简短的回答
但也许其他人也需要。我必须说明：
如果我写的内容是正确的，并且没有在其他主题中处理过，也许应该将其移到一个新主题中。