搜索是现代网站必不可少的功能之一，在前端开发中实现搜索需要依赖于一些库和技术。而为了方便开发者，开源社区为我们提供了很多优秀的工具，其中就包括 metalsmith-simple-search 这个 npm 包。本文将为大家介绍这个包的使用方法，并通过示例代码，让大家更深入的了解这个强大的搜索工具。
什么是 metalsmith-simple-search？
metalsmith-simple-search 是一个基于 Metalsmith 构建的文档搜索插件。 Metalsmith 是一个静态网站生成器，而 metalsmith-simple-search 通过在 Metalsmith 中应用插件的方式，实现了一个简单高效的站内搜索功能。
通过这个包，你可以快速的实现一个简单的搜索功能，并且可以自定义搜索结果的呈现方式。下面我们就来了解如何使用它。
安装
想要使用 metalsmith-simple-search 首先要先安装 Metalsmith，然后在项目中选择安装 metalsmith-simple-search 包。具体安装方式如下：
npm install metalsmith --save-dev npm install metalsmith-simple-search --save-dev
配置
要使用 metalsmith-simple-search 插件，我们需要在 Metalsmith 的配置文件中对其进行配置。配置文件一般为 metalsmith.json。 具体配置方式如下：
-- -------------------- ---- -------
-
--------- --------
-------------- ----------
---------- -
--------------------------- -
--------------- --------- -------------- --------
----------------- ----
-
-
-其中 "searchFields" 表示你想要搜索的字段，在这个示例中我们选择了文章标题，描述和正文内容。"searchMetadata" 表示是否搜索元数据，例如文档的标签等。
使用
当安装好插件并配置好了 Metalsmith 的配置文件之后，我们就可以开始使用它了。具体使用方式如下：
-- -------------------- ---- -------
----- ---------- - ---------------------
----- ------ - -----------------------------------
----- ---------- - ---------------------
------------------------
------------------------- ----- -
-- ----- -
----- ---
-
--在 Metalsmith 中引入 metalsmith-simple-search 插件并调用它，最后通过 metalsmith.build 生成站点即可。
示例代码
下面，我们来看一个完整的例子。
目录结构
在示例中我们假设有一个文档目录保存了一些 Markdown 文件用于生成整个站点，其目录结构大概如下：
└── docs
├── about.md
├── index.md
└── posts
├── 1.md
├── 2.md
└── 3.md每个 Markdown 文件包含了一个 title，一个 description 和正文内容，我们将在这些文件中查找。
Metalsmith 配置文件
下面是我们的 Metalsmith 配置文件 metalsmith.json。在这个示例中我们只开启了 metalsmith-clean-css 和 metalsmith-simple-search 插件。
-- -------------------- ---- -------
-
--------- ---------
-------------- ----------
---------- -
--------------------------- -
--------------- --------- -------------- ------------
----------------- ----
--
---------------------- -
- -------------- -----
- ------------- -----
- ------ -----
- --------- ----
--
------------------------- -
-------- -
---------- -------------
--------- -------
---------- ----
-
--
------------------------ -
---------- --------------------
--
----------------------- --
-
-其中 "searchFields" 中的 "contents" 表示了要搜索的正文内容。
如何查询
在 metalsmith-simple-search 中，我们可以通过 site.search(query) 进行查询。我们可以在页面中添加一个输入框和一个搜索按钮，当用户输入搜索关键字，并点击搜索按钮后，执行对应的查询。
<div class="search-bar"> <input type="text" class="search-input" /> <button type="button" class="search-btn">搜索</button> </div>
-- -------------------- ---- -------
----- ---- - ---------------------------- -- -------- ---------- --- ---- --
--------------------------------------------------------------- -- -- -
----- ----- - ---------------------------------------------
-------------------------------------------- -- ----------------------------
----- ------- - ------------------
-- --------------- --- -- -
----------------------
------
-
---------------------- -- -
----- -- - ------------------------------------
-- ---- -
-------------------------
-
--
--上面的代码通过 site.search 方法搜索匹配的结果，然后将结果依次添加到匹配节点的 match 类中，只需要在 CSS 文件中定义好 .match 类的样式，在搜索结果中，匹配到的节点就会以特殊的方式呈现。
.match {
background: yellow;
}总结
metalsmith-simple-search 是一个非常实用的插件。通过本文的介绍，相信读者已经能够掌握如何使用它实现一个简单高效的站内搜索功能。当然，如果您需要更加高级的搜索功能，也可以使用 elasticlunr 或 lunr.js 这些完整的搜索引擎库。不过，无论使用何种方式，搜索功能总是现代网站不可或缺的重要功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7f81e8991b448d90ee