如何给博客加上全文搜索功能
source link: https://mabbs.github.io/2021/07/23/search.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
23 July 2021 - 字数统计：1447 - 阅读大约需要5分钟 - Hits: 34
如何给博客加上全文搜索功能
by mayx
原来JavaScript比Java还难？！
前两天，我在看群的时候看到了其他人的博客，打开随便看了两眼莫名其妙的就点到搜索页面上了，随手一输那个效果想不到还不错，有那个全文搜索功能。
其实我之前也想搞全文搜索，但是作为静态博客，全文搜索意味着客户端要遍历所有的文章，想想好像挺耗时就没搞。但是再想想我写几百万字可能还没有一张图片大，似乎对用户体验也不会有特别大的影响，而且最主要的是我之前博客用的那个破烂玩意它需要调用bootstrap库，这库大也就算了，但是bootstarp的样式表会影响我博客的效果，我给那个插件作者反馈之后人家完全不在乎。行吧，开源作者有这个权利，那我只好换一家了。
痛苦的写代码时间
我最开始是想用那个最开始看到的那个博客上的代码然后随便改改用，但是那个代码的耦合性太高了，我也不想整些太多余的代码，我是拆了半天没拆出来之后我就放弃了，从网上搜搜看有没有更合适的。 （自己写？那是不可能的，我哪会JS啊😂）
后来我找到了Simple-Jekyll-Search这个项目，看起来好像还挺简单的，实际试了一下也挺简单的，而且还支持全文搜索，可惜就是不能高亮被搜索词。按它的说明用确实挺不错，不过我的博客结构如果加搜索的话，如果单独设置成一个超链接到单独的页面实在是太不明显了，后来我想了想干脆还是设置成搜索框吧，到时候用URL参数把内容传过去搜索，也算是挺方便的。但是有个很严重的问题就是这个库搜索要么就是键盘输入触发，要么就是用它带的search方法触发。最开始我还没看见那个search方法，想了半天想不出来怎么才能触发搜索，后来倒是看见了那个方法，不过还是有很大的问题，那就是我的代码肯定是在页面加载时运行的，但是那个插件搜索前需要把我全文的内容加载进来。这个加载需要时间而且还是异步的，这就导致我根本不知道那个方法什么时候可以使用。如果在它加载完成之前调用就搜索不到内容，这就很令人伤脑筋……就这个东西让我改代码改了几十次，看文档倒是说它加载完成时可以用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真的是把我整恶心了。
tags: 搜索 - 博客 - 全文
Recommend
-
136
微信全文搜索优化之路修改于2017-10-19 01:46:04阅读 6.2K0作者： jiaminchen 本文首次发表在《程序员》杂志 2017 年 09 月期。基于本地数据的
-
21
前言 Elasticsearch 是一个分布式、可扩展、实时的搜索与数据分析引擎，通过它我们可以构建出一个强大的全文搜索系统，解决诸如文章检索慢，商品检索慢、MySQL的like查询慢这样的问题。 Elasticsearch是基于hadoop创...
-
9
SEO 1 mins给Hugo博客加上baiduurls.txt24-05-20 / 307 Words写作不易，资瓷一下呗！本文首发于个人博客：https://rayc...
-
4
如今短视频当道，BGM无处不在，用户在每个能秀的地方都想要加上个性表达的音频。作为一个开发者，需不断探索和迎合用户的行为喜好，音频编辑功能成为用户在编辑个人信息、内容创作、生活分享等场景下的必需品。 音频编辑服务（Audio Editor Kit）是华为...
-
2
谁都不愿意在使用网站服务的时候，被恶心的运营商劫持加上一些他们的服务(真的很贱，不是吗？)，不过这能难道我们程序员吗？当然不能，上https，老子全站https，你再劫持给我看看。 https证书服务大部分都是收费...
-
8
在 《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终...
-
3
It's only too late if you decide it is. Get busy living. or get busy dying!
-
3
在CAD看图过程中我们经常会需要用到查找文字的功能，在AutoCAD软件查找一个文字时，可以通过打开左下角输入命令find，输入查找的文字，然后设置查找范围，就可以搜索到需要查询的文字。但在Web网页端打开CAD图查找文字时，有没有同样的办法呢？另...
-
4
一些 Vim 插件可能因为计算密集或者是访问网络资源导致命令调用特别慢, 进而导致 Vim 的操作界面被 hang 住, 时不时地 hang 一下还是很影响流畅度和编码心情的 ):还好在 neovim/vim8 中添加了对异步调用的支持, 我们可以利用 job 机制让耗时的操作在后台...
-
3
终于加上用户呼吁已久的功能！Edge新特性前瞻-51CTO.COM 终于加上用户呼吁已久的功能！Edge新特性前瞻 作者：Aimo 2022-06-30 06:00:30 新的Edge浏览器终于支持双击关闭标签页了，这...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK