为我的博客添加搜索功能

闲谈

近来事务繁杂,许久都没有更新博客了.最近偶然翻看别人的博客的时候才想起来回来更新

回头试试看再去抓几个友链来

技术选型

最开始我倒是考虑过手写一组搜索功能,只不过效果属实是差强人意...思来想去还是决定使用现成的商业方案解决

几乎是没有考虑就选择了 algolia,algolia 还是非常非常权威的,前端三大框架 vue,react,angular 的官网不约而同的都选择了 algolia 来做搜索方案

algolia 的工作逻辑整个类似于搜索引擎,使用爬虫先将网站中的内容爬取出来,然后将其建立索引,最后用户在搜索框中输入关键词,系统会根据关键词引引,即可返回搜索结果

algolia 的官网在 这里

注册还是很容易的,没有额外的需求比如信用卡什么的

配置

到 dashboard 中,从新建 Index 开始,随后点击 Upload records -> Add connector -> Crawler

然后创建一个新的 Crawler,然后到左边的 editor 里面正确的配置好启动 Url,和上游的 Index

选择 Experience ,里面配置好搜索框,数据来源

当然,也可以配置搜索框的样式,以及搜索结果的展示方式

然后将其添加到需要展示的地方

然后,这个搜索就这样完成了!

后续

整体效果还是不错的,只不过展示细节和表现还是具备显著的优化空间

之后考虑根据这个 algolia 的API,单独设计一个搜索组件

以及,考虑单独设计实现一个搜索页面