为 jekyll 博客添加静态搜索

今晚吃完饭后，为博客做了简单的搜索功能，因为做的大多是前台方面的工作，所以我个人将其称之为静态搜索。简单介绍下。

一、生成 search.xml

遍历 jekyll 博客中的所有文章，获取其标题、日期和文章链接，整合
到一个 xml 文件中。这个 xml 文件我们可将其命名为 search.xml，以便我们后续的工作。

具体的写法如下：

<?xml version="1.0" encoding="UTF-8" ?>
<articles>
{% for post in site.posts %}
<article>
    <title>{{ post.title }}</title>
    <url>{{ site.url }}{{ post.url }}</url>
    <date>{{ post.date | date_to_utc | date: '%Y-%m-%d'}}</date>
</article>
{% endfor %}
</articles>

二、添加 DOM 结构

DOM 结构就是 HTML 代码啦。

你可以添加到你希望的地方，但要注意一点，就是你添加 DOM结构的地方要有相应的 CSS 链接和 JS 链接。

添加 Jquery UI 样式和 JS 链接。

我在这里采用的是 jquery-ui-1.8.18.custom 版本。

DOM 结构保存在同一个页面。

//样式表
<link rel="stylesheet" href="/css/jquery-ui-1.8.18.custom.css" type="text/css">
//js
<script src="/js/jquery-ui-1.8.18.custom.js"></script>
//添加 DOM
<input id="J_search" placeholder="Simple Search"/>

三、设置全局地址

在 jekyll 博客的根目录下的 config.yml 添加你的博客的全局基本地址。

url: http://rhatang.com

四、通过 Javascript 实现搜索功能

简单说明下原理：通过在输入框输入关键词，Ajax 匹配 search.xml 中的文章标题里面的词语，
若是，在输入框下方显示出标题。通过选择标题，跳转到搜索到的文章页面。

我的实现方式是这样的，你也可以通过修改 autocomplete的实例来实现不同的展现效果。

$(function () {
	$.ajax({
		url: "search.xml",
		dataType: "xml",
		success: function (xmlResponse) {
			var data = $("article", xmlResponse).map(function () {
				return {
					value: $("title", this).text() + ", " +
						($.trim($("date", this).text())),
					desc: $("description", this).text(),
					url: $("url", this).text()
				};
			}).get();
			$("#J_search").autocomplete({
				source: data,
				minLength: 0,
				select: function (event, ui) {
					window.location.href = ui.item.url;
				}
			});
		}
	});
});

五、测试

在输入框中输入你所知道的一些关键词，如果输入框下拉菜单有内容，选中它，成功跳转到对应的文章页面。那么，你成功了。

六、总结

这是一个很简单的实现方法，因为就今晚几个小时做出来的，所以可能还有很多不适用性。兼容性方面还没做好测试，只兼容 Firefox 和 Chrome ，还没完善的一个方面是出错处理，有空再补上。

遗憾的是暂时只支持英文关键词搜索，后续，恩，中英文。