البحث
يدمج Xingluo Flexsearch للبحث النصي الكامل من جانب العميل، مع فهارس حسب اللغة واستمرارية حالة View Transitions.
التفعيل
قم بالتكوين عبر features.search:
tsfeatures: { search: "flexsearch", // "flexsearch" | false }
عند تعيينه إلى false، تعيد صفحة البحث Astro.rewrite إلى 404 ولا يتم إنشاء واجهة بحث.
آلية العمل
إنشاء الفهرس
خطوة البناء الثالثة، node scripts/generateSearchIndex.mjs، تمسح ملفات HTML في دليل dist/:
- تحلل محتوى الصفحات وتستخرج نصوص المقالات
- الفهارس تُقسّم تلقائيًا حسب اللغة (
zh-cnوenلكل منهما فهرسه الخاص) - الفهارس تُخرج إلى
dist/search/
نطاق الفهرس
يقوم سكريبت البناء بتحليل محتوى <main> في صفحات تفاصيل المقالات، لذلك فقط نصوص المقالات تُفهرس. الصفحات الأخرى (الرئيسية، القوائم، الأرشيف، إلخ.) لا تدخل فهرس البحث.
واجهة البحث
src/components/pageViews/SearchView.astro تنفذ صفحة البحث:
- استخدام فهرس Flexsearch من جانب العميل لمطابقة البحث في المتصفح
- تحديد موقع أصول الفهرس عبر
getAssetPath("search/") - استخدام متغيرات سمة shadcn (
--background،--foreground،--primary، إلخ.) لتصميم مربع البحث وقائمة النتائج transition:persistيحافظ على حالة البحث عبر التنقل
تدفق البحث
- يكتب المستخدم في مربع البحث
- يطابق Flexsearch مع فهرس اللغة الحالية
- تُظهر قائمة النتائج المقالات المطابقة (العنوان، تاريخي النشر/التحديث، شارة التصنيف، الوسوم، مقتطف المحتوى المطابق)
- يكتب
processTermعنوان URL لصفحة البحث مع معاملات الاستعلام في sessionStorage، ليتمكن زر الرجوع من الاستعادة
التنقل الرجعي للمصدر
آلية التنقل الرجعي بين صفحة البحث وصفحات المقالات:
- يقوم مكون
Main.astroبكتابة عنوان URL لصفحة المصدر فيbackUrlمن sessionStorage - يفضل
BackButton.astroفي صفحة المقال القفز عائداً إلىbackUrlفي sessionStorage، أو إلى الصفحة الرئيسية إذا كان غائباً - يكتب
processTermفي صفحة البحث عنوان URL مع معاملات الاستعلام، لاستعادة حالة البحث عند العودة من مقال
البحث متعدد اللغات
يقسم Flexsearch الفهارس حسب لغة الصفحة:
- صفحات
zh-cn(الجذر) → فهرس صيني - صفحات
en(بادئة/en/) → فهرس إنجليزي
تتطابق وظيفة البحث تلقائياً مع فهرس لغة الصفحة الحالية: الصينية في الصفحات الصينية، الإنجليزية في الصفحات الإنجليزية.
تكيف السمة
واجهة بحث Flexsearch تستخدم متغيرات سمة shadcn، محددة في SearchView.astro لتصميم مربع البحث وقائمة النتائج:
css:root { --search-primary: var(--primary); --search-text: var(--foreground); --search-background: var(--background); /* ... */ }
الوضع الداكن يتحول تلقائياً عبر محدد .dark، بما يتوافق مع سمة الموقع.
الأداء
- فهارس Flexsearch هي ملفات ثابتة؛ يتم البحث من جانب العميل دون طلبات خادم
- يتم تحميل الفهارس حسب الطلب (تُنزّل أجزاء الفهرس فقط عند البحث)
transition:persistيتجنب إعادة تهيئة واجهة البحث عند التنقل