作为'api工程师',平时少不了要去vue或react官方文档来搜索api,在享受精确搜索的同时,有想过该如何将`Algolia`集成到自己的项目里面吗?这篇文章主要分享自己使用时的`坎坷`历程...
版本信息:
Algolia for JavaScript (4.8.5); Browser (lite); docsearch (3.5.0); docsearch-react (3.5.0); docsearch.js (3.5.0)
Algolia
说起Algolia,可能大家会有点陌生,但如果你看过vue或react的文档,那你大概率用过他们的搜索,以下图vue
搜索为例:
从右下角那几个字可以看出vue的搜索服务是algolia提供的
Algolia
: 是一家美国的创业公司,通过SaaS(软件即服务)模式提供网络搜索产品。通过使用外部托管的搜索引擎为客户的网站提供网络搜索服务...form -> wikipedia
除了vue、react,基本上现代前端开源项目的文档搜索大多都是用的这个。
上车
已经有这么多大佬级框架都在用,而且Algolia
提供一站式的服务,不仅帮提供app托管管理后台,还有爬虫管理后台方便配置。既然功能强大有好用,那咱也不能落后啊,赶紧安排上,于是按照vuepress的教程就申请用上了,按理说一个幸福美满的故事就此开始了
翻车
一直幸福美满下去到此也就结束了,没啥可总结的,但是,在一次配置未生效后(可能是缓存原因),竟然手残的删除了账户,想着大不了重新申请一个就完了,可谁知道重新申请直接提示已经把凭证发给我了
,但是那是老的啊,尝试用另一个邮箱申请也是同样提示,重新使用老邮箱注册账号竟然提示说已经被拉进黑名单了!
shit!
申请:你需要 提交你的网站 URL 来加入 DocSearch 项目。当你的索引成功创建后, DocSearch 团队会将 apiKey 和 indexName 发送到你的邮箱。接下来,你就可以配置该插件,在 VuePress 中启用 DocSearch 了。
注册: 注册algolia 提供的应用管理后台,用来做搜索应用的定制化配置(我是在申请成功前,提前注册了,如果是等申请的话好像是不用手动注册的,对方发邮件后,点击接受邀请链接就可以进去了)
猜测是我的域名还存在他们的系统记录里,所以不能生成新的凭证,应该是一个域名下只能申请一次,那总不能换域名吧? 既然常规流程走不通,那就试试人工吧,发邮件说明问题后,得到的回复竟然是
txt
The application you've requested help for is currently on a 'DocSearch' plan, which is a free product we offer. This doesn't include technical web support.
大意就是说他们提供的是免费产品,不包括技术支持,那合着意思就是不付费不给帮助了?话说回来,付费是不可能的,免费额度10w/month
,个人玩玩绰绰有余了,根本到不了付费上限,现在的问题是,有没有其他官方提供的白嫖渠道呢😋
其他搜索方案
本地搜索
:其实在之也用过本地搜索,所谓本地搜索,就是根据页面在本地生成搜索索引,然后在用户访问站点时加载搜索索引文件,属于轻量级的搜索解决方案。
问题
:站点小页面少的情况下还勉强可以接受,页面比较多时,搜索索引文件也会变得非常大,它可能会拖慢页面的加载速度,体验属实不行form -> vuepress-search
另谋出路
目前申请是不行了,感觉域名被锁定了,老的邮箱也不能用,那就看看有没有其他方式了挽救一下,老规矩,看官方文档, 一番翻阅文档找到了run-your-own,还真可以手动爬。
既然常规流程走不通,那就自己玩吧
创建algolia账号
老邮箱是不能用了,用新的邮箱注册algolia,重新建应用,然后创建索引,应用名称和索引名称自己定就行
配置爬虫环境
运行爬虫之前,需要先准备好一些配置文件
.env(环境变量)
首先在运行的根目录新建.env
文件,需要将 Algolia 应用程序 ID 和管理 API 密钥设置为环境变量。
sh
APPLICATION_ID=YOUR_APP_ID
API_KEY=YOUR_API_KEY
在概述页可以看到API keys
入口,查看方式如下:
打开后,复制红色框中的变量,爬虫需要对索引有写入权限,所以这里使用Admin API Key
,而绿色框中的APIKey只有搜素权限,是前端用的, 后面会提到
爬虫规则配置
启动的时候要传入爬虫规则配置文件,里面需要配置站点相关的信息以及爬取内容的逻辑,我目前的配置如下,这个后面搜索结果优化再细说具体字段
js
{
"index_name": "huanwu",
"sitemap_urls": [
"https://zhaopanpan.com/sitemap.xml"
],
"start_urls": [
{
"url": "https://zhaopanpan.com/talks.html",
"selectors_key": "talks",
"tags": [
"talks"
]
},
{
"url": "https://zhaopanpan.com/about.html",
"selectors_key": "about",
"tags": [
"about"
]
},
{
"url": "https://zhaopanpan.com/posts/javascript",
"page_rank": 1,
"selectors_key": "javascript",
"tags": [
"javascript"
]
},
"https://zhaopanpan.com"
],
"selectors": {
"javascript": {
"lvl0": {
"selector": "",
"default_value": "Javascript"
},
"lvl1": ".theme-default-content h1",
"lvl2": ".theme-default-content h2",
"lvl3": ".theme-default-content h3",
"lvl4": ".theme-default-content h4",
"lvl5": ".theme-default-content h5",
"lvl6": ".theme-default-content h6",
"content": ".theme-default-content p, .theme-default-content li"
},
"about": {
"lvl0": {
"selector": "",
"default_value": "关于"
},
"lvl1": ".theme-container h1",
"lvl2": ".theme-container h2",
"lvl3": ".theme-container h3",
"lvl4": ".theme-container h4",
"lvl5": ".theme-container h5",
"lvl6": ".theme-container h6",
"content": ".theme-container p, .theme-container li"
},
"talks": {
"lvl0": {
"selector": "",
"default_value": "技术分享"
},
"lvl1": ".theme-container h1",
"lvl2": ".theme-container h2",
"lvl3": ".theme-container h3",
"lvl4": ".theme-container h4",
"lvl5": ".theme-container h5",
"lvl6": ".theme-container h6",
"content": ".theme-container p, .theme-container li"
},
"default": {
"lvl0": {
"selector": "",
"default_value": "文章"
},
"lvl1": ".theme-default-content h1",
"lvl2": ".theme-default-content h2",
"lvl3": ".theme-default-content h3",
"lvl4": ".theme-default-content h4",
"lvl5": ".theme-default-content h5",
"lvl6": ".theme-default-content h6",
"content": ".theme-default-content p, .theme-default-content li"
}
}
}
运行爬虫
之前正常的时候是官方提供爬虫收集索引,我直接在前端结合相关UI库配置应用和索引信息就行,现在申请不过没有爬虫了,只能自己跑了。。。
官方提供了两种方式:
电脑本来就有docker,装了jq就可以跑了,运行以下命令:
sh
docker run -it --env-file=.env -e "CONFIG=$(cat ./config.json | jq -r tostring)" algolia/docsearch-scraper
这时候如果配置无误,应该会看到类似下面爬取的内容信息
Nb hits:1006
说明此次爬取成功命中的索引数量,这时去Algolia管理后台看下,显然刚才爬取的索引都已经记录成功了,perfect!
前端UI
到这一步说明爬虫已经就绪,如何在前端验证呢,最好能直接搜索一下,Algolia已经贴心准备了playground,准备好appId、apiKey、indexName
三个变量,这里的apiKey
就是上面环境变量截图的绿色框中的值,其他两个变量就不用说了,上面都有提过,配好后,随便搜个关键字,有结果说明已经成功了!很nice不是!🎉
关于如何选择:
- 可以直接使用Algolia提供的@docsearch/js,在前端直接调用,做UI渲染(此插件是React写的)。
- 本blog基于vuepress2,直接用了官方封装好的@vuepress/plugin-docsearch@next插件,这里不在赘述。
- UI这块的生态还是比较丰富的,很多框架基于Algolia的
@docsearch/js
做了上层装,有web生态的包,也有移动端的,Algolia做了收集,可以去search-ui看看。
搜索结果优化
其实到这一步搜索功能已经可以用了,但是仔细看了下vue的搜索结果,都会根据该关键字,把主题或上级标题显示出来,层次分明,一目了然,使用者很容易找到自己想要的信息,明人不说暗话,我也想要这样的效果
这里说一下我是如何优化爬虫规则配置了,官方配置文档比较干,我也是通过尝试才确定上面配置的,主要说下比较重要的字段:
index_name
管理端索引名称
sitemap_urls
这个字段很关键,sitemap
基本包含了所有的页面,爬虫通过它可以很轻松的来收集索引,至于如何生成sitemap
,网上有很多工具可用
当时写成了
https: //zhaopanpan.com/sitemap.xml
多了个空格,硬是爬了个寂寞
start_urls
start_urls
可传入一个数组,里面包含可以抓取网站的地址 start_urls
可传入一个数组,里面包含可以抓取网站的地址
json
{
"start_urls": [
{
"url": "https://zhaopanpan.com/posts/javascript",
}
]
}
selectors
选择器部分是很关键的,想要实现的效果主要靠他实现。
加入我要对某个start_urls
地址做特殊处理,我可以给他加个selectors_key
,一个自定义的值(就好比我要操作dom的时候要给节点加一个id
),加了一个叫javascript
的选择器之后,就可以在后面的selectors
对javascript
进行详细配置
json
{
"start_urls": [
{
"url": "https://zhaopanpan.com/posts/javascript",
"selectors_key": "javascript",
"page_rank": 1,
"tags": [
"javascript"
]
}
],
"selectors": {
"javascript": {
"lvl0": {
"selector": "",
"default_value": "Javascript"
},
"lvl1": ".theme-container h1",
"lvl2": ".theme-container h2",
"lvl3": ".theme-container h3",
"lvl4": ".theme-container h4",
"lvl5": ".theme-container h5",
"lvl6": ".theme-container h6",
"content": ".theme-container p, .theme-container li"
},
}
}
lvl0-lvl6
都是用于创建记录层级结构的选择器,lvl0
的selector
我故意留空,我给他加了默认值,他就可以给我显示标题了
page_rank
结果排名
根据需要可以调整搜索结果的顺序
验证优化效果
重新执行上面docker命令,很符合预期有木有?
总结
写这篇文章的前一周,搜索功能还是好好的,无奈手残删除了账户,导致原来正常的功能无法使用,本寄希望于官方技术支持来救火,但无奈对方客服太极功力深厚,几回合下来,小弟不出意外败下阵来,不得不另寻出路。
幸好官方提供了手动执行爬虫的方式,一番猛虎操作下来,不仅恢复了翻车前的功能,通过自定义爬虫配置,还实现了一些搜索结果自定义的优化,也不枉周日一个下午的奋战了