搜索推荐 谷歌的 自定义搜索!!!

一: 生成 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 代码. 添加 Jquery UI 样式和 JS 链接。我在这里采用的是 jquery-ui-1.8.18.custom 版本。DOM 结构保存在同一个页面。 //样式表

//js
<script src="/js/jquery-ui-1.8.18.custom.js"></script>

//添加 DOM
<input id="J_search" placeholder="Simple Search"/>

三: 设置全局地址

在 Jekyll 博客的根目录下的 config.yml 添加你的博客的全局基本地址。就一句话就 Ok 哈!

四: 通过js 实现搜索功能

通过在输入框输入关键词,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;
                }
            });
        }
    });
});