PageFind 搜索（默认）#

PageFind 是一个静态网站搜索工具，无需后端服务，适合中小型博客。

特点：

• 纯静态，无需后端服务
• 自动索引网站内容
• 支持全文搜索
• 响应速度快
• 支持中文搜索

1. 确保搜索框显示#

在 navbarConfig.ts 中配置：

1
export const navBarSearchConfig: NavBarSearchConfig = {
2
    method: NavBarSearchMethod.PageFind,
3
};

2. 构建时生成索引#

PageFind 会在构建过程中自动生成搜索索引：

1
# 构建网站（自动生成搜索索引）
2
npm run build

1. 搜索结果显示优化#

PageFind 会自动处理搜索结果的显示，包括：

• 关键词高亮
• 相关度排序
• 内容摘要
• 标题和链接

2. 搜索范围配置#

默认搜索范围：

• 文章标题
• 文章内容
• 标签和分类
• 页面标题

排除特定内容：

在页面或文章的 frontmatter 中添加：

1
---
2
title: 我的文章
3
search: false  # 排除此页面不被搜索
4
---

1. 自定义搜索框样式#

在 src/styles/global.css 中修改：

1
/* 搜索框样式 */
2
.search-input {
3
    border: 1px solid var(--border-color);
4
    border-radius: 8px;
5
    padding: 8px 12px;
6
    width: 200px;
7
    transition: all 0.3s ease;
8
}
9

10
.search-input:focus {
11
    width: 250px;
12
    border-color: var(--primary);
13
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
14
}

2. 搜索快捷键#

PageFind 支持以下快捷键：

• Ctrl/Cmd + K - 聚焦搜索框
• Esc - 关闭搜索结果
• Enter - 打开第一个搜索结果
• Arrow keys - 导航搜索结果

1. Algolia 搜索（可选）#

优点：

• 更强大的搜索功能
• 实时搜索建议
• 更精准的结果排序
• 支持更多高级搜索特性

集成步骤：

1. 创建 Algolia 账号

   • 访问 Algolia
   • 创建应用和索引

2. 安装依赖

   1
   npm install algoliasearch instantsearch.js

3. 创建搜索组件

   1
   import algoliasearch from 'algoliasearch';
   2
   import { InstantSearch, SearchBox, Hits } from 'instantsearch.js';
   3
   
   4
   const searchClient = algoliasearch(
   5
     'YOUR_APP_ID',
   6
     'YOUR_SEARCH_API_KEY'
   7
   );
   8
   
   9
   // 初始化 InstantSearch
   10
   const search = InstantSearch({
   11
     indexName: 'YOUR_INDEX_NAME',
   12
     searchClient,
   13
   });

4. 配置 Algolia 爬虫

   • 在 Algolia 后台配置爬虫
   • 定期抓取网站内容

2. Google 站点搜索（可选）#

优点：

• 利用 Google 的搜索能力
• 无需维护索引
• 支持高级搜索语法

集成步骤：

1. 创建 Google 自定义搜索

   • 访问 Google 自定义搜索
   • 创建搜索引擎

2. 获取搜索 ID

   • 复制搜索引擎 ID

3. 添加搜索框

   1
   <form action="https://cse.google.com/cse.js" method="get">
   2
     <input type="hidden" name="cx" value="YOUR_SEARCH_ENGINE_ID">
   3
     <input type="search" name="q" placeholder="搜索...">
   4
     <button type="submit">搜索</button>
   5
   </form>

1. 本地测试#

1
# 构建网站（生成搜索索引）
2
npm run build
3

4
# 预览构建结果
5
npm run preview

2. 测试搜索功能#

• 打开网站
• 点击搜索图标
• 输入关键词测试
• 检查搜索结果是否准确

Q: 搜索结果不显示？#

1. 确保已运行 npm run build 生成搜索索引
2. 检查页面是否被排除在搜索之外
3. 清除浏览器缓存
4. 检查 PageFind 配置

Q: 搜索速度慢？#

1. 减少页面内容大小
2. 优化图片和资源
3. 考虑使用 Algolia 等专业搜索服务
4. 检查网络连接

Q: 中文搜索效果不好？#

1. PageFind 对中文支持良好
2. 确保文章使用 UTF-8 编码
3. 避免使用过于生僻的词汇
4. 考虑使用专门的中文搜索服务

Q: 如何排除特定内容？#

1. 在页面 frontmatter 中添加 search: false
2. 在 pagefind.yml 配置文件中设置排除规则
3. 使用 data-pagefind-ignore 属性标记元素

Q: 搜索框不显示？#

1. 检查 navbarConfig.ts 中搜索配置是否正确
2. 确认导航栏是否有足够空间显示搜索框
3. 检查 CSS 样式是否隐藏了搜索框
4. 清除浏览器缓存