项目使用了react+gatsby进行生产静态html文件,而gatsby官方推荐的elasticlunr搜索插件对中文并不友好,
并且在对比后发现虽然是可以在gatsby-config文件中配置,但与配置fuse.js差距不大
fuse.js
之所以能匹配中文其实是通过设置模糊搜索实现的,相对的会导致英文搜索结果特别多,因为出现相同的字符都会视为匹配
模糊搜索程度通过threshold
大小决定
includeMatches
会使搜索结果出现匹配字段的下标,通过这个可以设置高亮
shouldSort
使搜索结果按匹配程度排序,但在同一篇文章中的匹配下标依然是按顺序输出,所以需要做处理
设置高亮具体流程为:
首先,文章的搜索结果需要截取一段存在高亮部分,而不是显示全部,
同一篇文章fuse.js的搜索结果没有排序,截取的一段最终定为一篇文章中匹配长度最长的字段,
并截取这个字段往前的10个字符(除往前不足10个字符),再往前就不需要
把文章切割成数组,通过循环设置高亮
代码待整理