PrimeEdge 主题教程

搜索

站内全文搜索功能

搜索

PrimeEdge 集成基于 Fuse.js 的客户端搜索,无需后端服务即可实现全文搜索。

搜索特点

  • 客户端搜索 — 基于 Fuse.js,无需服务器
  • 即时结果 — 输入即搜索,无延迟
  • 模糊匹配 — 支持拼写容错和近似匹配
  • 多字段搜索 — 搜索标题、内容、标签、分类
  • 键盘快捷键 — 按 / 快速打开搜索框

启用搜索

搜索功能默认启用,需要确保以下配置:

1. 输出 JSON 格式

hugo.toml 中配置:

[outputs]
  home = ["HTML", "RSS", "JSON"]
  page = ["HTML"]
  section = ["HTML", "RSS"]

JSON 输出用于生成搜索索引,必须包含。

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 -}}

3. 搜索按钮

主题导航栏已集成搜索按钮,点击后弹出搜索对话框。也可以使用键盘快捷键 / 快速打开。

搜索界面

搜索对话框包含:

  • 搜索输入框 — 输入关键词即时显示结果
  • 结果列表 — 显示匹配的文章标题和摘要
  • 高亮匹配 — 匹配的关键词在标题中高亮显示
  • 分类标签 — 结果项显示所属分类

搜索配置

hugo.toml 中可配置 Fuse.js 的搜索参数:

[params.search]
  enabled = true                    # 是否启用搜索
  placeholder = "搜索文章..."        # 输入框占位文字
  maxResults = 10                   # 最大显示结果数
  showTags = true                   # 是否显示标签
  showCategories = true             # 是否显示分类

Fuse.js 配置

主题默认使用以下 Fuse.js 配置:

  • keys: title, content, tags, categories
  • threshold: 0.3(匹配敏感度,越小越严格)
  • distance: 100
  • includeScore: true

如需调整,可修改主题中的搜索脚本。

使用技巧

  1. 精确匹配 — 用引号包裹关键词进行精确匹配
  2. 快捷键 — 任何页面按 / 快速呼出搜索
  3. ESC 关闭 — 按 ESC 键关闭搜索对话框
  4. 点击结果 — 点击搜索结果直接跳转到对应文章

排除页面

如不希望某篇文章出现在搜索结果中,在 Front Matter 中设置:

---
searchHidden: true
---

常见问题

Q: 搜索没有结果

检查 hugo.toml[outputs] 是否包含 JSON,并确认 layouts/_default/index.json 存在。

Q: 搜索框打不开

检查浏览器控制台是否有 JavaScript 报错,确认 Fuse.js 库已正确加载。

下一步

  • 归档 - 按时间浏览文章
  • 文章写作 - 优化文章标题和标签,提升搜索命中率

评论

0%