试试双击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 \%}
]
}
- 由于文章中的动态代码会被解析，所以做了替换，代码中%被替换成\%,使用中请去除%前面的转义符
- liquid语言对行敏感，如果需要把2个字符串拼接一起，那么字符串必须在同一行，否则字符串间将加入回车符
这段代码是一个双层循环，将文章的标题与标签组合，同时和url一起组合为json字符串，方便后续ajax调用。
浏览器获取文章索引
此处也即一个ajax调用，使用$.ajax或者$.getJson都可以，此处可以参考一下ajax的异步请求。
页面交互以及按键控制
为了能够有一个更好的交互，对搜索进行了很多的按键的操作:
- PC下双击Ctrl键打开或者关闭搜索框
- 搜索框展示时按下Esc键关闭搜索框
按键的检测在js中也是很容易进行，此处也不在列代码了。
为了移动端也可以很好的搜索，在页面的右下角加入搜索悬浮按钮，点击后打开搜索页面，而在搜索页面，右上角提供关闭按钮，这样整体下来就完美的实现了搜索。
如有任何知识产权、版权问题或理论错误，还请指正。
转载请注明原作者及以上信息。
