給靜态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. 通路網站，即可在首頁看到搜尋框，此時即可進行全文檢索。