简介
在现代 Web 应用中，搜索是一种非常常见的功能。针对静态网站而言，按照往常的做法，需要通过手动构建一个搜索索引，依赖于一个现成的搜索解决方案。而 GatsbyJS 就是一个可以生成静态网站的前端框架，它提供了一些有趣的解决方案来构建和优化您的静态网站，比如使用 GatbyJS 的 gatsby-plugin-lunr-search 插件来构建搜索索引。
gatsby-plugin-lunr-search 是通过使用 Lunr.js 的内存搜索功能打造出一个完全在客户端上使用的网站搜索系统。它会通过只在构建时生成用于索引的 JSON 数据，而不是像其他网站搜索一样通过后端根据用户的请求进行搜索。这个插件可以在构建过程中生成搜索索引，然后将索引 JSON 文件（通常命名为 search_index.json) 连同静态文件一起托管到网站服务器上，并在客户端访问时直接搜索 JSON 文件完成。也就是说，不再需要服务器端进行搜索，不会因为搜索请求过于频繁而导致服务器的负载增大，同时也更加省去了后端服务器的维护和扩展。
安装
使用 npm 或 yarn 安装：
npm install --save gatsby-plugin-lunr-search # or yarn add gatsby-plugin-lunr-search
插件设置
在 gatsby-config.js 文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-------- -
-- --- ----- --------
-
-------- ----------------------------
-------- -
-- --------- ------
------- --------- --------
-- -------- ------
---------- -
--------------- -
------ ------ -- -----------------------
----- ------ -- ---------------------
----- ------ -- -----------------
--
--
--------- -------------------- -- ------ ---- ----- -------- -- --------------------
--
--
--
--上述示例中，我们将 gatsby-plugin-lunr-search 添加到了我们的项目中。我们还在 options 对象下指定了必须索引的字段，和可选的索引字段。还可以通过 resolvers 指定如何从每个节点中提取标题、内容的字段值等，以及索引 JSON 文件的名称，最终搜索输出结果在 json 中。
使用
安装和配置好插件后，我们现在就可以开始使用它来构建搜索索引，并在我们的 GatsbyJS 网站上启用完整的搜索体验：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ------- - ---- ---------
------ - ----- - ---- -------
------ ------ ---- -----------------------
----- ---------- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
-------- ---
--
-
------------------- -
----- -------------- - ---------------------------------------------- ---- -- -- -
------ -
--- --------
------ -----------------------
----- ---------------------
----- -----------------
--
---
---------- - --------------------------------------------------
--------------- -------------- ---
-
-------- -
------ -
--------
---------- ------------
------ ----------- ------------------------ ---------------------- --
----
------------------------------ -- -
------ -
--- --------------
----- ----------------------------------
-----
--
---
-----
---------
--
-
------ - ------- -- -
----- ----- - -------------------
----- ------- - ------------------------------- --- -- -- -
------ ------------------------------------ -- ------ --- -----
---
--------------- ------ ------- ---
--
-
------ ------- -----------
------ ----- --------- - --------
----- ---------------- -
---- -
------------ -
-----
-
-
--------------- -
-----
-
----------------- -
----- -
---- -
--
------ -
----
-
----------- -
-----
-
---------------
-
-
-
-
--在上面的代码中，我们在页面的 componentDidMount() 生命周期函数内将从 GraphQL 查询中获取的 Markdown 中的节点转化为可搜索的 JSON 格式，然后通过 Index.load() 函数将其加载到 Lunr 索引中。在调用 search() 方法时，Lunr 将返回匹配查询的文档。在我们的搜索页面上，我们使用这些搜索结果（文档）来构建一个简单的无序列表。
结论
gatsby-plugin-lunr-search 插件提供了一个简单但高效的方法来添加一流的搜索体验到您的 GatsbyJS 网站中。使用它能够使您节省服务器资源并显著提高搜索性能，同时也能够节省您的维护时间，使您的网站更加智能。大家可以在自己的项目上实施它，并在他们的用户中获得一流的搜索体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f81238a385564ab6b6b