項(xiàng)目使用了react+gatsby進(jìn)行生產(chǎn)靜態(tài)html文件，而gatsby官方推薦的elasticlunr搜索插件對(duì)中文并不友好，
并且在對(duì)比后發(fā)現(xiàn)雖然是可以在gatsby-config文件中配置，但與配置fuse.js差距不大

fuse.js
之所以能匹配中文其實(shí)是通過(guò)設(shè)置模糊搜索實(shí)現(xiàn)的，相對(duì)的會(huì)導(dǎo)致英文搜索結(jié)果特別多，因?yàn)槌霈F(xiàn)相同的字符都會(huì)視為匹配
模糊搜索程度通過(guò)threshold大小決定
includeMatches會(huì)使搜索結(jié)果出現(xiàn)匹配字段的下標(biāo)，通過(guò)這個(gè)可以設(shè)置高亮
shouldSort使搜索結(jié)果按匹配程度排序，但在同一篇文章中的匹配下標(biāo)依然是按順序輸出，所以需要做處理

設(shè)置高亮具體流程為：
首先，文章的搜索結(jié)果需要截取一段存在高亮部分，而不是顯示全部，
同一篇文章fuse.js的搜索結(jié)果沒(méi)有排序，截取的一段最終定為一篇文章中匹配長(zhǎng)度最長(zhǎng)的字段，
并截取這個(gè)字段往前的10個(gè)字符（除往前不足10個(gè)字符），再往前就不需要
把文章切割成數(shù)組，通過(guò)循環(huán)設(shè)置高亮

代碼待整理