LYM -- 放浪形骸，踏歌雾霭；君心可晴，且歌且行

使用Tapir为Jekyll博客实现全局搜索

想在Jekyll博客上添加一个静态搜索，这样方便搜索相应的关键字。虽然自己也把博客归类，并给每篇博客贴上标签，但是个人还是比较喜欢折腾，总感觉有个搜索功能是非常好的一件事情。于是上网也搜集了一下相关资料，发现Jekyll博客添加搜索功能还是稍微有点麻烦的，而且有些功能还不是很好。只能搜索英文关键字，兼容性也有点欠缺，有的也只是实现博客标题以及日期搜索。

个人大致归类了一下，在Jekyll博客搜索主要有一下几种实现：

1） 利用Plugin + JavaScriot的方式；

2） 利用Google提供的Google Custom Search方法，这个操作很简单，功能很好，但在国内来说不是很稳定，不太实用；

3） 实用JQuery搜素静态文本的API来解决。

下面我介绍一种非常简单的站内搜素——Tapir。这也是我参考网上Dan’s的一篇文章叫《使用Tapir实现jekyll的站内搜索功能》。

从官网可以得知，Tapir是专门为静态页面，比如博客等设计出来的一种站内搜素功能。可以通过简单的RSS订阅创建索引，并返回JASON格式的搜素结果，并且对中文支持也非常棒。下面我介绍一下如何部署。

1 添加RSS feed

如果你的博客还没有创建RSS feed，请在你的根目录下创建一个名为atom.xml的文件，添加一下内容：

   ---
layout: nil
title : Atom Feed
---
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
 
  <title>{{ site.title }}</title>
  <link href="{{ site.production_url }}/{{ site.JB.atom_path }}" rel="self"/>
  <link href="{{ site.production_url }}"/>
  <updated>{{ site.time | date_to_xmlschema }}</updated>
  <id>{{ site.production_url }}</id>
  <author>
    <name>{{ site.author.name }}</name>
    <email>{{ site.author.email }}</email>
  </author>

  {% for post in site.posts %}
  <entry>
    <title>{{ post.title }}</title>
    <link href="{{ site.production_url }}{{ post.url }}"/>
    <updated>{{ post.date | date_to_xmlschema }}</updated>
    <id>{{ site.production_url }}{{ post.id }}</id>
    <content type="html">{{ post.content | xml_escape }}</content>
    <summary type="html">{{ post.description | xml_escape }}</summary>
  </entry>
  {% endfor %}

</feed>

之后在你的html页面head标签中添加下面代码：

<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed">

若果你已经含有atom.xml这个文件，在格式entry里添加summary，也就是每篇博客的摘要部分。下面我介绍一下上面需要注意的几个注意事项：

1）首先得现在你的配置文件_config.yml中配置一下属性site.production_url、site.JB.atom_path、site.author.name、site.author.email，不然就无法使用这些参数属性，可能会影响后面搜索功能的使用。如果你不想设置，可以直接在上面选项中填写，比如{{ site.title }}可以写一个你自己喜欢的名称。以下是我设置的内容，可以参考一下：

title : lym的博客
author :
  name : lym
  email : luyueming1989@gmail.com
  github : https://github.com/lym406365619

production_url : http://luyueming.info

JB :
  BASE_PATH : false
  atom_path : /atom.xml

2） 在使用post.description选项时，在你需要发表的md文件里添加description选项，比如我这篇博客的设置：

配置好RSS feed后，你可以在本地运行Jekyll，访问http://loaclhost:4000/atom.xml看看你本地的RSS文件是否有问题。如果出现你所有的文章以及摘要，那说明你打配置文件没有出错。接着将你的修改好的项目提交到Github上吧。

2 进入Tapir提交RSS feed

Tapir的官网为http://tapirgo.com，进入官网后，在Your RSS feed选项中填写atom.xml的访问网址，比如我的就是http://luyueming.info/atom.xml。这里需要注意的是，你可以提交带有http的网址，也可以提交不含http的网址，因为生成的token并不是一样的。不过经本人测定，还是选择带有http的那个url，不然在你部署完成之后，搜索的时候可能会出现重复的两条记录，即同一篇博文出现两次。之后在下面选项填好你的E-mail地址，点击大按钮GO！就可以帮你自动生成一个token以及一个secret token。这边我们只需要记下第一个token就行，生成页面如下所示。

Tapir生成的token

3 加入search框以及JavaScript

在你需要搜索的界面加上一个search框，代码如下：

<form class="navbar-search pull-right" action="search.html">
  <input type="text" class="search-query" placeholder="Search">
</form>

由于搜索用到了JQuery，需要加入两个JS文件jquery.min.js和jquery-tapir.min.js。由于search.html是在加载时执行搜索，所以这两个JS文件必须在header中加载，我的代码如下：

<script src="/js/jquery-1.6.1.min.js">
<script src="/js/jquery-tapir.min.js">

你可以在Github上下载这两个文件，使用git clone命令

  $ git clone git@github.com:TapirGo/jquery-plugin.git

4 创建search.html

由于上面的action为search.html。在根目录下创建该文件，内容如下：

    ---
layout: default
title: 搜索结果
---
{% include JB/setup %}
<divclass="post_cont"> 
  <h1>搜索结果</h1> 

  <div id="search_results"> 
  </div>
  <script>
    $('#search_results').tapir({'token': '519992c33f61b05b19000d6f'});
  </script>

</div>

上面的红色字体就是之前生成的token，用你生成的值代替它就行了。

按照上述方法部署之后，应该就能在站内实现全局静态搜索了。

Copyright ©2013-2015 LYM Power by Github. Base on Jekyll-Bootstrap.