mabbs/_posts/2021-07-23-search.md

---
layout: post
title: 如何给博客加上全文搜索功能
tags: [搜索, 博客, 全文]
---

  原来JavaScript比Java还难？！<!--more-->    
  
# 起因
  前两天，我在看群的时候看到了[其他人的博客](https://github.com/TMaize/tmaize-blog)，打开随便看了两眼莫名其妙的就点到搜索页面上了，随手一输那个效果想不到还不错，有那个全文搜索功能。   
  其实我之前也想搞全文搜索，但是作为静态博客，全文搜索意味着客户端要遍历所有的文章，想想好像挺耗时就没搞。但是再想想我写几百万字可能还没有一张图片大，似乎对用户体验也不会有特别大的影响，而且最主要的是我之前博客用的那个[破烂玩意](https://github.com/androiddevelop/jekyll-search)它需要调用bootstrap库，这库大也就算了，但是bootstarp的样式表会影响我博客的效果，我给那个插件作者[反馈](https://github.com/androiddevelop/jekyll-search/issues/7)之后人家完全不在乎。行吧，开源作者有这个权利，那我只好换一家了。   
  
# 痛苦的写代码时间
  我最开始是想用那个最开始看到的那个博客上的代码然后随便改改用，但是那个代码的耦合性太高了，我也不想整些太多余的代码，我是拆了半天没拆出来之后我就放弃了，从网上搜搜看有没有更合适的。 ~~（自己写？那是不可能的，我哪会JS啊😂）~~   
  后来我找到了[Simple-Jekyll-Search](https://github.com/christian-fei/Simple-Jekyll-Search)这个项目，看起来好像还挺简单的，实际试了一下也挺简单的，而且还支持全文搜索，可惜就是不能高亮被搜索词。按它的说明用确实挺不错，不过我的博客结构如果加搜索的话，如果单独设置成一个超链接到单独的页面实在是太不明显了，后来我想了想干脆还是设置成搜索框吧，到时候用URL参数把内容传过去搜索，也算是挺方便的。但是有个很严重的问题就是这个库搜索要么就是键盘输入触发，要么就是用它带的search方法触发。最开始我还没看见那个search方法，想了半天想不出来怎么才能触发搜索，后来倒是看见了那个方法，不过还是有很大的问题，那就是我的代码肯定是在页面加载时运行的，但是那个插件搜索前需要把我全文的内容加载进来。这个加载需要时间而且还是异步的，这就导致我根本不知道那个方法什么时候可以使用。如果在它加载完成之前调用就搜索不到内容，这就很令人伤脑筋……就这个东西让我改代码[改了几十次](https://github.com/Mabbs/mabbs.github.io/commits/master/search.html)，看文档倒是说它加载完成时可以用success设置一个回调函数，然而实际上那是个假的选项，我试了一下就算是数据没有载入完它也会执行回调函数，这搞得我实在是没办法，说实话我JS的水平真的不太行，主要是JS的语法真的是很有特色，和其他语言都不一样，而且作为可以操作HTML的语言，还有那个异步，都注定它与其他语言是不一样的。总之新手还是别学JS了，学PHP都比JS好。   

# 突发奇想的解决
  之后我又看了半天并研究了一下那个插件的源代码，不管咋样，目前问题看起来就是出在AJAX的异步上了，而且最重要的是回调函数是假的，那我看算了，我不用这个垃圾插件的AJAX了，我用jQuery的AJAX它不香吗？所以我就用jQuery来加载我博客的全文内容最终可算是解决了问题。   
  
# 最终的代码
  搜索引擎的代码 `search.html` ： <https://github.com/Mabbs/mabbs.github.io/blob/master/search.html>   
  全文索引的代码 `search.json` ： <https://github.com/Mabbs/mabbs.github.io/blob/master/search.json>
  
# 后记
  感觉这个问题真的是在我所有学习的编程语言中解决最曲折的了，主要还有一个问题就是网上的教程好多都是完全没用的东西，真的中文互联网根本学不成编程，全都是垃圾，在垃圾堆里找点可能有点用的东西，结果还是啥？烟雾弹！虽然我很看好前端，但是JS真的是把我整恶心了。