Jamstack ????? ? ??? ??? ? ??? ?? ????. Gatsby, Nuxt ?? Gridsome? ?? ????? ?? ???? ?? ?? ? ??? ?? ??????. ??? ?? ??? ?? ?? ??? ??? ???? ??? ???? ?? ??? ?????. ?? ? ?? ???? ??? ??? ??? ? ?????

Jamstack?? ????? ?? ?? ??? ?????. ?? ???? ??? ??? ??? ?????. Algolia? Search-as-A-Service (?? ?? ?? ??)? ?? ??? ????? WPGRAPHQL ? APOLLO ?????? ??? WordPress? ?? ??? ?? ??? ???? ??? ????? ? ???? ??? ???.

?? ?? ????? ????? ??? ?? ??? ??? ???? ?? JavaScript ????? ? LUNR.JS? ???? ?? ??? ???? ??? Gatsby ???? ?????. ?? Tartanify.com?? "Tartan ?? ??"??? ???? ?? ??? ??? ??? ??? ??????. ? ??? ??? ??? ???? ??? ?????.

????

?????? ?? ?? ??? ??? ???? ???????. ??? ?? ? ??? ??? ?? ??? ??????. ??? ? :

 Gatsby New Gatsby-Starter-Blog https://github.com/gatsbyjs/gatsby-starter-blog
CD ??? ??? ???
???? ??

??? http://localhost:8000/ ?? ??? ? ??? 3 ?? ?????? ?? ???? ????. http://localhost:8000/__graphql ?? ?? ??? ???? ?????.

LUNR.JS? ? ??? ?????

LUNR? ??? ?? ? ??? ?????. ??? ???? ? ??? ?? ?? (??? ??)??????. ??? ???? ???? ?? (??, ??, ?? ?)? ?????.

???? ?? ??? ???? ?????. ??? ????? ??? ??? ?????. ?? ?? ???? ?? ??? rawMarkdownBody ???? ??? ??????. html ??? striptags ???? ???? HTML ??? ?????. ??? ??? LUNR ??? ??????.

LUNR ?? ?? ? ?? ? ?? ( gatsby-node.js ?? ??? ??)? ??? ????.

 const index = lunr (function () {
  this.ref ( '???')
  this.field ( '??')
  this.field ( 'content')
  for (??? const doc) {
    this.add (doc)
  }
})

documents ?? slug , title ? content ??? ?? ?????.

 {
  ??? : '/post-slug/',
  ?? : '??? ??',
  ?? : '?? HTML ??? ?? ? ??? ??????.'
}

?? ? ?? ? ( slug )? ? ?? ?? ( title ? content )? ?????. ?? ??? ????? ?????.

gatsby-node.js ?? ??? ??

?? ??? ?????? ??????.

 ?? LUNR GraphQL-Type-JSON Striptags? ?????

???? gatsby-node.js ??????. ? ??? ??? ?? ?? ????? ??? ??? ?? ? ? ????. Gatsby API createResolvers ???? ??? ?? ?? ? LunrIndex ????.

Gatsby? ??? ??? ? ?? ??? GraphQL ?? ???? ?? ?????. getAllNodes ??? ??? ??? ?????.

 / * gatsby-node.js */
// ... (?? ??)

Exports.CreaterSolvers = ({??, ??? ??}) => {
  Createresolvers ({
    ?? : {
      lunrindex : {
        ?? : GraphQljsonObject,
        ?? : (??, args, ????, ??) => {
          const blognodes = context.nodemodel.getAllNodes ({type :`markDownRemark`});
          const type = info.schema.getType ( 'MarkdownRemark');
          return createIndex (blognodes, type, cache);
        },
      },
    },
  });
};

// ... (CreateIndex ??)

createIndex ??? LUNR ? ??? ?????.

 / * gatsby-node.js */
// ... (?? ??)

const createIndex = async (blognodes, type, cache) => {
  // ... (??? ???? ???? ?? ???? ??)
};

(??? ?? ??, ?? ? ??? ??? ??? createIndex ??? ???? ????? ?? ???? ?????. ?? ???? ?? ??? ?????.) ????? ??? ???? ???? ????????.

?? ?? ?? ?? ??

?? ?? ?? ?? ?? ( src/components/search-form.js ) :

 // ... (?? ?? ?? ?? ??)

(??? ?? ?? ??? ???? ?? ????? ?? ??? ??? ???? ????.)? ?? ??? ?? ?? ??? ?? /search ?? ?? ? ?? ??? ?????.

?? ?? ??? ??

?? ?? ??? ?? ??? ( src/pages/search.js ) :

 // ... (?? ?? ??? ??)

(?? ??? ??? ???? ????? ?? ??? ??? ???? ????.)? ???? LunrIndex ???? ???? ?? ??? ?????.

?? ?? ?? (tartanify.com ??)

tartanify.com ??? ???? ???? ?? ??? ?????. ??? ??? ??? ??? ????? ?????.

 // ... (tartanify.com? ?? ??)

(??? ??? ???? ?? ?????? ?? ??? ??? ???? ????.) ?? ???? ?? ??? ?? ?? ??? ?? ??? ? ???? ?? ?????. useStaticQuery hook? ??? ?? ??? ?????.

??? ????? ????

??? ??? ?? ?? ??? ???? ?? Gatsby? wrapPageElement API? ?????.

 // Gatsby-Browser.js
// ... (WaprageElement ??)

(??? ??? ?? ??? ??? ???? ????.) ??? ?? ???? ??? ??? ??? ???? ?????.

??? ?? ?? ?? ??

?? ??? LUNR? query ???? ???? ?? ??? ??? ?? ?? ??, ??? ?? ? ?? ??? ? ?? ?? ??? ?????. ? ????? ?? ??? ?? ??????.

??

Jamstack ? ????? ?? ??? ??? ? ??? ??? ??? ?? ???? ? ????. Jamstack? ??? ??? ???? ??? ???? Lunr.JS? ?? ????? ? ???? ???? ??? ??? ?????. ? ??? ??? ?? ? ??? ?? ??? ??? ?? ?? ?? ? ??? ?? ??? ??? ??? ?? ? ??? ???? ?????.

? ??? Gatsby ? ???? LUNR ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!