---

title: 如何引入搜索功能到博客 date: 2024-06-07 16:00:00+8 tags: blog,search,algolia

algolia docsearch

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

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

接入步骤

三步就可以接入。

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

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

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

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

原理

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多条记录的数据。

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

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

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

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

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

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

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