Search functionality
There are many different ways of integrating a site search. Many options are both hosted and local. For small projects, such as the site we are creating, it's often better to opt for a local index solution as the number of pages you are searching through is never that large. This also means that your site search will work in offline scenarios, which can be a real plus.
Elasticlunr (http://elasticlunr.com/) is a lightweight full-text search engine in JavaScript for browser and offline search. Using the elasticlunr
Gatsby plugin, content is indexed and then made available via GraphQL to rehydrate in an elasticlunr
index. Search queries can then be made against this index to retrieve page information.
Let's integrate a site search using elasticlunr
:
- Install the
elasticlunr
Gatsby plugin:npm install @gatsby-contrib/gatsby-plugin-elasticlunr- search
- Add the
elasticlunr
plugin to yourgatsby-config.js
plugins array:{ resolve: &apos...