使用 Algolia 云引擎，实现个人博客 Hugo 本地智能搜索

最新推荐文章于 2025-07-23 15:55:08 发布

原创

最新推荐文章于 2025-07-23 15:55:08 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#github

本文介绍了如何利用Algolia云引擎为个人博客Hugo搭建本地智能搜索功能。从修改配置文件、添加模版到创建Algolia账户、构建索引数据，再到构建搜索页面，一步步详细阐述了实现过程。每月提供10000次免费搜索，适合博客作者增强用户体验。

一直想实现博客的本地搜索，没有找到好的实现方式。尝试了好几个方案，现在使用 Algolia 实现本地搜索。实现方式简单，每月可搜索 10000 次，可以一直白票下去

构建数据

1、修改配置文件

修改 config.toml，配置生成 algolia.json 文件

[outputs]
  home = ["HTML","RSS","TXT","Algolia"]
  section = ["HTML"]
  taxonomy = ["HTML"]
  term = ["HTML"]

[outputFormats.Algolia]
  mediaType = "application/json"
  baseName = "algolia"
  isPlainText = true

2、添加模版文件

创建文件/layouts/_default/list.algolia.json

[
  {
  
  {- range $index, $entry := .Site.RegularPages }}
  {
  
  {- if $index }}, {
  
  { end }}
  {
    "objectID": {
  
  { .File.TranslationBaseName }},
    "url": {
  
  { .Permalink | jsonify }},
    "title": {
  
  { .Title | jsonify }},
    "summary": {
  
  { .Summary | jsonify }},
    "content": {
  
  { .Plain | jsonify }},
    "pubDate": {
  
  { .PublishDate | jsonify }}
  }
  {
  
  {- end }}
]

注：objectID为algolia中的数据ID，可以用此ID进行CURD操作

3、生成数据文件

运行hugo，生成数据文件algolia.json

[
  {
    "objectID": 20210522,
    "url": "https://ichochy.com/posts/20210522/",
    "title": "使用 Algolia 云引擎，实现个人博客 Hugo 本地智能搜索",
    "summary": "现在使用 Algolia 实现本地搜索。实现方式简单，每