Pagefind 构建流水线

选 Pagefind 的理由

• 零运行时依赖——索引是预构建的静态文件
• 中文友好——基于 Rust 写的 lunr.js 替代品
• 小——索引文件 100KB 起步
• 支持子串搜索和权重——比 Hugo 自身的 \.Site.Search 强太多

安装

npm install --save-dev pagefind

索引范围控制

默认 Pagefind 会索引整个 HTML 页面。问题：导航、侧栏、页脚的文字都会被搜到，结果全是 chrome。

解决方法：在不想被搜的元素上加 data-pagefind-ignore：

<nav data-pagefind-ignore>...</nav>
<footer data-pagefind-ignore>...</footer>

反过来，在想被搜的容器上加 data-pagefind-body：

<article data-pagefind-body>
  <h1>...</h1>
  <p>正文...</p>
</article>

构建命令

pagefind --site public --output-subdir pagefind

路径陷阱

pagefind.js 实际位置是 /pagefind/pagefind.js，不是 /_pagefind/pagefind.js（下划线 vs 短横线）。我之前因为这个 debug 了一小时。

性能

1 千篇文章索引耗时 3 秒，索引文件大小 2-3MB。完全够个人博客用。