如何手动跑algolia的爬虫并集成到自己的项目呢🤔


作为'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,可能大家会有点陌生,但如果你看过vuereact的文档,那你大概率用过他们的搜索,以下图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库配置应用和索引信息就行,现在申请不过没有爬虫了,只能自己跑了。。。

官方提供了两种方式:

  • 镜像运行(推荐):依赖dockerjq(json解析器),好办
  • 本地跑代码:先clone爬虫代码库到本地,需要配置项目运行环境,安装运行依赖,然后才能启动,略显麻烦,故pass

电脑本来就有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的选择器之后,就可以在后面的selectorsjavascript进行详细配置

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都是用于创建记录层级结构的选择器,lvl0selector我故意留空,我给他加了默认值,他就可以给我显示标题了

page_rank

结果排名

根据需要可以调整搜索结果的顺序

验证优化效果

重新执行上面docker命令,很符合预期有木有?

总结

写这篇文章的前一周,搜索功能还是好好的,无奈手残删除了账户,导致原来正常的功能无法使用,本寄希望于官方技术支持来救火,但无奈对方客服太极功力深厚,几回合下来,小弟不出意外败下阵来,不得不另寻出路。

幸好官方提供了手动执行爬虫的方式,一番猛虎操作下来,不仅恢复了翻车前的功能,通过自定义爬虫配置,还实现了一些搜索结果自定义的优化,也不枉周日一个下午的奋战了

相关推荐
水w5 天前
VuePress v2 快速搭建属于自己的个人博客网站
开发语言·前端·vue·vuepress
寒山李白2 个月前
VuePress搭建文档网站/个人博客(详细配置)主题配置-侧边栏配置
前端·vue.js·vue·博客·vuepress·网站
星石传说4 个月前
vuepress搭建个人文档
项目·vuepress·个人文档
xrl20124 个月前
vuepress 配置文件分类管理
vuepress
PeterJXL4 个月前
自建搜索引擎-基于美丽云
搜索引擎·博客·博客搭建·vuepress·美丽云
PeterJXL5 个月前
VuePress 的更多配置
博客·博客搭建·vuepress
PeterJXL5 个月前
关于 VuePress 的插件
博客搭建·vuepress
PeterJXL5 个月前
VuePress介绍
vue·博客·博客搭建·vuepress
小妖剑5 个月前
10分钟部署一个个人博客
vue·博客·vuepress
Shayn6666 个月前
[已解决] 使用vuepress-plugin-search-pro时编译出错Error: SlimSearch: duplicate ID
前端·vue·vuepress