任何博客或文档网站都需要搜索功能。 您可以通过多种方式实现这一目标,并且很可能会选择服务器端解决方案。 但是,如果您不想处理任何后端,则可以通过lunr.js在客户端实现所有后端。
几年前,我首次发现Lunr.js,但自从我决定使用服务器端选项(我还需要插入动态内容)以来,我就没有使用它。 但是,几周前,我决定采用客户端方法,我发现ElasticLunr.JS本质上是对Lunr.js的包装,可以使事情变得更容易。
汤姆和杰里–休战创伤,威廉·汉娜和约瑟夫·巴贝拉
创建索引非常简单(由ElasticLunr.com提供):
搜索很简单,如下所示:
如果您有一个像这样的Jekyll博客,则可以使用Liquid语法对所有帖子进行索引。 这是我为该博客创建索引的方式。
现在,对于实际的搜索,我需要一个“前端”,一个搜索小部件。 由于ElasticLunr.js不提供此类工具,因此我编写了自己的工具。 好吧,实际上我不是从头开始创建它,而是重构了用于服务器端搜索的现有Search Widget。 而且,在进行重构的过程中,我了解了“老化软件”的实际含义。 这是一个简单的ReactJS小部件,大约有5个组件,并且只有很少的依赖项:经过3年根本没有使用它,运行npm install
突然显示大约400(!)警告和错误。 我给项目留了一个绿色的构建标记,当我回到项目上时,什么也不做,它突然爆炸了。
为什么我取消服务器端搜索? 过去对我来说效果很好,我什至编写了自己的Github聊天机器人来索引和搜索Github Pages内容。 我拒绝了它,因为保持它变得昂贵(我认为我在所有云提供商上都没有免费套餐),此外,该产品未能吸引用户。
总之,如果您有类似的用例,强烈建议您研究lunr.js和/或elasticlunr.js。 另外,您可以重用我的搜索小部件!
翻译自: https://www.javacodegeeks.com/2020/02/clientside-search-with-elasticlunr-js.html