# 有没有办法更改小图标出现的宽度？

**URL:** <https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767>\
**Category:** Development\
**Created:** [2026年七月28日 21:05 UTC](https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767 "2026-07-28T21:05:55Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sb56637](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sb56637](https://meta.discourse.org/u/sb56637)\
**Post date:** [2026年七月28日 21:05 UTC](https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767/1 "2026-07-28T21:05:55Z")

</div>

大家好，我过去习惯在 Logo 之后将论坛名称作为文本注入到页眉中，但试图让它在各种浏览器宽度和页眉内容组合下都能完美适配实在太过繁琐。因此，我现在使用一张包含实际 Logo 和论坛名称的图片作为 Logo。

 ![58bfa22d967f8600bceeb5d1f50b21c3d756a482](https://global.discourse-cdn.com/meta/original/4X/e/a/5/ea5d3a276b14d017578a54a97c763dcace73d87e.png)

但在更新到 v2026.7.0 版本后，我在某些宽度下难以让它在主题内部完美适配。（首页没有问题，因为那里的页眉有更多的空白空间）。Discourse 中关于 **小 Logo** 的说明是“位于网站左上角的小 Logo 图片，向下滚动时可见。”然而，实际行为比这更复杂一些。当浏览器宽度 \>=1015 像素（大约）时，在带有侧边栏的主题内向下滚动时，会使用 **主 Logo** ，该 Logo 必须缩小以适应主题标题左侧剩余的狭小空间，这在我的情况下导致其无法辨认。而当宽度小于 ~1015 像素时，它会切换为 **小 Logo** 。是否有什么方法可以使其在主题视图向下滚动时 _始终_ 使用 **小 Logo** ，甚至使用 **移动设备 Logo** ？在这个旧帖子中有一些类似的想法，但并不完全符合我的需求，而且我不确定其技术实现是否仍然适用：

> [@Big header, scroll down, make header small (Like default size)](https://meta.discourse.org/t/big-header-scroll-down-make-header-small-like-default-size/32201):
>
> Hallo hallo! So I would like to have a header with a bigger size than default (Holding an image) and then reduce it, like the logo, to the default size, when you scroll down. Is that possible? Thanks! –Alex

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2026年七月29日 13:14 UTC](https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767/2 "2026-07-29T13:14:13Z")

</div>

这不是默认行为……所以可能是主题的问题？你用的是 Horizon 吗？我记得它会改变徽标的显示方式。

---

<div class="post-metadata">

**Author:** ![sb56637](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sb56637](https://meta.discourse.org/u/sb56637)\
**Post date:** [2026年七月29日 13:27 UTC](https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767/3 "2026-07-29T13:27:43Z")

</div>

你好，谢谢回复。我多年来一直使用 [https://meta.discourse.org/t/sams-simple-theme/23552，我认为它并没有修改](https://meta.discourse.org/t/sams-simple-theme/23552%EF%BC%8C%E6%88%91%E8%AE%A4%E4%B8%BA%E5%AE%83%E5%B9%B6%E6%B2%A1%E6%9C%89%E4%BF%AE%E6%94%B9) Logo 的行为。我还使用了 [https://github.com/discourse/discourse-full-width-component。无论如何，我通过一些自定义](https://github.com/discourse/discourse-full-width-component%E3%80%82%E6%97%A0%E8%AE%BA%E5%A6%82%E4%BD%95%EF%BC%8C%E6%88%91%E9%80%9A%E8%BF%87%E4%B8%80%E4%BA%9B%E8%87%AA%E5%AE%9A%E4%B9%89) CSS 规则解决了其中的怪癖，但这些规则在最新的 Discourse ESR 版本中不再起作用。我认为问题的根源在于：

> [@sb56637](#):
>
> 当浏览器宽度 \>=1015 像素（大约）时，在侧边栏可见的情况下向下滚动主题内部， **主 Logo** 仍然被使用

你能确认这种行为是否为默认设置吗？

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2026年七月29日 13:32 UTC](https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767/4 "2026-07-29T13:32:24Z")

</div>

> [@sb56637](#):
>
> 我也在使用 [GitHub - discourse/discourse-full-width-component: Make Discourse occupy the full browser width · GitHub](https://github.com/discourse/discourse-full-width-component)

啊，我想问题就出在这里，这个主题组件也会覆盖默认的 Logo 行为。

> [@sb56637](#):
>
> > [@sb56637](#):
> >
> > 当浏览器宽度 \>=1015 像素（大约）时，在显示侧边栏的主题内向下滚动， **主 Logo** 仍然被使用。
> 
> 你能确认这种行为是默认的吗？

并不是……这是没有安装任何主题组件的 Foundation 主题的小 Logo，宽度为 1020px

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/f/f/9ff498dada3933d892ee3b130c34f748133a5afc.png)

这是安装了全宽组件的 Foundation 主题

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/f/1/8f1974e8598e1af8de5cf7e1f44d938b85cfa820.png)

---

<div class="post-metadata">

**Author:** ![sb56637](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sb56637](https://meta.discourse.org/u/sb56637)\
**Post date:** [2026年七月29日 13:52 UTC](https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767/5 "2026-07-29T13:52:41Z")

</div>

哦，你说得对……

> <https://github.com/discourse/discourse-full-width-component/blob/main/javascripts/discourse/api-initializers/full-width.gjs>

```plaintext
// 当侧边栏可见时，强制 HomeLogo 处于“未最小化”状态。
  const transformerExists = api.registerValueTransformer?.(
    "home-logo-minimized",
    ({ value, context }) => {
      if (value && context.showSidebar) {
        return false;
      }
      return value;
    }
  );

```

> <https://github.com/discourse/discourse-full-width-component/blob/main/spec/system/full_width_spec.rb>

^ 还有这个，但它只是用于自动化测试，对吧？

有没有一种相对干净的方法可以“覆盖覆盖”，而不需要对组件进行完整的分叉？我主要需要它是因为 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](https://github.com/discourse/discourse-full-width-component/blob/main/common/common.scss) 复制并改编的大量纯 CSS 规则，但它往往会在每个主要的 Discourse 版本中出现问题，我更喜欢像 Full Width Component 这样维护得更好、维护成本更低的解决方案。

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2026年七月29日 15:56 UTC](https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767/6 "2026-07-29T15:56:43Z")

</div>

我认为最简单的办法就是向现有组件添加一个设置，我刚刚已经完成了！[UX: add a setting to disable logo changes - Pull Request #71 - discourse/discourse-full-width-component - GitHub](https://github.com/discourse/discourse-full-width-component/pull/71)

现在你可以进入主题设置，只需勾选“使用默认 Logo 行为”即可。

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/1/2/8120b80c5905ac8de6bee28c6a9c6d1e53d1bb7c.png)

---

<div class="post-metadata">

**Author:** ![sb56637](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sb56637](https://meta.discourse.org/u/sb56637)\
**Post date:** [2026年七月29日 16:06 UTC](https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767/7 "2026-07-29T16:06:32Z")

</div>

太棒了！！非常谢谢你，Kris。

这个提交会包含在 ESR 版本中吗？目前显示我的全宽组件状态为 `Theme is up-to-date with d-compat/2026.7 `

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2026年七月29日 16:38 UTC](https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767/8 "2026-07-29T16:38:15Z")

</div>

当然，这些更改完全由新设置控制，因此可以安全地移植到该版本。现在应该已经可用了。

---

<div class="post-metadata">

**Author:** ![sb56637](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sb56637](https://meta.discourse.org/u/sb56637)\
**Post date:** [2026年七月29日 16:58 UTC](https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767/9 "2026-07-29T16:58:04Z")

</div>

完美，非常感谢！

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2026年七月31日 16:58 UTC](https://meta.discourse.org/t/any-way-to-change-at-what-width-the-small-logo-appears/408767/10 "2026-07-31T16:58:17Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.