이 테마 컴포넌트는 사이트가 외부 검색을 지원하려는 경우에만 필요합니다. 그렇지 않으면, 사이트 검색을 헤더로 이동시키기 위해 검색 경험 설정을 사이트 헤더의 검색 필드로 업데이트할 수 있습니다.
이름
설명
추가 검색 아이콘
검색 바에 추가 아이콘을 추가합니다(예: 외부 검색 트리거).
svg 아이콘
extra_search_icons를 사용하여 검색 바에 추가 아이콘을 표시합니다.
이 설정은 다음 매개변수를 지원합니다:
prefix: 해당 아이콘을 클릭할 때 검색 URL에 추가되는 접두사icon: 표시할 아이콘, Font Awesome 세트에서 선택(또한 svg icons 설정에 추가해야 할 수 있음)target: 기본적으로 링크를 새 탭/창에서 열려면 "_blank"으로 설정showInCategories: 주어진 아이콘을 독점적으로 표시할 카테고리 ID(기본적으로 아이콘은 모든 곳에 표시됨)excludeFromCategories: 주어진 아이콘을 표시하지 않을 카테고리 ID
검색 패널 자바스크립트 코드를 제공해 주신 @Johani님께 감사드립니다
우리가 호스팅하고 있나요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.
37개의 좋아요
컴포넌트에 업데이트를 적용했습니다. 이제 모바일에서 기본 검색 아이콘이 표시됩니다:
committed 03:02PM - 25 Jul 22 UTC
6개의 좋아요
alanost
7월 28, 2022, 3:40오후
20
안녕하세요, 먼저 정말 좋은 테마 컴포넌트네요. 저에게는 아주 잘 작동합니다.
4개의 좋아요
alanost
8월 23, 2022, 9:37오후
21
누군가 이 버그를 수정해 주시면 정말 감사하겠습니다. 많은 사람에게 영향을 주지는 않는다는 걸 알지만, 이 테마 컴포넌트를 정말 좋아해서 이 문제로 인해 사용을 못 하고 있어요
1개의 좋아요
로그인이 필요한 경우, 로그아웃된 사용자에게 검색창을 숨기도록 업데이트를 완료했습니다.
main ← login-required
merged 01:12AM - 24 Aug 22 UTC
This prevents the broken search bar from appearing on the `login_required` scree… n
3개의 좋아요
또한 입력 필드에 헤더 색상(헤더 기본색과 헤더 배경색)을 사용하는 업데이트도 추가했습니다
main ← color-updates
merged 12:45PM - 24 Aug 22 UTC
We weren't using the header color variables here, so they would clash in some pa… lettes.
Also, the 🔎 button has no function in this context, so I disabled pointer events and improved spacing a little.
4개의 좋아요
manuel
10월 10, 2022, 9:05오후
24
이 컴포넌트는 새로운 헤더-사이드바 토글을 비활성화하는 것으로 보입니다.
4개의 좋아요
keegan
10월 12, 2022, 4:46오후
26
@manuel ! 이 문제를 찾아줘서 감사합니다.
방금 수정을 배포했습니다
committed 04:45PM - 12 Oct 22 UTC
6개의 좋아요
manuel
10월 27, 2022, 6:21오후
27
또 다른 작은 버그를 발견했습니다. 기본 단축키인 "/"를 사용하면 검색 입력 필드에 포커스를 맞출 수 있습니다. 하지만 검색 결과가 표시되는 드롭다운이 열리지 않습니다. 드롭다운이 열리려면 입력 필드를 직접 마우스로 클릭해야 하므로, 이 키보드 단축키는 사실상 쓸모없습니다.
1개의 좋아요
manuel
12월 20, 2022, 8:52오후
28
이 컴포넌트를 사용하면 헤더 사이드바 토글이 다시 비활성화됩니다. 사이드바 설정이 변경되었기 때문인 것 같습니다.
3개의 좋아요
ozkn
12월 31, 2022, 10:17오후
30
@jordan.vidrine 안녕하세요, 이 컴포넌트를 모바일 헤더의 기본 요소로 사용할 수 있나요?
1개의 좋아요
출시 전에 이 부분을 고려해 보았지만, 모바일 헤더에 이 기능이 제대로 작동할 만큼 충분한 공간이 없습니다.
4개의 좋아요
bquast
3월 2, 2023, 1:26오후
32
훌륭한 컴포넌트를 만들어 주셔서 감사합니다.
검색창의 테두리 색상을 커스터마이즈할 수 있는 방법이 있을까요?
제 화면에서는 약간 회색으로 보인데, #FFFFFF 흰색으로 변경하고 싶습니다.
2개의 좋아요
만약 사용자 정의 CSS를 추가하기 위해 로컬 테마 컴포넌트를 만든 적이 있다면, 해당 컴포넌트에 CSS를 추가하여 이 색상을 커스터마이징할 수 있습니다.
아직 이 작업을 수행하지 않았다면, /admin/customize/themes로 이동한 뒤 components 를 클릭하고 install 를 선택하세요.
모달이 표시되면 Create New를 선택하고 컴포넌트 이름을 지정합니다. 그러면 해당 컴포넌트의 새 페이지로 이동하며, 적용할 테마를 선택할 수 있습니다. 설치된 테마에 적용하는 것이 좋습니다.
CSS를 추가하려면 Edit CSS/HTML 를 클릭하고 common 페이지에 CSS를 추가한 뒤 저장하세요.
아래와 같은 코드를 추가하면 됩니다:
.search-menu .search-input {
border: 1px solid #FFFFFF
}
2개의 좋아요
bquast
3월 6, 2023, 5:04오전
34
@jordan.vidrine님 , 자세한 설명 감사합니다.
최근 이 포럼의 다른 분들의 도움으로 커스텀 CSS를 추가하는 방법을 이미 배웠습니다.
3개의 좋아요
Canapin
3월 6, 2023, 10:53오전
35
4개의 좋아요
그 줄을 제거하고 미디어 쿼리를 사용해 768px까지 비활성화하면 무사히 될까요?
태블릿에서는 버튼(거기에 채팅과 영상이 있으니까)을 제거하는 쪽을 선호하는데, 검색창은 꽤 잘 들어맞는 것 같아요.
1개의 좋아요
volanar
7월 13, 2023, 4:25오후
37
모두 괜찮지만, 모바일 버전에서는 표준 검색으로 전환해야 합니다. 현재 모습이 매우 보기 나쁘기 때문이에요.
1개의 좋아요
참고
