高级搜索横幅

[Discourse]

Note

We are planning to deprecate support for this theme component soon and advise you to use the welcome banner feature instead.

	Summary	Advanced Search Banner puts a search bar along with optional headline and subhead text in a banner above the main topic list navigation.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-search-banner
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Bug, UX, and Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

By default, this banner appears on all top-level topic pages (latest/new/unread/top/categories… anything in the top menu site setting) but it can also be set to only display on a community’s homepage.

Settings

Name	Description
show on	This determines which pages the banner appears
plugin outlet	Where on the page the banner will appear
background image light	Background image for the banner on light color palettes
background image dark	Background image for the banner on dark color palettes
tile background image	Repeat the background image
show for	Who can see the Search Banner (logged in, logged out, or both)
special style	Optional variations that change the appearance of the search banner

Translation	Default
search_banner.headline	Welcome to our community
search_banner.subhead	We’re happy to have you here. If you need help, please search before you post.
search_banner.search_button_text

To omit one from display, leave the field blank.

Custom styling

The HTML element gets a class named .display-search-banner wherever this banner appears, and the banner itself is wrapped with the .custom-search-banner class, so with some CSS you should be able to customize the appearance of this banner however you see fit.

Future enhancements

• Add an option to enable the banner in specific categories

Credits

This very heavily borrows from @angus’ Pavilion Header Search Theme Component

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @Moin 2025-11-10T16:26:58Z

Check document

Perform check on document:

[awesomerobot (Kris)]

I’ve updated the theme component to add some new settings:

show on — this determines where the banner appears and has the options

• top_menu (latest/categories/top/new/unread)
• homepage
• all (all pages except the default search page and admin pages)

show for — this determines who sees the banner

• everyone
• logged_in
• logged_out

[awesomerobot (Kris)]

我刚刚做了一个小更新，为该组件添加了一个可选样式，它提供了一个没有标题的大型搜索栏：

可以通过新的“特殊样式”设置启用此功能。这只会启用一些额外的 CSS。

我将来也可能会在此处添加更多选项！

[AndyBr (Andy)]

如何更改此附加组件中“欢迎”文本的颜色？

[Arkshine]

没有该设置。但是，您可以使用一些 CSS 添加它：

将以下内容添加到您的主题或新的主题组件中，并根据需要进行更改。

.search-banner > .custom-search-banner  {
    /* title */
    h1 {
        color: #286989;
    }
    
    /* description */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

非常感谢！

[RBoy]

是否有办法隐藏搜索图标（使用 CSS 或其他方式）？我遇到了一个问题，即在与此组件结合使用时，搜索图标会出现重复：Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

.search-input .search-icon:first-child {
  display: none;
}

应该只显示一个搜索图标。不过，我要说的是，同时使用搜索横幅和标题搜索会带来一些糟糕的用户体验副作用。

我建议只使用其中一个。

[RBoy]

谢谢！非常有帮助

@isaac

不过，我要说的是，同时使用搜索横幅和标题搜索会带来一些糟糕的用户体验副作用。

您能详细说明一下，是什么用户体验副作用吗？

[isaac (Isaac Janzen)]

上面链接的视频展示了一些问题

• 重叠的搜索下拉菜单
• 搜索下拉菜单奇怪的打开和关闭状态
• 在一个搜索输入框中，搜索图标是高级搜索的链接，而在另一个搜索输入框中则不是
• 等等

[RBoy]

好的。只要它们不在同一页面上，应该就没问题。

[مباركمبارك (مبارك)]

有人能帮帮我吗？我在 Discourse 上安装了这个主题，但图片右侧被裁剪了一部分，要让图片完全显示，我必须将站点的字体设置为“较小”。我有两个不同的 Discourse 安装，其中一个图片正常显示，另一个图片为什么被裁剪了？

[awesomerobot (Kris)]

可以包含截图吗？这将使问题更容易理解。

[ecki (Bernd)]

我在不同的浏览器/模式下显示图像的不同部分遇到了同样的问题。我通过将其做得非常宽来解决这个问题，这样右侧只在某些情况下显示。但对于对称图像来说，这并不容易。我猜想一些 CSS（无需搜索 thome-component-overwrite）会有帮助。

[مباركمبارك (مبارك)]

我设法解决了一部分问题，我禁用了其他主题中的主题组件，只保留了一个，令人难以置信的是，图像的字体大小为“正常”，只是因为手机的图像只显示了一侧，有什么办法可以让它在我的手机上完全显示吗？

[Surbhi_Pal1 (Surbhi)]

您好，

有没有办法删除搜索横幅和标题之间的间距？

[Arkshine]

您可以使用此 CSS 在新的主题组件中：

.custom-search-banner-wrap {
    margin-top: 0;
}

[Surbhi_Pal1 (Surbhi)]

完美运行，谢谢！

[PT_LB (Paul)]

Discourse 似乎也有我社区遇到的同样问题，覆盖层需要一些时间才能覆盖搜索底层（Discover）下的内容：

在我社区这个问题更明显：

不知道有没有人遇到过解决方法，可能需要延迟显示覆盖层？这可能会导致糟糕的用户体验。