如何引入搜索功能到博客

5 min read,created at 2024-06-07
blogsearchalgolia

algolia docsearch

algolia docsearch是目前最优的解决方案,这是一个第三方的云服务,但是对于技术类的博客和问题提供了免费的全文搜索引擎。

简单的理解,就是他会对技术类的博客和文档提供类似ES的全文搜索引擎的免费功能

接入步骤

三步就可以接入。

第一步:到官网申请,只需要输入你的博客网址和邮箱信息即可申请,如下图。

image

申请完毕后,会有一条邮件提醒,并且在大概24h内会收到第二封邮件,恭喜通过,并提供了一些信息,点击accept这一行的连接,会让你注册一个algolia的账号,然后就进入到系统了。

image

第二步:直接copy邮箱中的css和js代码到一个html文件中,并创建一个div用于渲染搜索框,代码如下

img

打开页面就有一个搜索框了,我们输入一些个人博客中的文字(中文也可),就能够搜索到内容,并且点击该选项就能跳转到对应的页面。

image

原理

algolia是一个全文索引的存储云服务,可以认为他是个ES,他的网址是https://www.algolia.com

algolia crawler是一个爬虫工具,他会根据我们提供配置,爬取相关页面中的内容,然后将内容存储到algolia的云服务中。他的网址是https://crawler.algolia.com

algolia docsearch将两者结合,简化了流程,只需要提供给他一个网站url,会自动帮我们创建algolia索引,他的网址是https://docsearch.algolia.com/

以上三者的概念先搞清楚,这样就很容易理解这个搜索是怎么工作的了,就是一个爬虫+一个存储。

我们用之前申请的邮箱注册的algolia账号,进入到crawler,可以看到当前自动发现了200多个url,3k多条记录的数据。

img

可以登陆爬虫的这个页面,能看到有一个帮我们配置好的爬虫。

在申请通过后,algolia docsearch会自动生成一个index的索引,这个索引中包含了我们博客中的所有内容,并且会根据我们博客的网址进行索引,索引的过程是通过crawler爬虫来完成的,爬虫会根据网址的

再说第二步之前,可以先去体验一下algolia提供的全文索引的功能。进入dashboard,在这里可以看到有一条提醒,是有个应用邀请你加入

image

接受邀请后,切换到这个应用,然后点击旁边的search

image

然后在自己的文档中随便找半句话,在索引中搜索,效果如下,此时已经达到了全文索引的效果。

image

editor配置中可以看到爬虫的根路径,匹配的网址,以及一些其他的配置,如果有特殊需求的话,可自行修改。 这里专门说一下recordProps这一部分,以lv1: [header h1, article h1, main h1, h1, head > title]为例它是指,爬取的页面中符合以上css选择器的dom元素的innerText作为当前记录的lv1字段

img

可以到dashboard的索引中查看记录,会发现有lv1等等这些配置好的字段。

img