为 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好不好。?點擊閱讀原文,直達
總結
以上是生活随笔為你收集整理的为 hexo 博客添加本地搜索功能的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 基于 Redis 实现的分布式锁
- 下一篇: 线上Bug无法复现怎么办?老司机教你一招