跳过正文
  1. Blogs/

三 为博客添加搜索功能

·961 字·2 分钟· loading · loading · ·
博客
柴西
作者
柴西
记住也好,记不住也好,反正名头不重要。
目录

视博客主题而定,有的博客主题不用进行下面的配置也能实现搜索功能,有的博客支持自定义搜索方式。下文针对曾使用过的主题hugo-NexT主题添加搜索功能。

hugo-next/hugo-theme-next

Easily & powerful theme for Hugo engine.

SCSS
202
38

博客搭建逐渐完善,博文内容也逐渐增多,添加搜索功能可以很方便的检索内容,需要博客主题支持。

Algolia 是一款快速、可靠和易于使用的搜索服务,旨在提高应用程序和网站的搜索体验,具有先进的搜索和过滤功能,可提供高质量的搜索结果和排名。此外,Algolia 提供了一系列工具和 API,使得搜索和查询数据变得更加容易和灵活。

algolia免费账户单条索引大小上限10K,商用账户单挑索引大小上限20K

在NexT主题中开了algolia搜索后需把本地搜索关闭,不然页面不会正常显示。

一 注册 Algolia
#

前往 Algolia官网地址注册帐号后,创建一个 「Free Application」

3搜索功能01

随后,选择存储的数据中心,可以根据实际地理位置就近进行选择,Algolia 也会根据网络情况推荐选用哪个数据中心,便于提供更快的搜索服务。

中国大陆的网站一般建议选择新加坡 (Singapore) 或香港 (Hong-Kong) 的数据中心。但目前这几个节点都需要联系官方开通,嫌麻烦的话随机选一个就好,实测网络也没有多差。

点击「Review」后进入确认界面,接受使用条款并创建即可。一般情况下小网站 Algolia 提供的免费额度是充足的,无需太过担心不够用的问题。

3搜索功能02

3搜索功能03

1.1 创建索引
#

点击「Search」导航栏后,进入搜索配置,创建一个索引。

3搜索功能04

1.2 获取 Application ID 和 API Key
#

点击左下角「Setting」菜单,在设置中找到「Team and Access」->「API Keys」

3搜索功能05

可以获取到对应应用的四个 Key,分别如下:

  • Application ID:应用唯一标识符。它用于在使用 Algolia 的 API 时识别我们的网站。
  • Search-Only API Key:用于在应用或前端代码中使用搜索服务时调用的公共 API 密钥。只可用于搜索查询和向 Insights API 发送数据。
  • Admin API Key:用于创建、更新和删除索引数据。也可以用它来管理 API 密钥。
  • Usage API Key:用于访问 API 用量和日志 Endpoint。

3搜索功能06

二 上传.json文件
#

使用支持搜索功能的主题。

2.1生成 algolia.json
#

博客根目录执行 hugo 命令后,会在 public 目录下生成 algolia.json 文件,内容为被压缩后的单行有效 JSON

2.2 将索引上传至 Algolia
#

生成 algolia.json 后,你可以将JSON文件内容通过 Algolia Web 通过文件或手动粘贴 JSON 上传,均可完成索引导入。

3搜索功能07

导入上传成功后,在博客网站上就可以进行检索了。