记一次Hexo主题搜索功能的改造

Demo页


首先

根据Hexo往常一样的使用主题的方式一样,将喜欢的主题git clone到博客目录下的theme下,

然后

修改根目录下的_config.yml文件:

其次

1
2
3
4
5
hexo g 生成html

hexo s 本地预览

hexo d 发布上线

然而

我发现,根据官方的配置:

搜索区域可以出现,但是功能无法使用。

接着

我在github提了issue,本想着等待作者的回复,但是作为一个前端开发的我,怎么可能就这么轻易地放弃呢。随后我查看了一些历史issues,发现了作者回答过的历史问题里别人遇到过同样的问题:

随后

我就在本地的代码里寻找search.js文件,找到之后我查看了里面的逻辑,在关键位置添加了console.log,用于查看日志信息,结果发现:

这里的解析代码和生成的search.xml并不对应:

所以我改造了这里的解析代码:

这里使用了decodeURIComponent是因为从search.xml里的内容可以看出,url并不是明文,需要decode一下。

最后

搜索功能完美的可用了。

但是

我并不喜欢这种响应式的搜索过程,随着输入内容出现搜索结果的方式虽然很及时,也很方便,但是并不是我想要的效果,我想要的是通过敲击回车键才进行搜索。

所以

我又对源码进行了一番改造,将作者的代码进行了小小的封装,并对搜索框的keyup事件进行了监听,判断keycode === 13(回车键的code值)的时候才执行search

最后的最后

实现的效果才是我最中意的。

希望这篇文章有帮助到你,感谢您的阅读。