catche search widget
v0.1.1
También conocido como un menú CTRL/CMD-K o una paleta de comandos
¡Catche proporciona una forma de bajo código de agregar una búsqueda instantánea a su sitio web en dos pasos!
<head>Este repositorio contiene el código de código abierto para el widget del lado del cliente.
Para aquellos que estén interesados en temas de su widget o en el uso de datos autohospedados, consulte la sección Tutorial a continuación.
¡Contribuciones bienvenidas!
Este widget está construido con Vue y TypeScript y usa Vailín para el estilo.
Catche usa Supabase para nuestro alojamiento de base de datos, pero no necesita hacerlo si tiene la intención de autohacer sus datos, ¡solo necesita un archivo JSON!
Usamos MiniSearch para buscar, mientras que Fast-Fuzzy se usa para resaltar.
Nota: los archivos index.html en las carpetas de tutoriales no se pueden abrir como está, debido a varios requisitos en los scripts. En su lugar, ejecute un servidor local a través del nodo o python.
Vea tutoriales/tema para archivos relevantes.
Puede temas del widget a través del atributo catche-css en el elemento <script> , que debería tomar la ruta al archivo .css.
< script catche-css =" PATH/TO/CSS " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >Consulte Tutoriales/Temo/Dark.CSS para obtener un ejemplo de los atributos CSS relevantes.
Ver tutoriales/autohost para archivos relevantes.
Puede usar sus propios datos guardados en un archivo .json, a través del atributo catche-data en el elemento <script> , que debería tomar la ruta al archivo .json.
< script catche-data =" PATH/TO/JSON " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >El archivo .json debe contener una matriz de objetos, donde cada objeto representa una página web con los siguientes atributos:
id - Cadena únicaurl - URL de la página webtitle - Título de la página webtext - Texto de la página web El widget buscará a través del title y los atributos text .
Consulte Tutoriales/Selfost/My-Data.json para un ejemplo del formato de datos.
