大家好,我过去习惯在 Logo 之后将论坛名称作为文本注入到页眉中,但试图让它在各种浏览器宽度和页眉内容组合下都能完美适配实在太过繁琐。因此,我现在使用一张包含实际 Logo 和论坛名称的图片作为 Logo。
但在更新到 v2026.7.0 版本后,我在某些宽度下难以让它在主题内部完美适配。(首页没有问题,因为那里的页眉有更多的空白空间)。Discourse 中关于 小 Logo 的说明是“位于网站左上角的小 Logo 图片,向下滚动时可见。”然而,实际行为比这更复杂一些。当浏览器宽度 >=1015 像素(大约)时,在带有侧边栏的主题内向下滚动时,会使用 主 Logo,该 Logo 必须缩小以适应主题标题左侧剩余的狭小空间,这在我的情况下导致其无法辨认。而当宽度小于 ~1015 像素时,它会切换为 小 Logo。是否有什么方法可以使其在主题视图向下滚动时 始终 使用 小 Logo,甚至使用 移动设备 Logo?在这个旧帖子中有一些类似的想法,但并不完全符合我的需求,而且我不确定其技术实现是否仍然适用:
这不是默认行为……所以可能是主题的问题?你用的是 Horizon 吗?我记得它会改变徽标的显示方式。
啊,我想问题就出在这里,这个主题组件也会覆盖默认的 Logo 行为。
并不是……这是没有安装任何主题组件的 Foundation 主题的小 Logo,宽度为 1020px
这是安装了全宽组件的 Foundation 主题
哦,你说得对……
// 当侧边栏可见时,强制 HomeLogo 处于“未最小化”状态。
const transformerExists = api.registerValueTransformer?.(
"home-logo-minimized",
({ value, context }) => {
if (value && context.showSidebar) {
return false;
}
return value;
}
);
^ 还有这个,但它只是用于自动化测试,对吧?
有没有一种相对干净的方法可以“覆盖覆盖”,而不需要对组件进行完整的分叉?我主要需要它是因为 1) 许多用户明确表示非常偏好宽布局,2) 除了仅仅增加 --d-max-width 和 --topic-body-width 值之外,还有太多主要和次要的 quirks 需要用 CSS 规则来处理。我一直在维护我自己的主题组件,其中包含我从 discourse-full-width-component/common/common.scss at main · discourse/discourse-full-width-component · GitHub 复制并改编的大量纯 CSS 规则,但它往往会在每个主要的 Discourse 版本中出现问题,我更喜欢像 Full Width Component 这样维护得更好、维护成本更低的解决方案。
太棒了!!非常谢谢你,Kris。
这个提交会包含在 ESR 版本中吗?目前显示我的全宽组件状态为 Theme is up-to-date with d-compat/2026.7
当然,这些更改完全由新设置控制,因此可以安全地移植到该版本。现在应该已经可用了。