Pagefind让我很高兴。它是一个静态搜索库，配置和使用起来非常简单，我简直不敢相信。以下是我如何在 Anubis2 Hugo 主题1中实现 Pagefind 搜索的快速总结。
我首先创建 content/search.md 作为搜索页面的内容。在该文档中，我粘贴了Pagefind 入门文档中的默认代码…
< link href = "/pagefind/pagefind-ui.css" rel = "stylesheet" > < script src = "/pagefind/pagefind-ui.js" ></ script > < div id = "search" ></ div > < script > window .addEventListener( 'DOMContentLoaded' , (event) => { new PagefindUI({ element : "#search" , showSubResults : true }); }); </ script >
为了构建搜索索引，我通过 NodeJS 运行它，如下所示：
npx -y pagefind --site public
就是这样！这就是技术上所需要的全部。运行索引器会创建索引并将必要的支持（css/js）文件放入 public/pagefind/ 中。只需部署站点2并访问 /search。
默认情况下，Pagefind 索引<body>元素中的所有内容。这太多了，所以我将data-pagefind-body添加到“single.html”模板中仅包含帖子内容的元素中。
< div data-pagefind-body class = "content e-content" > </ div >
对于标题，我需要<H1>元素中的data-pagefind-meta="title" ：
< h1 data-pagefind-meta = "title" class = "p-name post-title favorite draft" ></ h1 >
我在导航中放了一个小搜索图标。这一切花了我不到 30 分钟的时间。太疯狂了。
我确信我会进一步调整，但开箱即用的体验非常棒。
原文： https://baty.net/posts/2025/01/adding-pagefind-search-to-hugo/