高级头部搜索

主题组件
,
1
:discourse2: Summary Advanced Header Search removes the search icon from the header menu and creates a search bar that is placed in the middle of the header area.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-header-search
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

:grey_exclamation:Note

This theme component is only required when sites want to support external searches. Otherwise, you may update the Search experience setting to Search field in site header to move site search to the header.

Features

image
image2120×1900 464 KB

Settings

Name Description
extra search icons Add extra icons to the search bar (for example to trigger an external search).
svg icons

Optionally show external search icons

Use the extra_search_icons to show additional icons in the search bar.

This setting supports the following params:

  • prefix: the prefix to the search URL when clicking the respective icon
  • icon: icon to show, from the Font Awesome set (may need to be added to the svg icons setting as well)
  • target: optionally set to “_blank” to open the link in its own tab/window by default
  • showInCategories: category IDs where the given icon should be shown exclusively (by default, icon is shown everywhere)
  • excludeFromCategories: category IDs where the given icon should not be shown

Credits

Thanks to @Johani for the search panel javascript code :+1:


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

Last edited by @lindsey 2025-02-28T14:39:07Z

Check documentPerform check on document:
37 个赞
17

我刚刚更新了该组件，这将使默认搜索图标显示在移动设备上：

6 个赞
18

现在一切正常了。

:kissing_heart: @JammyDodger
:kissing_heart: @awesomerobot

谢谢。

5 个赞
20

您好，首先，这个主题组件非常好，对我来说效果很好。
我有一个小小的改进建议。在需要登录的论坛中不应该显示搜索栏，因为它反正也无法使用。

Bildschirmfoto 2022-07-28 um 17.36.22
Bildschirmfoto 2022-07-28 um 17.36.222232×1698 166 KB

4 个赞
21

如果有人能修复这个错误，我将非常高兴。我知道它影响的人不多，但我喜欢这个主题组件，这个问题阻止了我使用它 :cry:

1 个赞
22

我刚刚进行了一项更新，该更新将在需要登录时向未登录用户隐藏搜索栏

3 个赞
23

我还添加了一个使用标题颜色（标题主色和标题背景色）的输入更新

4 个赞
24

该组件似乎禁用了新的 header-sidebar-toggle。

4 个赞
26

感谢 @manuel 发现此问题！

我刚刚发布了一个修复程序 :tada:

6 个赞
27

我遇到的另一个小故障是：我可以使用默认的“/”快捷键进入搜索输入字段。但它不会展开显示结果的下拉菜单。我需要手动单击输入字段才能执行此操作，这使得键盘快捷键有点无用。

1 个赞
28

使用该组件将再次禁用 header-sidebar-toggle。我猜是因为侧边栏的设置已更改。

2 个赞
29

此问题应通过最新的拉取请求 FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub 得到修复

3 个赞
30

@jordan.vidrine 你好，我可以在移动端标题中使用此组件作为默认组件吗？

1 个赞
31

我发布之前曾考虑过这一点，但移动端标题的空间不足以使其正常工作。

4 个赞
32

感谢您提供的出色组件。

有没有办法自定义搜索框边框的颜色？

Screenshot from 2023-03-02 10-13-59

对我来说，它是灰色的，我希望它是 #FFFFFF 白色

2 个赞
33

您可以自定义此颜色，方法是将一些 CSS 添加到本地主题组件中，如果您已经创建了一个用于添加自定义 CSS 的组件。

如果您尚未执行此操作，请访问 /admin/customize/themes 并单击 components，然后单击 install。

当弹出模态框时，选择 Create New，然后为您的组件命名。您将被带到组件的新页面，您可以在其中选择要应用它的主题。您需要将其应用于已安装的主题。

要添加 CSS，请单击 Edit CSS/HTML 并将 CSS 添加到 common 页面并保存。

您需要执行类似以下操作：

.search-menu .search-input {
    border: 1px solid #FFFFFF
}
2 个赞
34

感谢 @jordan.vidrine 提供的详细说明。

我最近已经学会了如何在论坛上从其他好心人的帮助下添加自定义 CSS。

3 个赞
35

这可能对进一步的修改有所帮助 :slight_smile:
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
它解释了如何找到要用 CSS 目标定位的元素。

4 个赞
36

我可以删除那一行，并使用媒体查询将其禁用直到 768px 而不破坏任何东西吗？ :slight_smile:

我想在平板电脑上删除该按钮（因为我们有聊天和视频在那里），并且我看到搜索框非常合适。

1 个赞
37

一切都很好，但在移动版本中，您需要切换到标准搜索，因为它看起来很糟糕
image
vs
image

1 个赞