catche search widget
v0.1.1
ويعرف أيضًا باسم قائمة Ctrl/CMD-K أو لوحة أوامر
يوفر Catche طريقة منخفضة الرمز لإضافة بحث فوري إلى موقع الويب الخاص بك في خطوتين!
<head>يحتوي هذا الريبو على رمز المصدر المفتوح للعناية من جانب العميل.
بالنسبة لأولئك الذين يهتمون بالتعويض عن عنصر واجهة المستخدم الخاصة بهم أو باستخدام البيانات المستضافة ذاتيا ، تحقق من قسم الدروس أدناه.
الترحيب بالمساهمات!
تم تصميم هذه القطعة باستخدام Vue و TypeScript وتستخدم الرياح Tailwind للتصميم.
يستخدم 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 >انظر الدروس/السمة/Dark.css للحصول على مثال على سمات CSS ذات الصلة.
انظر الدروس/المضيف الذاتي للملفات ذات الصلة.
يمكنك استخدام البيانات الخاصة بك المحفوظة في ملف .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 للحصول على مثال على تنسيق البيانات.
