ما هو القاموس بدون محرك بحث أو أم خاصية البحث!؟

أثناء تنفيذ القاموس الأساسي، قمت بإنشاء نماذج البحث الثابتة هذه (أحدها على الصفحة الرئيسية والآخر على شريط التنقل المستخدم في تخطيط الكلمات) استعدادًا لهذه الميزة المحددة.

كنت بحاجة فقط إلى البدء من هناك وتشغيله، عمل سهل - إذا كان هذا صحيحًا فقط.

شيء من الماضي

من المهم أن أكرر أن خطتي الأولية كانت بناء jargons.dev مع Nextra كما اعترفت في الالتزام الأولي بما يلي:

...Nextra (كان هذا في الواقع فارسي الذي يرتدي درعًا لامعًا، وكنت أتطلع إلى البناء باستخدام Nextra).

أنا معجب بـ React ⚛️، كبير على Next.js؛ Nextra هو إطار ويب يركز على المحتوى ومبني على Next.js. لذا أعتقد أنه يمكنك أن تفهم لماذا بدا Nextra وكأنه ذلك الفارس. أثناء استكشافي الأولي لـ Nextra، برزت إحدى الميزات بالنسبة لي؛ البحث عن النص الكامل - لعابني هذا (يجب أن أعترف).

تم تشغيل الميزة بواسطة flexsearch - مكتبة بحث عن النص الكامل بدون عمق؛ أوه يا فتى، أنا من أشد المعجبين بالوزن الخفيف والتبعيات المنخفضة/المنخفضة. لقد بحثت في كيفية استخدام Nextra لهذا لفهرسة المحتوى في وقت الإنشاء للبحث؛ كان مثيرا للاهتمام.

لذا!؟

لقد وجدت نفسي أخترق باستخدام flexsearch أثناء لقائي المبكر مع Astro؛ عندما تابعت البرنامج التعليمي الخاص بالمدونة الخاص بإنشاء مدونة astro doc، ذهبت إلى أبعد من ذلك لتطبيق ميزة البحث بسهولة شديدة.

إذن، الخبرة المكتسبة من هذا التنفيذ؛ انتقلت إلى محرك البحث الخاص بـ jargons.dev.

محرك البحث

كانت المهمة بسيطة جدًا، وكنت بحاجة إلى..

• احصل على الوصول أو أطلق عليه مرجعًا لجميع الملفات الموجودة داخل دليل قاموس الكلمات - في هذه المرحلة كان دليل src/pages/word
• قم بفهرسة محتوى هذه الملفات باستخدام flexsearch
• قم بتوصيل نموذج البحث والازدهار؟

يبدو سهلا جدا! ربما بالنسبة لفهرسة البحث والبحث الفعلي، كان الأمر كذلك؛ ولكن كان هناك الكثير من الأشياء التي دخلت في الوصول إلى هناك.

دمج "الجزيرة" الأولى في jargons.dev

يأخذ Astro بشكل افتراضي نهج الخادم أولاً، مما يعني أنه يبني HTML/CSS لموقعك على الخادم ويزيل كل جافا سكريبت (JS) من جانب العميل تلقائيًا (ما لم تذكر خلاف ذلك). تؤدي إزالة كافة ملفات JS إلى ضمان تحسين الأداء، ولكن عدم وجود JS يعني عدم وجود تفاعل؛ ولكن إذا كنت تريد التفاعل، فإن Astro Island هي إحدى الطرق التي يمكنك اتباعها. أحتاج إلى التفاعل مع محرك البحث، لذا فهي الجزيرة!

ما هي "الجزيرة" بالرغم من ذلك!؟

سأقول ببساطة أن الجزيرة عبارة عن جزء تفاعلي معزول من مكون على صفحة ويب، يتم عرض HTML/CSS الخاص بها على جانب الخادم و/ولكن جافا سكريبت من جانب العميل (مرطب) مجمعة معها أيضًا - لم تتم الإزالة.

لقد ألقيت محاضرة عن Island في TILConf'24، قم بزيارتها لمعرفة المزيد.

عروض استرو

قدمت Astro الدعم لدمج الجزر بشكل خارج الصندوق مع مكتبة واجهة المستخدم المفضلة لدي (نعم، لقد خمنت ذلك، React) من بين العديد من المكتبات الأخرى. هذا سمح لي ببناء نماذج البحث الثابتة الخاصة بي إلى عناصر وظيفية.

الأشياء التي فعلتها

