html 博客 全文搜索,为Hexo博客添加全文搜索

本文介绍如何利用hexo-generator-search插件为Hexo博客添加本地全文搜索

原理

hexo-generator-search实际上是根据网页内容生成了一个数据文件，格式是XML或者JSON。然后通过JS代码去匹配这个文件的内容，从而达到搜索的目的。

最终效果

步骤

安装 hexo-generator-search$ npm install hexo-generator-search --save

配置

在_config.yml中添加search:

path: search.xml

field: post

使用

再次生成博客，就会发现public根目录下多了search.xml文件。

写一个搜索框：

使用Bootstrap框架的modal应该是极好的。

修改Hexo主题，(对此不了解的可以查看我的自定义Hexo主题的相关内容)，在layout.ejs中添加一个modal：根据Bootstrap文档，modal需要尽量作为 body 标签的直接子元素。

search-modal.ejs的代码如下：

</