تخط إلى المحتوى
星罗
بحث
تغيير اللغة
رجوع

البحث

1 دقيقة قراءة تعديل على GitHub

يدمج Xingluo Flexsearch للبحث النصي الكامل من جانب العميل، مع فهارس حسب اللغة واستمرارية حالة View Transitions.

التفعيل

قم بالتكوين عبر features.search:

ts
features: { 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 يحافظ على حالة البحث عبر التنقل

تدفق البحث

  1. يكتب المستخدم في مربع البحث
  2. يطابق Flexsearch مع فهرس اللغة الحالية
  3. تُظهر قائمة النتائج المقالات المطابقة (العنوان، تاريخي النشر/التحديث، شارة التصنيف، الوسوم، مقتطف المحتوى المطابق)
  4. يكتب 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 يتجنب إعادة تهيئة واجهة البحث عند التنقل

مقالات ذات صلة

  • النشر

    2 دقيقة قراءة

    دليل نشر Xingluo ويغطي منصات الاستضافة الثابتة (Netlify/Vercel/GitHub Pages) والاستضافة الذاتية Nginx و Docker ومتغيرات البيئة.

  • SEO

    1 دقيقة قراءة

    دليل تحسين محركات البحث SEO في Xingluo ويغطي Open Graph وبطاقة Twitter و canonical والبيانات المنظمة JSON-LD و RSS وخريطة الموقع.