الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

وحدة lunr.js

البحث عن النص الكامل باستخدام فهارس الإنشاء المسبق لـ Nuxt.js باستخدام lunr.js

أثناء مرحلة إنشاء Nuxt.js، يمكنك إضافة مستندات إلى منشئ فهرس البحث عن طريق استدعاء الخطاف nuxt lunr:document . إذا قمت بتكوين لغة مدعومة وتمريرها على طول المستند، فسيتم إنشاء الفهرس باستخدام Lunr Stemmer للغة المحددة. نظرًا لأن فهرس البحث lunr يحتوي فقط على مراجع لمستنداتك، فيمكنك اختياريًا تمرير خاصية تعريفية مع المستند الذي سيتم إضافته إلى فهرس البحث أيضًا.

ملاحظات الإصدار

يثبت

  1. أضف تبعية @nuxtjs/lunr-module إلى مشروعك 
$ yarn add @nuxtjs/lunr-module # or npm install @nuxtjs/lunr-module
  1. أضف @nuxtjs/lunr-module إلى قسم modules في nuxt.config.js 
 {
  modules : [
    // Simple usage
    '@nuxtjs/lunr-module' ,

    // With options
    {
      src : '@nuxtjs/lunr-module' ,
      // These are the default options:
      /*
      options: {
        includeComponent: true,
        globalComponent: false,
        css: true,
        defaultLanguage: 'en',
        languages: false,
        path: 'search-index',
        ref: 'id',
        fields: [
          'title',
          'body'
        ]
      } */
    }
  ]
}

التوثيق

إضافة المستندات إلى فهرس البحث

قم بإضافة المستندات عن طريق استدعاء nuxt Hook lunr:documents كما يلي: 

 const document = {
  id : 1 ,
  title : 'My Title' ,
  body : 'The body'
}

const meta = {
  href : '/link/to/page' ,
  title : document . title
}

