搜索功能
配置站内搜索
搜索功能
PrimeEdge 集成基于 Fuse.js 的客户端搜索，无需后端服务即可实现全文搜索。
搜索特点
- 客户端搜索: 基于 Fuse.js，无需服务器
- 即时结果: 输入即搜索，无延迟
- 模糊匹配: 支持拼写容错
- 多字段搜索: 搜索标题、内容、标签
- 键盘快捷键: 按
/快速打开搜索
启用搜索
搜索功能默认启用，需要确保以下配置：
1. 输出 JSON 格式
在 hugo.toml 中配置：
[outputs]
home = ["HTML", "RSS", "JSON"]
page = ["HTML"]
section = ["HTML", "RSS"]
[outputFormats]
[outputFormats.Search]
mediaType = "application/json"
baseName = "search"
isPlainText = true
2. 创建搜索索引模板
创建 layouts/_default/index.json：
{{- $.Scratch.Add "index" slice -}}
{{- range site.RegularPages -}}
{{- $.Scratch.Add "index" (dict "title" .Title "content" .Plain "permalink" .Permalink "summary" .Summary "tags" .Params.tags "categories" .Params.categories) -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}
使用方法
打开搜索
- 点击导航栏搜索图标
- 按键盘
/键 - 在搜索页面直接输入
搜索语法
| 语法 | 说明 | 示例 |
|---|---|---|
| 关键词 | 模糊匹配 | hugo |
| 精确匹配 | 引号包裹 | "hugo theme" |
| 多关键词 | 空格分隔 | hugo blog |
搜索结果
搜索结果包含：
- 文章标题
- 匹配内容片段
- 发布日期
- 标签和分类
点击结果直接跳转到对应文章。
搜索配置
Fuse.js 配置
编辑 static/js/search.js 调整搜索行为：
var options = {
keys: [
{ name: 'title', weight: 0.8 }, // 标题权重 80%
{ name: 'content', weight: 0.5 }, // 内容权重 50%
{ name: 'tags', weight: 0.3 }, // 标签权重 30%
{ name: 'categories', weight: 0.3 } // 分类权重 30%
],
threshold: 0.3, // 匹配阈值（0-1，越小越严格）
distance: 100, // 最大匹配距离
includeScore: true // 包含匹配分数
};
调整权重
根据需求调整字段权重：
- 标题权重高：更容易找到特定文章
- 内容权重高：更容易找到相关内容
- 标签权重高：分类搜索更精准
搜索页面
创建 content/search.md 作为搜索页面：
---
title: "搜索"
layout: "search"
---
自定义搜索样式
添加自定义样式到 static/css/custom.css：
/* 搜索框样式 */
.search-input {
border-radius: 8px;
padding: 12px 16px;
}
/* 搜索结果高亮 */
.search-highlight {
background: yellow;
padding: 2px 4px;
}
/* 搜索结果卡片 */
.search-result-item {
transition: transform 0.2s;
}
.search-result-item:hover {
transform: translateX(8px);
}
搜索优化
提升搜索体验
- 优化标题: 使用包含关键词的清晰标题
- 完善标签: 为文章添加相关标签
- 控制摘要: 确保文章摘要有意义
- 定期重建: 发布新内容后搜索自动更新
限制搜索范围
如需排除某些页面，修改索引模板：
{{- range site.RegularPages -}}
{{- if not .Params.no_search -}}
{{- $.Scratch.Add "index" (dict ...) -}}
{{- end -}}
{{- end -}}
在文章 Front Matter 中添加：
---
no_search: true
---
搜索统计
可以添加搜索分析，了解用户搜索行为：
// 记录搜索关键词
document.querySelector('.search-input').addEventListener('input', function(e) {
if (e.target.value.length > 2) {
// 发送到分析服务
gtag('event', 'search', { query: e.target.value });
}
});
多语言搜索
多语言站点需要为每种语言创建独立的搜索索引：
[languages]
[languages.zh]
weight = 1
contentDir = "content/zh"
[languages.en]
weight = 2
contentDir = "content/en"
每种语言会有独立的 /search.json。
故障排查
搜索无结果
- 检查
index.json是否正确生成 - 检查 Fuse.js 是否正确加载
- 检查搜索索引是否为空
搜索速度慢
- 减少索引字段
- 限制索引文章数量
- 使用分页加载结果
中文搜索不准确
Fuse.js 对中文支持有限，可以：
- 调整
threshold参数 - 使用更宽松的匹配策略
- 考虑使用 Pagefind 替代
替代方案
如需更强大的搜索，可以考虑：
Pagefind
静态搜索解决方案，支持中文分词：
npx pagefind --site public
Algolia DocSearch
免费的开源项目搜索服务：
- 申请 DocSearch
- 配置 API Key
- 集成搜索组件
Comments