• لقد بدأت بإضافة وحدة التكامل (@astrojs/react) للجزيرة التي أحتاج إلى دمجها؛ يتم ذلك بسهولة تامة باستخدام الأمر npx astro add React
• لقد قمت بنقل جميع نماذج البحث الثابتة إلى مكون React واحد (هذان نموذجان مختلفان الحجم)؛ قام بتكوين المكون لعرضها بالحجم المطلوب بناءً على الدعائم المحددة.
• لقد قمت أيضًا بتنفيذ بعض المكونات الفرعية التي يتم استهلاكها محليًا فقط في نفس مكون البحث، وهي...
  • مربع حوار البحث - المكون الرئيسي حيث يتم تنفيذ عملية البحث
  • مكون نتائج البحث، الخ...
• لقد قمت بتنفيذ بعض اختصارات لوحة المفاتيح المخصصة وروابط المفاتيح التي تتيح التفاعل مع مكون البحث (أود أن أطلق على هذه "جزيرة البحث" من الآن فصاعدًا)، وهذه...
  • CTRL K أو ⌘K لبدء البحث
  • ESC لإغلاق البحث
  • ...وأزرار التنقل الأساسية المطلوبة للتنقل ضمن نتائج البحث
• أضفت أيضًا بعض الخطافات المخصصة للسماح بالإبحار السلس في عمل جزيرة البحث، وهذه...
  • useLockBody - خطاف يعطل التمرير بمجرد فتح مربع حوار البحث
  • useRouter - خطاف قمت بإنشائه كغطاء حول بعض أساليب window.location، مما يجعلها تبدو وكأنها مكتبات جهاز التوجيه المعروفة في React، وهذا خطاف استخدمته بشكل خاص على زر ENTER، انقر فوق المعالج في رابط مفتاح زر التنقل في مكون نتائج البحث في جزيرة البحث
  • و useIsMacOS - الذي يتحقق مما إذا كان الجهاز يعمل بنظام التشغيل MacOS من أجل تحديد نص الوصف المناسب لعرضه في مشغل نموذج البحث؛ أي CTRL K أو ⌘K
• أضفت الوحدة الحتمية - flexsearch؛
• لقد استعدت الوصول إلى الملفات ودليل الكلمات باستخدام وظيفة Astro.glob() بسهولة فائقة (من المؤسف أنني لم أتمكن من التحدث عن مدى قوة هذه الوظيفة؛ وكم أنا سعيد بوجودها خارج الصندوق في Astro) ومدى السهولة التي جلبها إلى تدفق تشغيل محرك البحث هذا) وتوصيل المصفوفة التي تم إرجاعها من كائنات الكلمات إلى حالة قاموس $ (ربما يجب أن أسمي هذا متجرًا) مدعومًا بـ nanostore (أشياء جميلة أخرى هناك)
• يتم بعد ذلك فهرسة هذا القاموس $ باستخدام flexsearch، وإعداده للبحث لاحقًا.

ميزة أخرى حتمية: عمليات البحث الأخيرة

هذه ميزة حتمية أخرى يجب أن أتحدث عنها؛ تقوم هذه الميزة بتتبع العناصر التي تم البحث عنها وتخزينها في وحدة تخزين محلية لاستمرارها عند إعادة تحميل الصفحة؛ يتم بعد ذلك عرض هذه العناصر التي تم البحث عنها في المتجر في قائمة على الصفحة الرئيسية للقاموس.

لقد تطلب الأمر أيضًا التكامل كجزيرة، مع الاحتفاظ بالقيمة في حالة عمليات البحث الحديثة $ التي يدعمها متجر النانو.

إن تنفيذي لهذه الميزة ليس مثاليًا تمامًا، وإليك قائمة ببعض المشكلات التي تحتاج إلى إصلاح (في وقت كتابة هذا التقرير) لاتخاذ خطوة أخرى على هذا الطريق (على الرغم من أننا لا نستطيع أبدًا الوصول إلى الكمال، نعم بكل تأكيد)

• إضافة مكون التحميل إلى جزيرة عمليات البحث الأخيرة - https://github.com/devjargons/jargons.dev/issues/31
• خطأ: عملية البحث التي يتم إجراؤها باستخدام نموذج البحث في Navbar تؤدي إلى الكتابة فوق LocalStorage - https://github.com/devjargons/jargons.dev/issues/10
• التحسين: محرر Word - ميزات التكرار الثاني - https://github.com/devjargons/jargons.dev/issues/9

العلاقات العامة

هذه بعض القراءة الطويلة الآن، أود أن أجعل هذه القراءة قصيرة... إليك العلاقات العامة

الفذ: تنفيذ محرك بحث القاموس #5

com.babblebey تم النشر بتاريخ 25 مارس 2024

يقوم طلب السحب هذا بتنفيذ وظيفة البحث في مشروع القاموس. ويستخدم تكامل @astro/react لتشغيل الجزر إلى جانب مخزن النانو لإدارة الحالة والبحث المرن كمكتبة بحث نصية.

التغييرات التي تم إجراؤها

• تمت إضافة تكامل astrojs التالي وlib المطلوب للبحث عن النص
  • @astrojs/react
  • @nanostores/react
  • البحث المرن
• تم تنفيذ جزيرة البحث (مكون رد فعل) حيث يتم تنفيذ المكونات الفرعية الأخرى للاستخدام الداخلي
  • تم تنفيذ مكون SearchTrigger الذي يعرض حقل بحث بحجمين مختلفين ويستخدم في مكانين مختلفين على صفحة الويب...
    • الحجم md - يُستخدم في الصفحة الرئيسية لتطبيق الويب
    • الحجم sm - يستخدم في قسم التنقل في تخطيط الكلمات في القاموس
  • تم تنفيذ مكون SearchDialog، والذي يتم عرضه فقط عند النقر فوق SearchTrigger
  • تم تنفيذ مكون SearchInfo، ويتم عرضه كعنصر نائب افتراضي عند عدم إدخال مصطلح بحث في حقل النموذج
  • تم تنفيذ مكون SearchResult، ويعرض إما نتائج البحث أو رسالة لعدم العثور على نتائج البحث
  • تم تنفيذ روابط المفاتيح داخل جزيرة البحث للسماح بالعملية التالية باستخدام اختصارات لوحة المفاتيح المذكورة
    • CTRL K أو ⌘K لفتح مربع حوار البحث دون النقر على مؤشر البحث
    • ArrowUp وArrowDown وEnter للسماح بالتنقل في قائمة نتائج البحث
    • ESC للسماح بإغلاق مربع حوار البحث
  • تمت إضافة الخطافات المخصصة للاستهلاك في جزيرة البحث
    • useIsMacOS - تحقق مما إذا كان المستخدم الحالي يتصفح تطبيق الويب باستخدام جهاز MacOS؛ يُستخدم هذا لتحديد المقطع القصير المناسب لعرضه على مشغل البحث؛ أي CTRL K أو ⌘K
    • useLockBody - يستخدم لتعطيل إطار العرض الحالي من التمرير عند فتح مربع حوار البحث
    • useRouter - (بدلاً من إضافة جهاز توجيه تفاعلي إلى deps) يلتف هذا الخطاف حول window.location ويستخدم الكائن المخصص كدفع؛ يستخدم بشكل أساسي في مكون SearchResult للتوجيه إلى صفحة النتائج المحددة/النقر عليها
  • تم تنفيذ فهرسة البحث في جزيرة البحث باستخدام طريقة المستند الخاصة بـ flexsearch كخيار مفضل
    • تمت إضافة متجر بحث جديد لإدارة الحالات المتعلقة بالبحث باستخدام متاجر النانو وتكامل @nanostores/react
    • تمت إضافة قيم وإجراءات المتجر التالية
      • $isSearchOpen - الحالة العالمية لإدارة حالة SearchDialog
      • $recentSearches - حالة لتتبع الكلمات التي تم البحث عنها مؤخرًا؛ يعمل بالتعاون مع localStorage للحفاظ على قيمته حتى بعد إعادة تحميل علامة التبويب
      • $addToRecentSearchesFn - إجراء متجر يضيف عنصرًا جديدًا إلى قيمة متجر $recentSearches
• تمت إضافة مخزن قاموس $ لإدارة إدخالات القاموس بأكملها؛ مع إبقائها في متناول العميل واستخدامها كقيمة لفهرس البحث في جزيرة البحث
  • القيمة المحسوبة لمخزن القاموس في أقرب وقت ممكن من التخطيط/القاعدة باستخدام طريقة Astro.glob() التي تقوم بفهرسة دليل القاموس بأكمله
• تمت إضافة جزيرة البحث الأخير التي تقرأ القيمة من متجر $recentSearches وتعرضها على الصفحة الرئيسية

التسجيل الصوتي للشاشة

العرض التوضيحي الكامل

screencast-bpconcjcammlapcogcnnelfmaeghhagj-2024.03.25-13_32_30.webm

؟

عرض على جيثب