gatsby plugin elasticlunr search

Cari Plugin untuk Gatsby

Plugin ini memungkinkan integrasi pencarian melalui elastic lunr. Konten diindeks dan kemudian tersedia melalui graphql untuk direhidrasi menjadi indeks elasticlunr . Dari sana, kueri dapat dibuat terhadap indeks ini untuk mengambil halaman berdasarkan ID-nya.

Memulai

Instal plugin melalui npm install -D @andrew-codes/gatsby-plugin-elasticlunr-search . Lihat repo situs demo untuk detail implementasi yang lebih spesifik.

Selanjutnya, perbarui file gatsby-config.js Anda untuk menggunakan plugin.

Pengaturan di gatsby-config

 module . exports = {
    plugins : [
        {
            resolve : `@andrew-codes/gatsby-plugin-elasticlunr-search` ,
            options : {
                // Fields to index
                fields : [
                    'title' ,
                    'keywords' ,
                ] ,
                // 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 ,
                        keywords : node => node . frontmatter . keywords ,
                    } ,
                } ,
            } ,
        } ,
    ] ,
} ; 

Mengkonsumsi di Situs Anda

Indeks pencarian serial akan tersedia melalui graphql. Setelah ditanyakan, komponen dapat membuat indeks lunr elastis baru dengan nilai yang diambil dari kueri graphql. Kueri pencarian dapat dibuat berdasarkan indeks pencarian terhidrasi. Hasilnya adalah serangkaian ID dokumen. Indeks dapat mengembalikan dokumen lengkap dengan ID dokumen

 import React , { Component } from 'react' ;
import { Index } from 'elasticlunr' ;

// Graphql query used to retrieve the serialized search index.
export const query = graphql `query
SearchIndexExampleQuery {
    siteSearchIndex {
      index
    }
}` ;

// 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 } : { page . keywords . join ( `,` ) }
                        < / li >
                    ) ) }
                < / ul >
            < / div >
        ) ;
    }

    getOrCreateIndex = ( ) => this . index
        ? this . index
        // Create an elastic lunr index and hydrate with graphql query results
        : Index . load ( this . props . data . siteSearchIndex . index ) ;

    search = ( evt ) => {
        const query = evt . target . value ;
        this . index = this . getOrCreateIndex ( ) ;
        this . setState ( {
            query ,
            // Query the index with search string to get an [] of IDs
            results : this . index . search ( query )
                // Map over each ID and return the full document
                . map ( ( {
                ref ,
                } ) => this . index . documentStore . getDoc ( ref ) ) ,
        } ) ;
    }
}