catche search widget
v0.1.1
AKA ein Strg/CMD-K-Menü oder eine Befehlspalette
Catche bietet eine Möglichkeit mit niedrigem Code, um Ihrer Website in zwei Schritten eine sofortige Suche hinzuzufügen!
<head> Ihrer Website hinzuDieses Repo enthält den Open-Source-Code für das clientseitige Widget.
Für diejenigen, die daran interessiert sind, ihr Widget zu thematisieren oder selbst gehostete Daten zu verwenden, lesen Sie den Abschnitt Tutorials unten.
Beiträge willkommen!
Dieses Widget ist mit Vue und TypeScript erstellt und verwendet Rückenwind zum Styling.
Catche verwendet Supabase für unser Datenbank -Hosting, aber Sie müssen dies nicht tun, wenn Sie Ihre Daten selbst veranstalten möchten - Sie benötigen nur eine JSON -Datei!
Wir verwenden MiniSearch zum Suchen, während Fast-Fuzzy zum Hervorheben verwendet wird.
HINWEIS - Die Dateien index.html in den Tutorial -Ordnern können aufgrund mehrerer Anforderungen in den Skripten nicht geöffnet werden. Führen Sie stattdessen einen lokalen Server über Knoten oder Python aus.
Siehe Tutorials/Thema für relevante Dateien.
Sie können das Widget über das catche-css Attribut im <script> -Element thematisieren, das den Pfad zur .css-Datei übernehmen sollte.
< script catche-css =" PATH/TO/CSS " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >Ein Beispiel für die relevanten CSS -Attribute finden Sie unter Tutorials/Thema/dunkel.css.
Siehe Tutorials/Selfhost für relevante Dateien.
Sie können Ihre eigenen Daten verwenden, die in einer .json-Datei über das catche-data -Attribut im <script> -Element gespeichert sind, das den Pfad zur .json-Datei übernehmen sollte.
< script catche-data =" PATH/TO/JSON " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >Die .json -Datei sollte ein Array von Objekten enthalten, wobei jedes Objekt eine Webseite mit den folgenden Attributen darstellt:
id - eindeutige Zeichenfolgeurl - URL der Webseitetitle - Titel der Webseitetext - Text der Webseite Das Widget sucht die title und text durch.
Ein Beispiel für das Datenformat finden Sie unter Tutorials/Selfhost/my-data.json.
