为 hexo 博客添加本地搜索功能

点击上方 好好学java ，选择星标公众号

重磅资讯、干货，第一时间送达
今日推荐：我的大学到研究生自学 Java 之路，过程艰辛，不放弃，保持热情，最终发现我是这样拿到大厂 offer 的！个人原创+1博客：点击前往，查看更多

hexo博客添加本地搜索功能的步骤

使用 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:path: search.xmlfield: post

问题出现

通过上面的安装一般是可以实现本地搜索功能的，但是，我的问题出现了，刚刚开始的时候，我是在windows电脑上面配置hexo的博客的，但是，后面我迁移到了mac上，然后本地搜索功能突然就不能用了。

经过自己的调试发现，一般本地功能不能使用了，有以下几个原因。

search.xml文件中有不符合规则的字符，导致不能解析。
search.xml中有错误，导致不能解析。
search.xml文件中有编码不一致的问题，导致xml解析失败。

以上的search.xml就是我们配置了本地搜索后，自动生成的xml格式的包含站点所有博客的文件，通过这个文件就可以进行本地搜索功能。

问题原因

发现问题都在search.xml中，其实，罪魁祸首是你的某些文章有格式问题，导致生成的search.xml也出错了，这很要命啊，到底是哪一篇文章呢？

当我删掉这篇发现本地搜索可以，后面又不行了，这不是玩我吗。

于是有了后面的解决方案。

本地搜索终极解决方案

既然用xml格式始终都是很难解决问题的，那么我就想到了使用更加通用的json格式呗，果不其然，最终完美解决了问题，下面记录解决方法及过程。

第一步

找到站点配置文件

search:path: search.xmlfield: post

将search.xml改为search.json格式。

第二步

找到你的博客主题的search.ejs模板文件，修改下面代码:

<script type="text/javascript">
$(function () {console.log("lets go！");console.log("<%= config.root %>");searchFunc("<%= config.root %>" + "search.xml", 'searchInput', 'searchResult');
});
</script>

也是改为json格式的文件

<script type="text/javascript">
$(function () {console.log("lets go！");console.log("<%= config.root %>");searchFunc("<%= config.root %>" + "search.json", 'searchInput', 'searchResult');
});
</script>

最后一步

修改你的search的本地js文件，比如我的matery主题的就是在js文件夹下的search.js文件。

对这个文件进行json解析的修改，最终就可以成功解决问题。

var searchFunc = function (path, search_id, content_id) {console.log("test");// 'use strict';$.ajax({url: path,dataType: "json",success: function (datas) {// get the contents from search data// var datas = $("entry", xmlResponse).map(function () {//     return {//         title: $("title", this).text(),//         content: $("content", this).text(),//         url: $("url", this).text()//     };// }).get();// console.log(xmlResponse);console.log("test!");console.log(datas);var $input = document.getElementById(search_id);var $resultContent = document.getElementById(content_id);$input.addEventListener('input', function () {var str = '<ul class=\"search-result-list\">';var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);$resultContent.innerHTML = "";if (this.value.trim().length <= 0) {return;}// perform local searchingdatas.forEach(function (data) {var isMatch = true;var content_index = [];var data_title = data.title.trim().toLowerCase();var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();var data_url = data.url;var index_title = -1;var index_content = -1;var first_occur = -1;// only match artiles with not empty titles and contentsif (data_title != '' && data_content != '') {keywords.forEach(function (keyword, i) {index_title = data_title.indexOf(keyword);index_content = data_content.indexOf(keyword);if (index_title < 0 && index_content < 0) {isMatch = false;} else {if (index_content < 0) {index_content = 0;}if (i == 0) {first_occur = index_content;}}});}// show search resultsif (isMatch) {str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";var content = data.content.trim().replace(/<[^>]+>/g, "");if (first_occur >= 0) {// cut out 100 charactersvar start = first_occur - 20;var end = first_occur + 80;if (start < 0) {start = 0;}if (start == 0) {end = 100;}if (end > content.length) {end = content.length;}var match_content = content.substr(start, end);// highlight all keywordskeywords.forEach(function (keyword) {var regS = new RegExp(keyword, "gi");match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");});str += "<p class=\"search-result\">" + match_content + "...</p>"}str += "</li>";}});str += "</ul>";$resultContent.innerHTML = str;});}});
}

修改很简单，只要把上面的我注释的注释掉，然后将sucess后的xmlResponses改为datas就可以，这样其实解析起来比xml方便很多，省去了很多代码，最重要的是解决了我的问题。

最后

不会，还是得自己看代码，修改解决问题。

最后，再附上我历时三个月总结的 Java 面试 + Java 后端技术学习指南，这是本人这几年及春招的总结，目前，已经拿到了腾讯等大厂offer，拿去不谢，github 地址：https://github.com/OUYANGSIHAI/JavaInterview

这么辛苦总结，给个star好不好。点击阅读原文，直达