gatsby plugin lunr

搜索盖茨比

Gatsby插件，用于基于Lunr.js客户端索引的全文搜索实现。它支持多语言搜索。搜索索引在构建时间期间放置在 /公共文件夹中，必须在运行时间在客户端下载。

入门

安装gatsby-plugin-lunr

    npm install --save gatsby-plugin-lunr

或者

    yarn add gatsby-plugin-lunr

将gatsby-plugin-lunr配置添加到gatsby-config.js ，如下：

 module . exports = {
    plugins : [
        {
            resolve : `gatsby-plugin-lunr` ,
            options : {
                languages : [
                    {
                        // ISO 639-1 language codes. See https://lunrjs.com/guides/language_support.html for details
                        name : 'en' ,
                        // A function for filtering nodes. () => true by default
                        filterNodes : node => node . frontmatter . lang === 'en' ,
                        // Add to index custom entries, that are not actually extracted from gatsby nodes
                        customEntries : [ { title : 'Pictures' , content : 'awesome pictures' , url : '/pictures' } ] ,
                    } ,
                    {
                        name : 'fr' ,
                        filterNodes : node => node . frontmatter . lang === 'fr' ,
                    } ,
                ] ,
                // Fields to index. If store === true value will be stored in index file.
                // Attributes for custom indexing logic. See https://lunrjs.com/docs/lunr.Builder.html for details
                fields : [
                    { name : 'title' , store : true , attributes : { boost : 20 } } ,
                    { name : 'content' } ,
                    { name : 'url' , store : true } ,
                ] ,
                // How to resolve each field's value for a supported node type
                resolvers : {
                    // For any node of type MarkdownRemark, list how to resolve the fields' values
                    MarkdownRemark : {
                        title : node => node . frontmatter . title ,
                        content : node => node . rawMarkdownBody ,
                        url : node => node . fields . url ,
                    } ,
                } ,
                //custom index file name, default is search_index.json
                filename : 'search_index.json' ,
                //custom options on fetch api call for search_ındex.json
                fetchOptions : {
                    credentials : 'same-origin'
                } ,
            } ,
        } ,
    ] ,
}

使用插件

 const myPlugin = ( lunr ) => ( builder ) => {
  // removing stemmer
  builder . pipeline . remove ( lunr . stemmer )
  builder . searchPipeline . remove ( lunr . stemmer )
  // or similarity tuning
  builder . k1 ( 1.3 )
  builder . b ( 0 )
}

将其传递到gatsby-config.js ：...语言：[{name：'en'，...插件：[myplugin]}] ...

使用功能组件在网络UI中实现搜索

搜索数据将通过window.__LUNR__是一个具有以下字段的对象：

• index - lunr索引实例
• store - 键是盖茨比节点ID，值是字段值的集合。

 import React , { useState , useEffect } from 'react'
import { Link } from 'gatsby'

const Search = ( ) => {
  const [ query , setQuery ] = useState ( `` )
  const [ results , setResults ] = useState ( [ ] )

  useEffect (
    ( ) => {
      if ( ! query || ! window . __LUNR__ ) {
        setResults ( [ ] )
        return
      }
      const lunrIndex = window . __LUNR__ [ 'en' ]
      const searchResults = lunrIndex . index . search ( query )
      setResults (
        searchResults . map ( ( { ref } ) => {
          return lunrIndex . store [ ref ]
        } )
      )
    } ,
    [ query ]
  )

  return (
    < div >
      < input
        type = 'text'
        defaultValue = { query }
        onChange = { event => {
          setQuery ( event . target . value )
        } }
      / >
      < ul >
        { results . map ( ( { url , title } ) => {
          return (
            < li key = { url } >
              < Link to = { url } > { title } < / Link >
            < / li >
          )
        } ) }
      < / ul >
    < / div >
  )
}

export default Search 

使用类组件在网络UI中实现搜索

搜索数据将通过window.__LUNR__是一个具有以下字段的对象：

• index - lunr索引实例
• store - 键是盖茨比节点ID，值是字段值的集合。

 import React , { Component } from 'react'

// Search component
export default class Search extends Component {
    constructor ( props ) {
        super ( props )
        this . state = {
            query : `` ,
            results : [ ] ,
        }
    }

    render ( ) {
        return (
            < div >
                < input type = "text" value = { this . state . query } onChange = { this . search } / >
                < ul > { this . state . results . map ( page => < li > { page . title } < / li > ) } < / ul >
            < / div >
        )
    }

    getSearchResults ( query ) {
        if ( ! query || ! window . __LUNR__ ) return [ ]
        const lunrIndex =  window . __LUNR__ [ this . props . lng ] ;
        const results = lunrIndex . index . search ( query ) // you can  customize your search , see https://lunrjs.com/guides/searching.html
        return results . map ( ( { ref } ) => lunrIndex . store [ ref ] )
    }

    search = event => {
        const query = event . target . value
        const results = this . getSearchResults ( query )
        this . setState ( s => {
            return {
                results ,
                query ,
            }
        } )
    }
}

在文章中可以找到示例代码和实施搜索搜索的示例：