最开始我是想用 fuse.js，但是配置好了发现有些内容搜索不到，感觉对中文的模糊匹配可能有些问题。所以这里换成 pagefind 试试。

安装 pagefind

可以使用

npm i pagefind

我这里是直接去 github 上下载的二进制，下载的 pagefind-extend 这个版本，据说这个版本对中文分词更友好。
下载之后将 pagefind_extend 改名为 pagefind 放到 /usr/local/bin 里。

生成网站内容

在网站的根目录执行 hugo 命令生成好网页内容。

生成 pagefind 索引 

pagefind -s public/zh-cn --output-path=static/zh-cn/pagefind

Running Pagefind v1.1.0 (Extended)
Running from: "/Users/laily/Documents/write.laily.net"
Source:       "public/zh-cn"
Output:       "static/zh-cn/pagefind"

[Walking source directory]
Found 61 files matching **/*.{html}

[Parsing files]
Did not find a data-pagefind-body element on the site.
↳ Indexing all <body> elements on the site.

[Reading languages]
Discovered 1 language: zh-cn

[Building search indexes]
Total:
  Indexed 1 language
  Indexed 52 pages
  Indexed 8934 words
  Indexed 0 filters
  Indexed 0 sorts

Finished in 2.100 seconds

-s 是指网页内容的目录，hugo 一般都是 public 下，–output-path 是指生成的索引放到哪个目录，这里我在 static 下创建了 zh-cn/pagefind 目录，这里的 zh-cn 是为了配合我的多语言目录结构，没有多语言结果可以忽略。

配置搜索页面

fuse.js 的搜索页面体验最好，不过我暂时没空研究怎么实现，先用一个最实用的方案做出来再说。

新建 search 页面

首先要新建一个用于搜索的页面
在 content/zh-cn/ 下新建目录 search，然后在里面建文件 index.md
内容如下

---
title: "搜索"
layout: search
---

这里的意思是让 hugo 生成一个 public/zh-cn/search/index.html 的文件，这个文件的样式使用名为 search 的样式文件。

配置 search 页面的样式

在hugo 仓库里的 layouts/_default/ 目录下新建 search.html 文件，内容可以复制主题目录下的 layouts/_default/single.html 文件的内容。
然后把里面的 <div class='post-content'> xxx </div> 的内容改成下面的

<div class="post-content">
	<link href="/zh-cn/pagefind/pagefind-ui.css" rel="stylesheet">
	<script src="/zh-cn/pagefind/pagefind-ui.js" type="text/javascript"></script>
	<div id="search"></div>
	<script>
		window.addEventListener('DOMContentLoaded', (event) => {
			new PagefindUI({
				element: "#search",
			});
		});
	</script>
</div>

同样注意上面的 /zh-cn/pagefind/ 部分，我因为有多语言结构，所以前面有个 zh-cn，这里其实就是 /static/zh-cn/pagefind 这个路径，即上面 pagefind 生成时写的 output-path，然后去掉了最前面的 static。

配置完后可以用 hugo serve 本地访问 /zh-cn/search/ 看下效果，像我这里就出现了评论和版权说明的内容，就再去 search.html 文件里找到对应的 html 代码删除掉。

配置导航栏

在 config.yaml 里配置上导航页

- name: "搜索"
          weight: 50
          identifier: "search"
          url: "/zh-cn/search/"

参考

https://www.fournoas.com/posts/adding-full-text-search-to-a-hugo-static-website/
https://www.dianbanjiu.com/post/%E7%BB%99%E6%88%91%E7%9A%84blog%E5%8A%A0%E4%B8%8A%E6%90%9C%E7%B4%A2%E5%8A%9F%E8%83%BD/