hlissner
(Henrik Lissner)
1
自昨天的更新(我的托管服务器位于 https://doomemacs.discourse.group)以来,我的自定义 CSS 均未生效。我对主题或组件 CSS 的修改没有任何效果(尽管修改其 <head> 或其他 HTML 部分则正常)。
有一个可疑的 link 标签指向一个空的样式表,其哈希值在我每次修改 CSS 时都会变化。看起来 Discourse 在静默中未能编译我的样式表。我的错误日志中没有任何失败的记录,discourse_theme 上传样式表时也未报错,但毫无效果。
能否请管理员帮忙查看一下?
rorycb
(Rory Craig-Barnes)
2
pmusaraj
(Penar Musaraj)
4
你好 @hlissner,我正在修复这个问题。最近对核心的升级导致您的实例上的主题组件失效。我很快就能提供修复方案。
pmusaraj
(Penar Musaraj)
5
修复 已合并到核心代码中,您的站点已部署,@hlissner。请注意,我已禁用了两个主题组件:一个是自定义样式组件(您可以重新启用),另一个是 discourse-theme-category-homepage,该组件需要在上游更新后才能启用。更多详情请参阅 Enhanced category-box display component - #7 by pmusaraj
hlissner
(Henrik Lissner)
6
谢谢!样式表现在已正确加载,但 SCSS 颜色变量 似乎并未继承我的主题配色方案。例如,$secondary 返回的是其默认值 #ffffff,而不是 #282c34。这是否是 e8b8272 引入的另一个回归问题?
pmusaraj
(Penar Musaraj)
7
是的,这是另一个回归问题。修复起来有点棘手……对于绝大多数颜色变量,主题组件应使用 CSS 自定义属性。您可以参考这篇指南 https://meta.discourse.org/t/updating-themes-and-plugins-to-support-automatic-dark-mode/161595,了解如何在主题组件中通过特殊的 color_definitions.scss 文件添加自定义颜色变体的概述和示例。
请告诉我进展如何!
hlissner
(Henrik Lissner)
8
我已尽可能这样做,但如果没有访问这些变量的权限,我就无法根据当前激活的主题方案来变换颜色。例如:
$primary-low: dark-light-choose(darken($secondary, 12%), lighten($secondary, 10%));
:root {
--primary-low: #{$primary-low};
}
有没有更好的解决方法?我可以直接为每个主题添加样式,但我打算创建很多主题,因此更希望尽可能在一个中央的全局组件中处理一些通用情况。
pmusaraj
(Penar Musaraj)
9
是的,这说得通。你试过把上面的 SCSS 代码添加到 common/color_definitions.scss 这个新文件中吗?如果在那里添加,应该就能直接生效。(UI 中还有一个专门用于该样式表的标签页。)
hlissner
(Henrik Lissner)
10
正准备试试这个,结果 Discourse 就挂了,显示“支撑此讨论论坛的软件遇到了意外问题”,哈哈。
pmusaraj
(Penar Musaraj)
11
你可以通过 /safe-mode 访问站点,该模式会禁用主题和组件,之后你就能查看具体发生了什么。
不过,这又是另一个回归问题,这些 SCSS 错误本不应导致整个站点崩溃。我肯定会在接下来的几天内修复这个问题。
hlissner
(Henrik Lissner)
12
成功了!颜色变量已正确设置在 color_definitions.scss 的作用域内。唯一的问题是,我无法从中导入其他样式表。例如:
// scss/globals.scss
$foo: "#000000";
// color_definitions.scss
@import "globals";
:root { --foo: #{$foo}; }
Discourse 错误日志中显示如下内容:
SCSS 编译错误:错误:找不到或无法读取要导入的文件:globals.scss。
位于 color_definitions.scss 的第 129 行
>> @import "globals";
不过,我可以重新设计样式表以避免这种依赖关系,所以这不算什么大问题。但这是否算作一个漏洞呢?
pmusaraj
(Penar Musaraj)
13
是的,我已经提交了一个 PR 来解决导入问题,预计明天会合并。
hlissner
(Henrik Lissner)
14
感谢您的帮助!PR 已合并,我的实例也已更新,我现在可以将样式表导入到 color_definitions.scss 中,但这个问题又出现了:
这次,color_definitions.scss 中的变量也受到了影响。
pmusaraj
(Penar Musaraj)
15
是否可以在不继承父主题 SCSS 变量的情况下实现您想要做的操作?这是一个非常特定的使用场景,我宁愿不在核心代码中添加这种复杂性。
hlissner
(Henrik Lissner)
16
这当然是可行的,只是不太方便,因为每个主题都需要编写数百行样板 SCSS 代码(并且需要构建系统来在所有主题间共享变量),而这些在一周前还并非必需。话虽如此,为了避免未来 Discourse 构建流程重构时出现问题,最好还是现在就这样做。我会去处理。谢谢!
hlissner
(Henrik Lissner)
17
如果本指南已不再受支持,或许应该对其进行修订或删除。
pmusaraj
(Penar Musaraj)
18
是的,那份指南确实有点过时了。不过,导致你遇到问题的原因并非核心变量,而是某个组件中的 SCSS 颜色未继承主题的色彩方案。(尽管如此,我会通读该指南并对其进行更新。)
补充一点背景:我们在 2020 年 8 月至 9 月期间改用 CSS 自定义属性来处理颜色。做出这一变更的主要原因是,我们希望以一种轻量且高效的方式支持自动深色模式色彩方案切换。主题包含 CSS 和 JS,因此无法快速切换;但使用 CSS 自定义属性,色彩方案可以在不刷新页面的情况下即时切换。
我看到你的站点中有 4 个主题,每个主题对应一种色彩方案,并且有一个跨主题共享的组件用于处理共享样式。你完全可以通过一个主主题(包含所有共享样式)和 4 种用户可选的色彩方案来实现几乎相同的效果。你只需将主主题中 color_definitions.scss 文件内的所有颜色计算逻辑迁移过去即可。这是完全可行的,我明天会尽量找时间尝试一下。
hlissner
(Henrik Lissner)
19
那当然是最理想的。但我之所以采用目前的设置,是因为多种配色方案无法满足我的需求。某些配色方案会导致像 --primary-low 这样的自动生成的变量颜色效果不佳。仅仅重新定义该变量可能适用于一种配色方案,但无法适用于另一种。如果我们基于 $primary 重新定义它,或者根据配色方案的 ID 或名称进行条件判断,是有可能找到更通用的解决方案的。但如果没有这些,就必须使用多个主题,这样我就需要为每个主题单独维护一个 color_definitions.scss 文件(这正是我想避免的重复工作)。难道还有更好的方案是我遗漏的吗?