How to Add Search to Any Kind of Static Site Using Pagefind

使用 Pagefind 替任何静态网站添加搜寻功能

前言

原先存在于导览列的 Fuse.js 搜寻功能
原先存在于导览列的 Fuse.js 搜寻功能

如果你是网页东东较早期的读者可能会发现导览列原先的搜寻功能不见了,这是因为近期把使用 Fuse.js🔗(模糊搜寻套件)制作的搜寻功能改为使用 pagefind🔗 来实现网站的搜寻功能。

Fuse.js 其实已经足够当前网站的搜寻需求,但可以预期网站大一点就会遇上瓶颈,又碰巧遇上 pagefind 1.0 的推出,就决定把原先的搜寻功能换成 pagefind,当然背后还有一些额外的原因,像是我想移除原先制作 UI 所用到的 preact🔗

关于 pagefind

pagefind 是一个以 Rust 编写并且透过执行 WebAssembly 来实现的搜寻套件,它的诞生原因从一开始就非常明确:替任何静态网页提供现成可用的搜寻方案。

让我感觉到这是一个足够成熟可即用的解决方案,因此决定采纳 pagefind 来实现这个 Astro 静态网站的搜寻功能。

第一步:建立索引🔗

pagefind 的运作原理十分简单,只需要对生成好的静态网站建立索引🔗即可,索引其实就是一个pagefind 资料夹里面装满了 pagefind 所需要用到的档案, 过程无须安装相关套件,只需要执行npx -y pagefind --site public --serve 就可以及时下载 pagefind 并且建立索引,我将这个流程放置在建构完成网站之后🔗

建构完成会得到类似以下的结果,并且多出一个 pagefind 资料夹:

Terminal window
Running Pagefind v1.1.0 (Extended)
Running from: "D:\\USER\\Desktop\\astro-blog"
Source: "dist"
Output: "dist\\pagefind"
[Walking source directory]
Found 221 files matching **/*.{html}
[Parsing files]
Found a data-pagefind-body element on the site.
Ignoring pages without this tag.
[Reading languages]
Discovered 1 language: zh-hant-tw
[Building search indexes]
Total:
Indexed 1 language
Indexed 123 pages
Indexed 5640 words
Indexed 2 filters
Indexed 1 sort
Finished in 1.503 seconds

这里使用 Extended 版本,意味着这个版本针对中文与日文这样特殊语言🔗有特别支持,如果博客使用这类语言可以特别留意使用该版本。

第二步:添加搜索功能🔗

Pagefind 很贴心的自带现成的搜索 UI,并且包含了点击加载的功能,只需要在想要添加搜索的页面中添加以下代码即可创建搜索功能:

<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
// 替换 #search 为你想要放置搜索的元素
new PagefindUI({ element: '#search', showSubResults: true });
});
</script>

也可以不使用现成 UI,而是单纯的使用 pagefind 的搜索功能,并取得搜索结果:

const pagefind = await import('/pagefind/pagefind.js');
const search = await pagefind.search('static');

总结

不到 3 步骤你的网站就立刻有以 WebAssembly 高效驱动的客制化搜索功能了 🙌🏻!你可能会想要根据自己的需求进行一些客制化设置,像是这个博客有对 pagefind 做一些额外的设置:

网页东东首页搜索范例

延伸阅读