Search with Orama

1.前言

在不久之前，我把 DevNow 的搜索组件通过 Lunr 进行了重构，从前端角度实现了对文章内容的搜索，但是在使用体验上，感觉不是特别好，大概有如下几个原因：

• 社区的文章数量比较少，项目的 Commit 也停在了4年前；
• 中文搜索的问题，虽然可以通过 lunr-languages 和 stemmerSupport 等库来实现中文分词搜索，但是分词效果和搜索结果上差强人意。
• 当文件多了之后，本地构建的索引文件会比较大，导致加载速度变慢。

所以其实一直想找一个更好的方案，但是一直没有找到合适的方案。如果文章内容是开源的，那么可以通过 DocSearch 来实现搜索，但是 DevNow 的文章内容是私有的，所以只能通过其他方式来实现搜索。

最近偶尔看到了一片文件是介绍 Nodejs 新官网通过 Nextjs 来重构，部署在了 Vercel 平台上，恭喜 Vercel 喜提一枚合作伙伴。

很明显，比之前的官网看起来更像一个技术社区网站，UI 也更符合现代的设计。有点扯远了，在浏览官网的时候发现新官网多了一个全局搜索，在体验之后发现整体体验不错，发现是基于一个开源项目 Orama实现的，Orama 也提供了 OramaCloud 的云服务，提供免费版（可以放心白嫖），这里是各个版本的权限对比 ：

这个是 algolia 搜索服务的版本对比

整体来说，OramaCloud 是一个非常强大的搜索库，提供了非常多的功能，免费版很有诚意，对于一般小型的网站来说足够用了。先面介绍下实现的过程。

2.OramaCloud 配置

2.1 创建 OramaCloud 账号

在官网注册相关的的账号。

2.2 创建索引

在后台里创建网站的索引，如下图：

这里 Presets 选项要选 Website, 然后点击按提示 部署 就好。待部署完成后，开始在自己的网站配置。

2.3 网站配置

2.3.1 SDK 配置

这里提供了两种配置方式，一种是通过 SDK 来实现，具体在 Usage 菜单中可以看到相关内容，如下：

2.3.2 UI components

推荐使用 UI components 来配置，这样可以使用 OramaCloud 提供的 UI components 来实现搜索，避免自己来实现搜索相关的UI：

最总效果图如下：

Orama 还提供来了 Chat 功能，这个功能可以让用户通过 Chat 来实现搜索，大家可以自行配置体验。

原文链接：Search with Orama