nuxt . callHook ( 'lunr:document' , ( {
  locale : 'af' , // optional, default en
  document ,
  meta // optional
} )

دعم اللغة

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

اللغات المتعددة تساوي فهارس بحث متعددة

يتم دعم اللغة الإنجليزية بشكل افتراضي في Lunr، عندما يكون لديك مستندات باللغة الإنجليزية فقط، فلن يتعين عليك تكوين أي لغة أو تمريرها.

اللغة مقابل اللغة

يمكن أن تتكون اللغة من مجرد لغة أو تتضمن منطقة، ويمكنك استخدام أي منهما. لذا فإن كلاً من اللغة (على سبيل المثال nl ) بما في ذلك المنطقة (على سبيل المثال nl_NL ) ستعمل

التكامل nuxt-i18n

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

أضف عنصر البحث إلى موقع الويب الخاص بك

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

< template >
  < lunr-search : lang = " lang " >
    < template v-slot : default = " { result, index, maxScore, meta } " >
      < nuxt-link : to = " meta . href " >
        {{ meta . title }}
        < span >score: {{ Math . round ( 100 * result . score / maxScore) }}%</ span >
      </ nuxt-link >
    </ template >
  </ lunr-search >
</ template >

< script >
export default {
  components : {
    // Note: 'lunr-module' below is a custom webpack alias and
    // does NOT refer to the folder in node_modules
    LunrSearch : () => import ( ' lunr-module/search ' )
  }
}
</ script >

اعتبارات الأداء

استخدم عددًا صحيحًا كمرجع للمستند

يتم استخدام مرجع الوثيقة (المحدد بواسطة option.ref) في فهرس البحث لربط جميع أجزاء الكلمات المتأصلة. إذا كنت ستستخدم، على سبيل المثال، مسار الصفحة كمرجع للمستند، فبالنسبة للصفحة ذات المسار /en/offices/emea/nl/contact ، سيتم استخدام قيمة السلسلة لربط جميع أجزاء الكلمات المتأصلة. قد يؤدي هذا إلى زيادة حجم فهرس البحث بشكل كبير، لذلك يوصى بإنشاء مرجع مستند رقمي واستخدام خاصية meta لإضافة مسار الصفحة لمرجع المستند هذا مرة واحدة فقط إلى فهرس البحث.

تحميل مكون البحث بشكل حيوي

لا يقوم Lunr بتصدير وحدات ES6 ولا يمكن هزه بالشجرة. يؤدي استخدام هذه الوحدة إلى إضافة ~8.5KB + ~2KB لكل لغة أخرى ثم الإنجليزية إلى مجموعتك (gzipped). راجع المثال أعلاه للاستيراد الديناميكي الذي يضمن عدم تضمين واردات lunr في حزمة الموردين الخاصة بك

راقب حجم فهرس البحث بشكل عام

يتم حفظ فهرس البحث كملف json وبالتالي يجب تحليله على العميل. إذا أصبح ملف json الخاص بفهرس البحث الخاص بك كبيرًا جدًا، فقد يكون ذلك مشكلة بالنسبة للعملاء (المتنقلين). على سبيل المثال، يحد Safari على نظام التشغيل iOS من تشغيل كل نقطة دخول ذات مستوى أعلى لمدة 10 ثوانٍ كحد أقصى. راجع مشكلة Lunr.js هذه للحصول على حل بديل محتمل.

مرجع

خيارات

includeComponent

  • اكتب Boolean
  • الافتراضي true

إذا كان هذا صحيحًا، فسيتم إضافة مكون البحث الافتراضي إلى مشروع Nuxt الخاص بك

يمكنك استيراد المكون باستخدام الاسم المستعار لحزمة الويب lunr-module/search

globalComponent

  • اكتب Boolean ، String
  • الافتراضي false

إذا كان ذلك صحيحًا، فسيتم إضافة مكون إضافي إلى مشروعك والذي يقوم بتثبيت مكون البحث عالميًا

يتضمن تعيين هذا الخيار includeComponent: true

افتراضيًا، سيتم تسجيل مكون البحث باسم lunr-search ، إذا كنت ترغب في هذا الاسم، يمكنك تعيين هذا الخيار على سلسلة بالاسم الذي ترغب في استخدامه 

  globalComponent : 'my-global-lunr-search'
. . .
< template >
  < my-global-lunr-search : lang = "lang" class = "my-search" / >
< / template >

المغلق

  • اكتب Boolean
  • الافتراضي true

إذا تم تضمين مكون البحث، فسيحدد هذا الخيار ما إذا كان يجب تضمين أنماط CSS الافتراضية أم لا

defaultLanguage

  • اكتب String
  • الافتراضي 'en'

اللغة الافتراضية المستخدمة. هذه أيضًا هي اللغة الاحتياطية إذا قمت بتمرير مستند بلغة غير مدعومة

اللغات

  • اكتب String ، Array
  • افتراضي undefined

سلسلة أو مجموعة من اللغات التي يجب إنشاء فهرس بحث لها.

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

languageStemmerMap

  • اكتب Object
  • تقصير {}

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

طريق

  • اكتب String
  • search-index الافتراضي

عند إنشاء مشروعك، سيتم إصدار فهارس البحث التي تم إنشاؤها كأصول لحزمة الويب. يحدد هذا الخيار المسار الذي يجب استخدامه ضمن nuxt.publicPath .

مع التكوينات الافتراضية لـ Nuxt.js وهذه الوحدة، يتوفر فهرس البحث باللغة الإنجليزية ضمن /_nuxt/search-index/en.json

المرجع

  • اكتب String
  • id الافتراضي

اسم الخاصية في مستندك الذي يحدد ما يجب استخدامه كمرجع لهذه الوثيقة في فهرس البحث

الحقول

  • اكتب Array
  • الافتراضي ['title', 'body']

أسماء الخصائص في وثيقتك والتي سيتم فهرستها

placeholderText

  • اكتب String
  • Search الافتراضي

النص الذي يتم وضعه في العنصر النائب لحقل إدخال البحث. إذا كنت تستخدم nuxt-i18n، فيمكنك أيضًا توفير ترجمة باستخدام المفتاح lunr-module.placeholderText

رسائل الحالة

  • اكتب Array<String>
  • الافتراضي { fetching: 'Fetching search index', loading: 'Loading search index', searching: 'Searching...', noresults: 'No results found' }

رسائل الحالة التي يتم عرضها خلال دورة حياة البحث. إذا كنت تستخدم nuxt-i18n، فيمكنك أيضًا توفير ترجمة باستخدام المفتاح lunr-module.${key} . على سبيل المثال، استخدم lunr-module.noresults لتوفير ترجمة لحالة "لم يتم العثور على نتائج".

الخطاف (الاستماع)

استخدم nuxt.callHook(<name>, <arg>) إذا كنت ترغب في استخدام هذه الخطافات

لونر:document

  • arg: ({ locale?, document, meta? })

الخطاف الرئيسي الذي يستخدم لإضافة المستندات إلى فهرس البحث. تحتاج إلى تمرير كائن كما هو موضح. كلا الموقعين كـ meta اختياريان. إذا لم يتم تمرير أي لغة، فسيتم استخدام اللغة defaultLanguage

خطاف (انبعاث)

استخدم nuxt.hook(<name>, <callback>) إذا كنت ترغب في استخدام هذه الخطافات. تتلقى وظيفة رد الاتصال الوسائط المدرجة

لونر:الفهرس:قبل الإنشاء

  • arg: ({ locale, builder })

استخدم هذا الخطاف إذا كنت تريد على سبيل المثال تسجيل مكونات Lunr الإضافية المخصصة

يتم استدعاء هذا الخطاف بعد إنشاء مثيل lunr builder ولكن قبل إضافة المكونات الإضافية للغة أو تعيين أي مراجع وحقول

لونر:الفهرس:تم الإنشاء

  • arg: ({ locale, builder })

استخدم هذا الخطاف إذا كنت تريد، على سبيل المثال، إضافة مستندات إضافية إلى الفهرس

يتم استدعاء هذا الخطاف عند إعداد lunr builder، قبل إضافة المستندات إلى الفهرس مباشرةً.

لونر:الفهرس:تم

  • arg: ({ locale, builder, index })

استخدم هذا الخطاف إذا كنت ترغب في التفاعل مع الفهرس قبل تصديره

يتم استدعاء هذا الخطاف مباشرة قبل تصدير الفهرس ككائن json

لونر: الأصول

  • الوسيطة: ({ locale, json })

استخدم هذا الخطاف إذا كنت ترغب في التعامل مع json الذي يتم إصداره كفهرس بحث للغة

يتم استدعاء هذا الخطاف أثناء تجميع حزمة الويب مباشرة قبل أن يتم إعداد فهرس البحث ليتم إصداره كأصل

تطوير

  1. استنساخ هذا المستودع
  2. تثبيت التبعيات باستخدام yarn install أو npm install
  3. ابدأ تشغيل خادم التطوير باستخدام npm run dev

رخصة

رخصة معهد ماساتشوستس للتكنولوجيا

حقوق الطبع والنشر (ج) pimlie

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل