catche search widget
v0.1.1
Aka меню ctrl/cmd-k или палитра команд
Catche предоставляет низкий код, чтобы добавить мгновенный поиск на ваш сайт в два шага!
<head>Этот репо содержит код с открытым исходным кодом для виджета на стороне клиента.
Для тех, кто заинтересован в тематике своего виджета или использовании самостоятельных данных, ознакомьтесь с разделом учебных пособий ниже.
Взносы приветствуются!
Этот виджет построен с VUE и TypeScript и использует Taillist для стиля.
Catche использует Supabase для нашего хостинга базы данных, но вам не нужно это делать, если вы собираетесь самостоятельно управлять своими данными - вам просто нужен файл JSON!
Мы используем MiniSearch для поиска, в то время как Fast-Fuzzy используется для выделения.
Примечание - файлы index.html в учебных папках не могут быть открыты как есть из -за нескольких требований в сценариях. Вместо этого запустите локальный сервер через узел или Python.
Смотрите учебники/тему для соответствующих файлов.
Вы можете тему виджета с помощью атрибута catche-css в элементе <script> , который должен пройти путь к файлу .css.
< script catche-css =" PATH/TO/CSS " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >См. Учебные пособия/Theme/Dark.css для примера соответствующих атрибутов CSS.
См. Учебные пособия/Selfhost для соответствующих файлов.
Вы можете использовать свои собственные данные, сохраненные в файле .json, через атрибут catche-data в элементе <script> , который должен перейти по пути к файлу .json.
< script catche-data =" PATH/TO/JSON " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >Файл .json должен содержать массив объектов, где каждый объект представляет веб -страницу со следующими атрибутами:
id - уникальная строкаurl - URL -адрес веб -страницыtitle - название веб -страницыtext - текст веб -страницы Виджет будет искать в title и text атрибутах.
См. Учебные пособия/selfhost/my-data.json для примера формата данных.
