为 Nobelium 博客集成 Algolia DocSearch
date
Jan 6, 2023
slug
integrate-algolia-docsearch-with-nobelium-blog
status
Published
tags
life
BlogOps
summary
type
Post
前言
Nobelium 博客的使用体验很好,但在搜索功能上,我眼馋各种使用 Algolia DocSearch 的网站那“一步直达”的搜索体验,于是研究了一下在自己的博客上实装。
![像它一样](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa6d15db8-5f42-46c6-9f66-a8d63afbafd0%2FUntitled.png?table=block&id=7c9937b9-05a4-46c4-b0e2-1c9c32215bbc&cache=v2)
安装
首先注册 Algolia 账户并创建一个 Application.
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fbd31032f-29c1-4a31-b289-138a100e95d0%2FUntitled.png?table=block&id=c8db8aa7-393d-4df8-9913-28e025868e53&cache=v2)
因为使用 current 版本的 Algolia DocSearch 需要提交申请,对网站内容有要求并且时间比较漫长,故选择可自行部署的 legacy 版本(已停止维护,但仍然可用)
接下来只要做两件事:①运行官方提供的爬虫,爬取网站内容并上传至 Algolia;②将 SearchBox 组件代码添加到 Nobelium 中。
爬取网站内容
参考官方文档,本文使用 Docker 镜像运行爬虫。
配置环境变量
方便起见,可以创建
.env
文件存放 API KEY. 此处的 API_KEY 需具有写权限,应使用 Admin API Key. (Please keep it secret and use it ONLY from your backend)编写配置文件
针对 Nobelium 生成的网站,我摸索出的 selectors 如下,作为参考:
存在的缺陷:没有覆盖到行内链接。
关于配置文件的更详细说明请查阅官方文档。
运行 Docker 镜像
首先需要安装 jq,用于解析 JSON.
然后执行此命令(因为爬取是一次性的,建议添加
--rm
参数,退出后自动删除)结果如图:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9f3b770c-e2a8-4023-90f5-52eff8b8a1fc%2FUntitled.png?table=block&id=d18088f4-2cb8-48e8-a2e4-f5a5b97372cf&cache=v2)
在 Algolia Dashboard 上检查结果是否符合自己的要求:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9d09eb43-ca36-4b18-907c-6a591d1cbd2c%2FUntitled.png?table=block&id=d4d2b66f-9c27-42fe-a83e-770ec106cbcb&cache=v2)
添加搜索 UI
Algolia 提供了开箱即用的组件。
docsearch
algolia • Updated Nov 21, 2023
参考修改方法如下:
安装
@docsearch/react
修改
components/Header.js
成果展示
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb0d5db59-ec1b-4e47-9a89-cf949152c69a%2FUntitled.png?table=block&id=498e7624-6883-467a-abd3-1cccdba6e8dc&cache=v2)
自动化
待补充