pagefind

 1# 1. 运行 Pagefind 索引生成器
 2  pagefind --site XXX/public --output-subdir _pagefind --glob "**/*.html"
 3
 4  关键参数:
 5  - --site XXX/public - 指定已构建的 HTML 文件目录
 6  - --output-subdir _pagefind - 索引输出到 public/_pagefind/ 目录
 7  - --glob "**/*.html" - 扫描所有 HTML 文件（可通过 PAGEFIND_GLOB 变量自定义）
 8
 9
10  生成的索引文件 (XXX/public/_pagefind/):
11  - pagefind.js - 核心搜索引擎
12  - pagefind-ui.js - UI 组件
13  - pagefind-entry.json - 索引入口文件
14  - *.pf_meta - 元数据文件
15  - wasm.unknown.pagefind - WebAssembly 搜索模块
16
17  ---
18  2.前端集成 - 搜索功能实现
19
20  文件: XXX/search.js
21
22  核心流程:
23
24  A. 初始化 Pagefind (search.js:52-58):
25  // 延迟加载 Pagefind 模块
26  pagefind = await import('/_pagefind/pagefind.js');
27  console.log('[Search] Pagefind loaded successfully');
28
29  B. 打开搜索模态框 (search.js:95-100):
30  // Ctrl+K 或 Cmd+K 快捷键
31  document.addEventListener('keydown', (e) => {
32    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
33      e.preventDefault();
34      openModal();
35    }
36  });
37
38  C. 执行搜索 (search.js:190-220):
39  async function performSearch(query) {
40    // 调用 Pagefind API 搜索
41    const search = await pagefind.search(query);
42
43    // 获取完整结果数据（前 10 条）
44    const results = await Promise.all(
45      search.results.slice(0, 10).map(r => r.data())
46    );
47
48    // 显示结果
49    showResults(results);
50
51    // 保存搜索历史
52    saveSearchHistory(query);
53  }
54
55  D. 渲染搜索结果 (search.js:222-243):
56  function showResults(results) {
57    resultsList.innerHTML = results.map((result) => {
58      const title = result.meta?.title || '无标题';
59      const excerpt = result.excerpt || '';
60      const url = result.url || '#';
61
62      return `
63        <a href=" " class="tk-search-result-item">
64          <div class="tk-search-result-title">${title}</div>
65          ${excerpt ? `<div class="tk-search-result-excerpt">${excerpt}</div>` : ''}
66        </a >
67      `;
68    }).join('');
69  }
70
71  E. 搜索历史管理 (search.js:413-455):
72  - 使用 localStorage 存储最近 5 条搜索历史
73  - 支持点击历史记录快速搜索
74  - 支持删除单条历史记录
75
76  F. 键盘导航 (search.js:104-156):
77  - ↓ - 向下选择
78  - ↑ - 向上选择
79  - Enter - 确认选择/跳转
80  - ESC - 关闭模态框
81
82  ---
83  📁 4. 索引文件部署
84
85  所有索引文件生成在 XXX/public/_pagefind/ 目录，与静态站点一起部署：
86
87  public/
88  ├── _pagefind/
89  │   ├── pagefind.js              # 核心搜索引擎
90  │   ├── pagefind-ui.js           # UI 组件
91  │   ├── pagefind-entry.json      # 索引入口
92  │   ├── pagefind.zh-cn_*.pf_meta # 中文索引元数据
93  │   └── wasm.unknown.pagefind    # WebAssembly 模块
94  ├── index.html
95  └── ...
96
97  前端通过 /_pagefind/pagefind.js 路径直接访问索引。