# 多功能横幅

**URL:** https://meta.discourse.org/t/versatile-banner/109133
**Category:** Theme component
**Tags:** official, versatile-banner
**Created:** [2019年二月14日 10:05 UTC](https://meta.discourse.org/t/versatile-banner/109133 "2019-02-14T10:05:24Z")
**Posts on this page:** 20
**Page:** 5

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2023年二月4日 23:37 UTC](https://meta.discourse.org/t/versatile-banner/109133/329 "2023-02-04T23:37:16Z")

</div>

你不能。你需要让他们成为管理员。

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2023年二月5日 00:35 UTC](https://meta.discourse.org/t/versatile-banner/109133/330 "2023-02-05T00:35:56Z")

</div>

您知道其他版主可以更改横幅照片的组件吗？

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2023年二月5日 06:20 UTC](https://meta.discourse.org/t/versatile-banner/109133/331 "2023-02-05T06:20:34Z")

</div>

不。版主无法更改主题。

可以创建一个主题，例如，将横幅设置为带有特定标签或类别的帖子中的照片（或带有该标签或类别的最新帖子）。然后，您可以将对该标签或类别的访问权限限制为特定组的成员。我曾经写过一个插件，它从帖子中的最新回复获取数据。

因此，在不查看代码的情况下，我认为您可以分叉主题并执行类似的操作。

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年九月27日 09:19 UTC](https://meta.discourse.org/t/versatile-banner/109133/333 "2023-09-27T09:19:41Z")

</div>

帖子已拆分为新主题：[如何翻译配置的 HTML？](https://meta.discourse.org/t/how-to-translate-the-configured-html/280281)

---

<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: [2023年九月12日 20:17 UTC](https://meta.discourse.org/t/versatile-banner/109133/334 "2023-09-12T20:17:21Z")

</div>

今天，我们合并了此组件的重构，将其从我们的自定义小部件系统移至现代的 Ember 组件。

> <https://github.com/discourse/discourse-versatile-banner/pull/17>
>
> 1. Move everything out of head\_tag.html
> 2. Converted widgets to Glimmer compone…nts
> 3. Moved theme setting descriptions to locale file
> 4. Switched jQuery animation to CSS transition

这是必要的，因为我们计划在明年内移除我们的 widget 系统。横幅的所有功能应保持不变，但如果您遇到任何新问题，请告知我们！

需要注意的一点是，由于它不再由小部件组成，因此您将无法执行类似以下操作来覆盖其功能：

> [@tshenry](#):
>
> 您或许可以这样做：
> 
> ```plaintext
> <script type="text/discourse-plugin" version="0.10.0">
> // Add the link to the heading
> api.reopenWidget("banner-box-widget", {
> html(attrs) {
> 
> ```

这种自定义一直有点不稳定（如果主题更改，它可能会破坏覆盖，进而破坏整个组件），因此这是我们在为 Discourse 开发扩展时正在逐步淘汰的一种模式。

---

<div class="post-metadata">

### Author: ![markersocial](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/markersocial/32/170136_2.png) [@markersocial](https://meta.discourse.org/u/markersocial)
#### Post date: [2023年九月27日 04:56 UTC](https://meta.discourse.org/t/versatile-banner/109133/337 "2023-09-27T04:56:43Z")

</div>

> [@awesomerobot](#):
>
> 横幅的所有功能应保持不变，但如果您遇到任何新问题，请告知我们！

感谢更新！只是提醒一下——在稳定版上，当列为空/隐藏时似乎出现了一个新问题。在此之前，如果我没记错的话，将“第一/第二/第三/第四列内容”字段设置为空会隐藏这些列。但在升级后，如果留空，列会占据空白空间，在移动设备上尤其明显。

---

<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: [2023年十月3日 13:43 UTC](https://meta.discourse.org/t/versatile-banner/109133/352 "2023-10-03T13:43:22Z")

</div>

说得好！我在新更新中隐藏了没有内容的容器：

> <https://github.com/discourse/discourse-versatile-banner/pull/21>
>
> This banner often gets used with empty column content, this will hide the contai…ning divs if they're empty (the empty divs would still occupy a little space otherwise)

---

<div class="post-metadata">

### Author: ![flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flash](https://meta.discourse.org/u/flash)
#### Post date: [2024年一月10日 23:59 UTC](https://meta.discourse.org/t/versatile-banner/109133/354 "2024-01-10T23:59:47Z")

</div>

您好，我在 Firefox 移动版上遇到了横幅问题。我使用了 3 列布局，前两列显示了所有内容，第三列被截断了。在三星 S23 Ultra 上，在 Brave 浏览器上查看没问题。在 Firefox 上，无论是登录还是退出状态，它都显示不正常。

我检查了 iPhone 14 Pro，Safari 浏览器显示正常。

---

<div class="post-metadata">

### Author: ![Kieran\_Berryman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kieran_berryman/32/347853_2.png) [@Kieran\_Berryman](https://meta.discourse.org/u/Kieran_Berryman)
#### Post date: [2024年一月23日 23:45 UTC](https://meta.discourse.org/t/versatile-banner/109133/355 "2024-01-23T23:45:31Z")

</div>

您好，

我想我在这篇帖子中没有看到我的问题，但如果已经提供了解决方案，我很抱歉。我想在我的社区中实现这个横幅，经过大量的自定义后，我发现这个组件似乎将主容器的右侧扩展到了正常范围之外。我将在下面提供一些截图来解释我的意思（横幅中的所有内容目前都处于默认设置）。

启用横幅后：

 ![Screenshot 2024-01-23 at 4.25.05 PM](https://global.discourse-cdn.com/meta/original/4X/7/c/a/7ca62480f06b9408319f6c2f0d6fe3699d4d1493.png)

“新主题”旁边的侧边超出了我的个人资料图片的范围。

* * *

但是，禁用主题组件后，一切看起来都很正常。

 ![Screenshot 2024-01-23 at 4.25.36 PM](https://global.discourse-cdn.com/meta/original/4X/3/2/0/320d99948bfcbe47a2d2144bde6f79d0f2273ff9.png)

正如您所见，右侧与我的个人资料图片对齐。

* * *

我正在使用其他主题组件，因此它们可能会干扰。我将在下面提供组件列表：

- Dark-Light Toggle
- DiscoTOC
- Discourse Clickable Topic
- Discourse Gifs
- Discourse Header Search
- Hamburger Theme Selector
- Custom Header Links
- Header Submenus
- Versatile Banner

有什么想法是什么原因吗？

谢谢

---

<div class="post-metadata">

### Author: ![barto\_95](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barto_95/32/199996_2.png) [@barto\_95](https://meta.discourse.org/u/barto_95)
#### Post date: [2024年一月24日 16:14 UTC](https://meta.discourse.org/t/versatile-banner/109133/356 "2024-01-24T16:14:50Z")

</div>

当我更改 cookie 名称中的文本时，横幅未在 discourse 应用中显示……

也许是个 bug？

---

<div class="post-metadata">

### Author: ![Kieran\_Berryman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kieran_berryman/32/347853_2.png) [@Kieran\_Berryman](https://meta.discourse.org/u/Kieran_Berryman)
#### Post date: [2024年二月9日 17:25 UTC](https://meta.discourse.org/t/versatile-banner/109133/357 "2024-02-09T17:25:10Z")

</div>

看起来这个主题组件具有仅在特定页面上显示的函数，我也想实现类似的功能。这个功能是如何实现的？

---

<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: [2024年二月23日 20:35 UTC](https://meta.discourse.org/t/versatile-banner/109133/358 "2024-02-23T20:35:55Z")

</div>

该组件在此处将设置与 `currentURL` 进行比较：

[https://github.com/discourse/discourse-versatile-banner/blob/main/javascripts/discourse/components/versatile-banner.js#L66-L85](https://github.com/discourse/discourse-versatile-banner/blob/main/javascripts/discourse/components/versatile-banner.js#L66-L85)

---

<div class="post-metadata">

### Author: ![stuwest](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stuwest/32/192400_2.png) [@stuwest](https://meta.discourse.org/u/stuwest)
#### Post date: [2024年五月20日 01:44 UTC](https://meta.discourse.org/t/versatile-banner/109133/360 "2024-05-20T01:44:44Z")

</div>

横幅是否仅在特定浏览器上显示？我们正在进行筹款活动，我希望每个人都能意识到这一点，但有几个人评论说他们根本没有看到任何东西。我尝试取消选中 `dismissible`（可关闭）和 `collapsible`（可折叠）设置，但都没有效果。

目前，如果我通过（我承认是旧版本的）Mac Safari 或（完全最新的）iPhone DiscourseHub 应用程序访问论坛，我看不到横幅。我在 iPhone Safari 和 Mac Firefox 上看到了它。

有什么建议吗？我显然对我的用户使用的是哪些浏览器控制有限，但我希望他们都能看到重要公告。

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2024年六月13日 08:19 UTC](https://meta.discourse.org/t/versatile-banner/109133/361 "2024-06-13T08:19:27Z")

</div>

帖子已拆分为新主题：[多功能横幅是否可以通过 API 更新？](https://meta.discourse.org/t/can-the-versatile-banner-be-updated-by-api/311889)

---

<div class="post-metadata">

### Author: ![Javier\_Carpinteyro\_Ponce](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/javier_carpinteyro_ponce/32/487055_2.png) [@Javier\_Carpinteyro\_Ponce](https://meta.discourse.org/u/Javier_Carpinteyro_Ponce)
#### Post date: [2025年二月6日 18:57 UTC](https://meta.discourse.org/t/versatile-banner/109133/363 "2025-02-06T18:57:55Z")

</div>

您好，

我是Discourse和Versatile Banners的新手，但我想知道是否可以修改我放在横幅列中的图标的尺寸？

非常感谢任何指导。

哈维尔

---

<div class="post-metadata">

### Author: ![Kleinanzeigen-Enhanced](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kleinanzeigen-enhanced/32/507378_2.png) [@Kleinanzeigen-Enhanced](https://meta.discourse.org/u/Kleinanzeigen-Enhanced)
#### Post date: [2025年六月13日 08:55 UTC](https://meta.discourse.org/t/versatile-banner/109133/364 "2025-06-13T08:55:46Z")

</div>

同样的问题，即使组件更少。整个页面都可以向右滚动。提前感谢修复 🙂  
更新：  
我正在使用 Air 主题。问题仍然存在，即使我禁用了所有其他组件。

 ![The image displays a screenshot of a web page with two boxes for content, one labeled 'Another simple box' and the other 'Yet another simple box', each containing placeholder text. A search icon and a button labeled 'My new button' are also visible on the page. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/a/1/a/a1a6eb85ca0bfe5b57f72fbada856b39d39840ca.jpeg)

已解决：我创建了自己的横幅 😃 和自定义组件。

---

<div class="post-metadata">

### Author: ![stephen34](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@stephen34](https://meta.discourse.org/u/stephen34)
#### Post date: [2025年八月18日 04:41 UTC](https://meta.discourse.org/t/versatile-banner/109133/365 "2025-08-18T04:41:52Z")

</div>

在哪里可以找到用于更改“Versatile Banner”展开/折叠切换的字体颜色的设置（托管计划）？

默认是灰色，但对于我们网站选择的背景图片来说很难看清。如果它由基础网站主题的颜色调色板决定，我需要编辑哪个组件（例如，Primary 500 等）。

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [2025年八月28日 00:23 UTC](https://meta.discourse.org/t/versatile-banner/109133/366 "2025-08-28T00:23:14Z")

</div>

没有该设置，但您可以在自己的主题中使用 CSS。以下是您需要定位的内容

```plaintext
.banner-box .button-container .close .d-button-label, .banner-box .button-container .toggle .d-button-label {
    font-size: 1em;
    color: #646464;
}

```

---

<div class="post-metadata">

### Author: ![philh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/philh/32/532740_2.png) [@philh](https://meta.discourse.org/u/philh)
#### Post date: [2025年十月6日 15:44 UTC](https://meta.discourse.org/t/versatile-banner/109133/367 "2025-10-06T15:44:43Z")

</div>

Versatile Banner 和 [Brand Header - #266 by pacharanero](https://meta.discourse.org/t/brand-header/77977/266) 之间可能存在兼容性问题。

将 Brand Header 设置为 display above-site-header，然后启用 Versatile Banner，Brand Header 就会移动到 header 下方。禁用其他组件，仅使用这两个组件，可以确认它们之间存在冲突。

启用 Versatile Banner 后

 ![Screenshot 2025-10-06 084050](https://global.discourse-cdn.com/meta/original/4X/7/6/1/761a0c24434027529afc2f3a78666f678a7a69ac.png)

 ![Screenshot 2025-10-06 084206](https://global.discourse-cdn.com/meta/original/4X/e/2/1/e214f8eb179c532bd24c9509170c3a8d060aecff.png)

---

<div class="post-metadata">

### Author: ![philh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/philh/32/532740_2.png) [@philh](https://meta.discourse.org/u/philh)
#### Post date: [2025年十月27日 22:22 UTC](https://meta.discourse.org/t/versatile-banner/109133/368 "2025-10-27T22:22:44Z")

</div>

此问题已由 @Juan_David_Martínez 在 [Plugin Conflict Between Brand Header and Versatile Banner - #5 by Juan\_David\_Martínez](https://meta.discourse.org/t/plugin-conflict-between-brand-header-and-versatile-banner/385344/5?u=philh) 修复。

请更新您的组件。

[上一頁](https://meta.discourse.org/t/versatile-banner/109133.md?page=4)

[下一頁](https://meta.discourse.org/t/versatile-banner/109133.md?page=6)