最近发现站点的搜索不太正常，我在需要查找之前的文章时发现按标题搜却怎么都搜索不到，哪怕是英语文章这种理论上不应该出现分词问题的文章也找不到。
那么，正好捋一下在 11ty 中需要怎么接入 Pagefind 做搜索吧，也许是哪里配置有问题？
其实 Pagefind 和 11ty 本身的关系并不大：Pagefind 是一个静态站点索引生成和搜索工具，它并不和任何一个站点生成器绑定。这意味着你可以选用诸如 Hugo 或者 Hexo 等其他静态站点生成器，它们接入 Pagefind 的过程都基本一致。
安装 Pagefind:
npm i pagefind
编辑 package.json, 添加一个新的指令启动 Pagefind 的索引生成：
{
"scripts": {
"build-index": "npx pagefind --site _site"
}
}
Pagefind 是通过直接解析生成后的 HTML 文件来构建索引的，所以需要先把站点通过 11ty 构建出来，再运行 npm run build-index 构建页面索引。Pagefind 会将必要的 CSS, JS 和索引文件输出到 _site/pagefind 文件夹下。
如果你需要构建站点的时候一并构建 Pagefind 的索引，那么也可以把这个指令追加到 build 条目里：
{
"scripts": {
"build": "npx @11ty/eleventy && npx pagefind --site _site"
}
}
编辑页面模板，告诉 Pagefind 正文内容在哪里：
<body>
<!-- 在正文的父容器中添加 data-pagefind-body 属性 -->
<article data-pagefind-body>
<!-- 这里是你的正文 -->
</article>
</body>
如果你的标题并不是用 <h1> 之类的传统标题，或者 <h1> 已经被用作站点大标题，而文章的标题是用其他元素表示的，也可以告诉 Pagefind 以给定的元素内容为基准：
<h2 data-pagefind-meta="title">Hello!</h2>
<!-- 将 h2 设置为文章标题 ^ -->
再新增一个页面接入 Pagefind 的搜索框：
<!-- 下面这个样式表需要修改成你对应存放 Pagefind 样式表的地址 -->
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<!-- 下面这个 div 会存放 Pagefind 的全部内容 -->
<div id="search" class="search"></div>
<!-- 下面这个脚本的地址也要跟随你的具体配置一并修改 -->
<script src="/pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#search', showImages: false });"></script>
<!-- ^ 如果你改了 div 框框的 id, 也需要修改这里的名字 -->
这样就足够了，没有太多活动部件。当然，如果你还有自定义 UI 的需求，比如使用模态搜索框而不是用一个单独页面的话，则可以参考官方文档中的 UI 自定义相关的内容；以及，如果你还有更细化的需求，比如设置过滤、排序或者调整不同内容的权重，则也可以参考官方文档
捋了一圈下来，没发现什么问题。不过扫了一眼 GitHub, 发现 Pagefind 在 1.5.0 中修改了标题不参与搜索的重要问题，更新包之后重建索引，问题解决。
正在加载评论……