给静态HTML网站添加全文检索

一、使用工具：pagefind

二、原理介绍：

1. pagefind是nodejs的一个库，因此需要使用npm来安装。

npm install pagefind
           

2. 创建索引库，并引入首页html文件。

执行如下命令：

pagefind --source public
           

当命令执行完成后，会在public目录下生成一个_pagefind文件夹，此时需要在首页的html文件中引入索引库，具体操作是：

a. 在head中引入pagefind的css以及js文件：

<link href="/_pagefind/pagefind-ui.css" target="_blank" rel="external nofollow"  rel="stylesheet">
<script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
           

b. 在body的最前边插入div search，以及script脚本：

<div id="search"></div>
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    new PagefindUI({ element: "#search" });
  });
</script>
           

3. 访问网站，即可在首页看到搜索框，此时即可进行全文检索。