给jekyll添加炫酷简洁的搜索

进入codeboy.me, 试试双击Ctrl键看看，或者点击右下角搜索图标

博客从wordpress的jekyll，jekyll的核心思想:

将纯文本转化为静态网站和博客

jekyll是一个简单的免费的Blog生成工具，类似WordPress。但是和WordPress又有很大的不同，原因是jekyll只是一个生成静态网页的工具，不需要数据库支持。但是可以配合第三方服务,例如Disqus。最关键的是jekyll可以免费部署在Github上，而且可以绑定自己的域名。

jekyll没有数据库支持，默认没有搜索功能，那么怎么添加炫酷简洁的搜索的功能呢？google一下，大部分都是使用插件之类的，起始我们可以直接在服务端产生索引，之后利用索引进行搜索。

受到spotlight的简洁启发，在目前小胖轩导航栏上已经没有空间了，于是打算做出一个类似于spotlight的搜索。下面先看一下操作步骤：

① 服务端生成文章索引
② 浏览器获取文章索引
③ 页面交互以及按键控制

服务器生成文章索引

---
layout: null
---
{
	"code" : 0 ,
	"data" : [
	 {\% for post in site.posts \%}
	{
		"title" : " - {\% for tag in post.tags \%}{\% if forloop.rindex != 1 \%}_{\% else \%}{\% endif \%}{\% endfor \%}",
		"url" : ""
	}
	{\% if forloop.rindex != 1  \%}
	,
	{\% endif %\}
    {\% endfor \%}
	]
}

由于文章中的动态代码会被解析，所以做了替换，代码中%被替换成\%,使用中请去除%前面的转义符

这段代码是一个双层循环，将文章的标题与标签组合，同时和url一起组合为json字符串，方便后续ajax调用。

浏览器获取文章索引

此处也即一个ajax调用，使用$.ajax或者$.getJson都可以，此处可以参考一下ajax的异步请求。

页面交互以及按键控制

为了能够有一个更好的交互，对搜索进行了很多的按键的操作:

• PC下双击Ctrl键打开或者关闭搜索框
• 搜索框展示时按下Esc键关闭搜索框

按键的检测在js中也是很容易进行，此处也不在列代码了。

为了移动端也可以很好的搜索，在页面的右下角加入搜索悬浮按钮，点击后打开搜索页面，而在搜索页面，右上角提供关闭按钮，这样整体下来就完美的实现了搜索。

更多文章请访问小胖轩.