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

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> 为 hexo 博客添加本地搜索功能

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


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

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

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


npm install hexo-generator-search --save

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


search:
  path: search.xml
  field: post

问题出现

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

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

  • search.xml文件中有不符合规则的字符,导致不能解析。- search.xml中有错误,导致不能解析。- search.xml文件中有编码不一致的问题,导致xml解析失败。
    以上的search.xml就是我们配置了本地搜索后,自动生成的xml格式的包含站点所有博客的文件,通过这个文件就可以进行本地搜索功能。

问题原因

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

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

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

本地搜索终极解决方案

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

第一步

找到站点配置文件


search:
  path: search.xml
  field: 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 searching
                datas.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 contents
                    if (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 results
                    if (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 characters
                            var 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 keywords
                            keywords.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好不好。 点击阅读原文,直达

原文地址:https://sihai.blog.csdn.net/article/details/109465458

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> 为 hexo 博客添加本地搜索功能


 上一篇
基于 Redis 实现的分布式锁 基于 Redis 实现的分布式锁
  点击上方 **好好学java **,选择 **星标 **公众号 重磅资讯、干货,第一时间送达 今日推荐:我的大学到研究生自学 Java 之路,过程艰辛,不放弃,保持热情,最终发现我是这样拿到大厂 offer 的! 作者:你的笑像一
2021-04-04
下一篇 
线上Bug无法复现怎么办?老司机教你一招,SpringBoot远程调试不用愁! 线上Bug无法复现怎么办?老司机教你一招,SpringBoot远程调试不用愁!
前言 在部署线上项目时,相信大家都会遇到一个问题,线上的 Bug 但是在本地不会复现,多么无奈。- 此时最常用的就是取到前端传递的数据用接口测试工具测试,比如 POSTMAN,复杂不,难受不?- 今天陈某教你一招,让你轻松调试线上的 Bug
2021-04-04