ดาวน์โหลด lunr module - ดาวน์โหลด lunr module ซอร์สโค้ด

lunr module

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

โมดูล lunr.js

การค้นหาข้อความแบบเต็มด้วยดัชนีที่สร้างไว้ล่วงหน้าสำหรับ Nuxt.js โดยใช้ lunr.js

ในระหว่างขั้นตอนการสร้าง Nuxt.js คุณสามารถเพิ่มเอกสารไปยังตัวสร้างดัชนีการค้นหาได้โดยการเรียก nuxt hook lunr:document หากคุณได้กำหนดค่าและส่งตำแหน่งที่ตั้งที่รองรับไปตามเอกสาร ดัชนีจะถูกสร้างขึ้นโดยใช้ก้าน lunr สำหรับภาษาที่ระบุ เนื่องจากดัชนีการค้นหา lunr เก็บเฉพาะการอ้างอิงไปยังเอกสารของคุณ คุณจึงสามารถเลือกส่ง meta prop พร้อมกับเอกสารที่จะถูกเพิ่มลงในดัชนีการค้นหาได้เช่นกัน

บันทึกประจำรุ่น

ตั้งค่า

เพิ่มการพึ่งพา @nuxtjs/lunr-module ให้กับโปรเจ็กต์ของคุณ

$ yarn add @nuxtjs/lunr-module # or npm install @nuxtjs/lunr-module

เพิ่ม @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 โดยอัตโนมัติ คุณไม่จำเป็นต้องกำหนดค่าสถานที่ที่คุณใช้สองครั้ง เว้นแต่ว่าคุณต้องการใช้สถานที่ที่แตกต่างกัน (เช่น เพียงสถานที่เดียว) สำหรับดัชนีการค้นหา

เพิ่มองค์ประกอบการค้นหาให้กับเว็บไซต์ของคุณ

โมดูลนี้มีองค์ประกอบการค้นหาที่คุณสามารถใช้บนเว็บไซต์ของคุณได้ ใช้ช่องเริ่มต้นเพื่อแสดงผลการค้นหาของคุณโดยใช้คุณสมบัติที่ส่งผ่านใน meta prop

< 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 นี้สำหรับวิธีแก้ปัญหาที่เป็นไปได้

อ้างอิง

ตัวเลือก

รวมส่วนประกอบ

พิมพ์ Boolean
ค่าเริ่มต้น true

หากเป็นจริง องค์ประกอบการค้นหาเริ่มต้นจะถูกเพิ่มลงในโปรเจ็กต์ Nuxt ของคุณ

คุณสามารถนำเข้าส่วนประกอบโดยใช้นามแฝง webpack 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 เริ่มต้นไว้หรือไม่

ภาษาเริ่มต้น

ประเภท String
ค่าเริ่ม 'en'

ภาษาเริ่มต้นที่จะใช้ นี่เป็นภาษาสำรองหากคุณส่งเอกสารที่มีภาษาที่ไม่รองรับ

ภาษา

ประเภท String , Array
ค่าเริ่มต้น undefined

สตริงหรืออาร์เรย์ของภาษาที่ต้องการสร้างดัชนีการค้นหา

แม้ว่าตัวเลือกนี้อาจดูซ้ำซ้อน (เช่น ทำไมไม่เพียงแค่สร้างดัชนีการค้นหาสำหรับทุกภาษาที่ผ่านไป) ตัวเลือกนี้จึงมีการตรวจสอบเพื่อป้องกันไม่ให้เอกสาร 'โกง' ถูกจัดทำดัชนีเป็นดัชนีแยกต่างหาก

ภาษาStemmerMap

ประเภท Object
ค่าเริ่มต้น {}

ออบเจ็กต์ซึ่งมีแผนที่ของภาษาที่ไม่รองรับเพื่อรองรับภาษาต้นกำเนิด (โดย lunr) ใช้สิ่งนี้เพื่อระบุว่าควรใช้ภาษาต้นกำเนิดใดหากคุณต้องการสร้างดัชนีการค้นหาสำหรับภาษาที่ lunr ยังไม่รองรับ (ยัง)

เส้นทาง

ประเภท String
search-index เริ่มต้น

ในการสร้างโปรเจ็กต์ของคุณ ดัชนีการค้นหาที่สร้างขึ้นจะถูกส่งออกเป็นสินทรัพย์ webpack ตัวเลือกนี้จะกำหนดเส้นทางภายใต้ nuxt.publicPath ที่ควรใช้

ด้วยการกำหนดค่าเริ่มต้นสำหรับ Nuxt.js และโมดูลนี้ ดัชนีการค้นหาภาษาอังกฤษจะอยู่ภายใต้ /_nuxt/search-index/en.json

อ้างอิง

ประเภท String
id เริ่มต้น

ชื่อของคุณสมบัติในเอกสารของคุณซึ่งระบุว่าควรใช้การอ้างอิงสำหรับเอกสารนี้ในดัชนีการค้นหา

สาขา

ประเภท Array
ค่าเริ่มต้น ['title', 'body']

ชื่อคุณสมบัติในเอกสารของคุณซึ่งจะถูกจัดทำดัชนี

ข้อความตัวยึดตำแหน่ง

ประเภท 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>) หากคุณต้องการใช้ hooks เหล่านี้

ลูนร์:เอกสาร

หาเรื่อง: ({ locale?, document, meta? })

เบ็ดหลักที่ใช้เพื่อเพิ่มเอกสารลงในดัชนีการค้นหา คุณต้องผ่านวัตถุตามที่อธิบายไว้ ทั้งสองโลแคลเป็นเมตาเป็นทางเลือก หากไม่มีการส่งผ่านภาษา ระบบจะใช้ภาษา defaultLanguage