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 مرن جديد مع القيمة المستردة من استعلام graphql. يمكن إجراء استعلامات البحث مقابل فهرس البحث المرطب. وتكون النتائج عبارة عن مجموعة من معرفات المستندات. يمكن للفهرس إرجاع المستند الكامل مع معرف المستند

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