고급 헤더 검색

커스터마이징 테마 컴포넌트
,
1
:discourse2: 요약 Advanced Header Search는 헤더 메뉴에서 검색 아이콘을 제거하고, 헤더 영역 중앙에 검색 바를 배치합니다.
:eyeglasses: 미리보기 Discourse Theme Creator에서 미리보기
:hammer_and_wrench: 저장소 링크 https://github.com/discourse/discourse-header-search
:open_book: Discourse 테마를 처음 사용하시나요? Discourse 테마 사용 입문가 가이드

이 테마 컴포넌트 설치

:white_exclamation_mark:참고

이 테마 컴포넌트는 사이트가 외부 검색을 지원하려는 경우에만 필요합니다. 그렇지 않으면, 사이트 검색을 헤더로 이동시키기 위해 검색 경험 설정을 사이트 헤더의 검색 필드로 업데이트할 수 있습니다.

기능

image
image2120×1900 464 KB

설정

이름 설명
추가 검색 아이콘 검색 바에 추가 아이콘을 추가합니다(예: 외부 검색 트리거).
svg 아이콘

선택적으로 외부 검색 아이콘 표시

extra_search_icons를 사용하여 검색 바에 추가 아이콘을 표시합니다.

이 설정은 다음 매개변수를 지원합니다:

  • prefix: 해당 아이콘을 클릭할 때 검색 URL에 추가되는 접두사
  • icon: 표시할 아이콘, Font Awesome 세트에서 선택(또한 svg icons 설정에 추가해야 할 수 있음)
  • target: 기본적으로 링크를 새 탭/창에서 열려면 "_blank"으로 설정
  • showInCategories: 주어진 아이콘을 독점적으로 표시할 카테고리 ID(기본적으로 아이콘은 모든 곳에 표시됨)
  • excludeFromCategories: 주어진 아이콘을 표시하지 않을 카테고리 ID

크레딧

검색 패널 자바스크립트 코드를 제공해 주신 @Johani님께 감사드립니다 :+1:


:discourse2: 우리가 호스팅하고 있나요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.

37개의 좋아요
Edit search header theme css
Top Search bar fully open
Search Bar pops up when adding new topic or replying
Header search in custom header
Discourse has slowly been solving a fatigue I didn't realize I had
Fonction recherche dans certaines catégories
Pavilion Header Search Theme Component
🌐 www theme
Search section like on Reddit?
Fully Theme
Looking for a freelancer to implement a custom Discourse theme (based on an existing mockup)
Separate notifications and account options
Customizing your site with existing theme components
Pavilion Header Search Theme Component
Insert search in custom header
Improvements i want for my discourse for making it less overwhelming/noisy for newcomers
Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji
Pavilion Header Search Theme Component
Why is the Sidebar Collapse missing on my site?
Pavilion Header Search Theme Component
Where to find search bar in our settings?
17

I’ve just made an update to the component, this will make the default search icon appear on mobile:

https://github.com/discourse/discourse-header-search/commit/fb0969b04e564805ad2832bfa70e5ecdcb62daef

6개의 좋아요
18

This works fine now .

:kissing_heart: @JammyDodger

:kissing_heart: @awesomerobot

Thanks.

5개의 좋아요
20

Hello, first of all really good theme component. Works very well for me.
I have a small suggestion for improvement. The search bar should certainly not be displayed in a login-required forum, since it can not be used anyway.

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

4개의 좋아요
21

I would be very happy if someone can fix this bug. I know it doesn’t affect many, but I love this theme component and this problem keeps me from using it :cry:

1개의 좋아요
22

I’ve just made an update that will hide the search bar from logged out users when login is required

https://github.com/discourse/discourse-header-search/pull/8

3개의 좋아요
23

I’ve also added an update that uses the header colors (header primary and header background) for the input

https://github.com/discourse/discourse-header-search/pull/9

4개의 좋아요
24

The component seems to disable the new header-sidebar-toggle.

4개의 좋아요
26

Thanks for identifying this @manuel!

I’ve just pushed out a fix :tada:
https://github.com/discourse/discourse-header-search/commit/637b21e351bca7c134ef1f58b3d59e87fef93f34

6개의 좋아요
27

Another small glitch I came across: I can use the default “/” shortcut to enter the search input field. But it won’t expand the drop-down showing results. I’d need to click in the input field manually for that to happen which makes the keyboard shortcut kind of useless.

1개의 좋아요
28

Using the component disables the header-sidebar-toggle again. I guess it’s because the settings for the sidebar changed.

3개의 좋아요
29

This should be fixed with this latest PR https://github.com/discourse/discourse-header-search/pull/12

3개의 좋아요
30

@jordan.vidrine Hi, can i use this component as default in mobile header

1개의 좋아요
31

I had considered this before releasing, but there isn’t enough room in the mobile header for this to work properly.

4개의 좋아요
32

Thank you for the great component.

Is there a way to customize the color of the border of the search box?

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

For me it is kind of grey, I’d love for it to be #FFFFFF white

2개의 좋아요
33

You can customize this color by adding some css to a local theme-component if you have one you’ve created for adding custom css.

If you havent done this, visit /admin/customize/themes and click on components, then install.

When the modal pops up, select to Create New, then name your component. You will be taken to the component’s new page where you can select the theme to apply it to. You will want to apply it to the installed theme.

To add the css, click on Edit CSS/HTML and add the css to the common page and save.

You will want to do something like this:

.search-menu .search-input {
    border: 1px solid #FFFFFF
}
2개의 좋아요
34

Thank you @jordan.vidrine for the detailed instructions.

I had recently already learned with help from other good people on this forum to add custom CSS.

3개의 좋아요
35

This might be of some help for further modifications :slight_smile:
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
It explains how to find which element to target with CSS.

4개의 좋아요
36

Can I remove that line and use media queries to disable it until 768px without breaking everything? :slight_smile:

I like to remove the button (because we have chats and video there) on tablet and I see the search box fit’s really OK.

1개의 좋아요
37

Everything is fine, but in the mobile version you need to switch to the standard search, because it looks terrible
image
vs
image

1개의 좋아요