静态博客如何实现站内搜索-大象装入冰箱

静态博客如何实现站内搜索

静态博客

我们通过markdown写文章，
再通过hexo，Jekyll等开源框架，可以生成自己的纯静态博客网站。
通过我们的云服务器，或者github和gitee也支持我们把生成的纯静态页面发布出去，直接能够互联网访问。

但是静态博客如何实现站内搜素呢：

1. 简单的方式是利用搜索引擎或者第三方提供的站内搜索服务，这里不做这方面的讨论。
2. 通过js实现搜索，这个我们做详细的展开介绍下】。

js如何实现搜索

其实原理很简单，就像把大象装入冰箱的步骤一样。

把冰箱门打开

维护好配置信息。
比如我们有三篇文章

java入门， 内容：java入门文章
go入门， 内容：go入门文章
python入门， 内容：python入门文章
1
2
3

对文章标题和url进行摘记:

{
    "1": "java入门-url",
    "2": "go入门-url",
    "3": "python入门-url"
}
1
2
3
4
5

把文章标题和url用数字关联。

对文章内容进行摘记：

{
    "java":"1-1",
    "go":"2-1",
    "python":"3-1",
    "入门":"1-1,2-1,3-1",
    "文章":"1-1,2-1,3-1",
}
1
2
3
4
5
6
7

以上内容举例就明白了：
比如"入门":"1-1,2-1,3-1"表示就是”入门“这关键字在出现在文章1的第一行，还出现在文章2的第一行，还出现在文章3的第一行。

其实就是反向索引的一些思路，只不过我们没对内容进行压缩和优化保存，改用对js友好的js格式保存，毕竟个人的笔记量即使每天写，每分钟写。。。

以上摘记内容我们完全可以用自己擅长的语言对内容进行分析产生这样的json内容，并直接当全局变量保存到js中。

把大象放进去

js操作配置信息。
这时候就更简单了，我们获取用户输入的搜索关键字，去json里面匹配。
比如我们输入java，则获取到"1-1",
我们就知道是文章1的第一行出现java这个关键字，
而文章1对应的就是“java入门这篇文章”。

然后把门关上

大象装入冰箱是要三步的，我们也是哈，第三部发布出去。