catche search widget
v0.1.1
일명 CTRL/CMD-K 메뉴 또는 명령 팔레트
Catche는 두 단계로 웹 사이트에 인스턴트 검색을 추가하는 낮은 코드 방법을 제공합니다!
<head> 에 추가하십시오이 repo에는 클라이언트 측 위젯의 오픈 소스 코드가 포함되어 있습니다.
위젯 테마 또는 자체 주최 데이터 사용에 관심이있는 사람들은 아래 튜토리얼 섹션을 확인하십시오.
기부금을 환영합니다!
이 위젯은 VUE 및 TypeScript로 제작되었으며 스타일링을 위해 Tailwind를 사용합니다.
Catche는 데이터베이스 호스팅에 Supabase를 사용하지만 데이터를 자체 주최하려는 경우 JSON 파일 만 있으면됩니다.
우리는 검색을 위해 미니 검색을 사용하지만 빠른 연기는 강조 표시에 사용됩니다.
참고 - 튜토리얼 폴더의 index.html 파일은 스크립트의 몇 가지 요구 사항으로 인해 AS -IS를 열 수 없습니다. 대신 노드 또는 파이썬을 통해 로컬 서버를 실행하십시오.
관련 파일은 튜토리얼/테마를 참조하십시오.
<css 파일의 경로를 가져와야하는 <script> 요소의 catche-css 속성을 통해 위젯을 테마로 할 수 있습니다.
< script catche-css =" PATH/TO/CSS " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >관련 CSS 속성의 예는 튜토리얼/테마/dark.css를 참조하십시오.
관련 파일은 튜토리얼/selfhost를 참조하십시오.
<script> 파일의 catche-data 속성을 통해 .json 파일로 저장된 자체 데이터를 사용할 수 있으며.
< script catche-data =" PATH/TO/JSON " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >.json 파일에는 객체 배열이 포함되어 있어야하며 각 객체는 다음 속성의 웹 페이지를 나타냅니다.
id 고유 한 문자열url 웹 페이지의 URLtitle - 웹 페이지 제목text - 웹 페이지의 텍스트 위젯은 title 과 text 속성을 통해 검색합니다.
데이터 형식의 예는 튜토리얼/selfhost/my-data.json을 참조하십시오.
