gatsby plugin elasticlunr search

Плагин поиска для Гэтсби

Этот плагин обеспечивает интеграцию поиска через эластичный lunr. Содержимое индексируется, а затем становится доступным через Graphql для преобразования в индекс elasticlunr . Отсюда можно выполнять запросы к этому индексу для получения страниц по их идентификатору.

Начиная

Установите плагин через npm install -D @andrew-codes/gatsby-plugin-elasticlunr-search . См. репозиторий демонстрационного сайта для более подробной информации о реализации.

Затем обновите файл gatsby-config.js , чтобы использовать плагин.

Настройка в 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 ,
                    } ,
                } ,
            } ,
        } ,
    ] ,
} ; 

Потребление на вашем сайте

Сериализованный поисковый индекс будет доступен через Graphql. После запроса компонент может создать новый эластичный индекс lunr со значением, полученным из запроса графа. Поисковые запросы можно выполнять по гидратированному поисковому индексу. Результатом является массив идентификаторов документов. Индекс может возвращать полный документ с учетом идентификатора документа.

 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 ) ) ,
        } ) ;
    }
}