2013-05-15

使用Tapir给Jekyll博客添加全文搜索

这篇文章的产生，其实首先要感谢Dan 单弘昊，请猛戳这里查看他写的《使用Tapir实现jekyll的站内搜索功能》。

在这里，仅仅是做一个记录，并且总结一些错误。

修改atom.xml文件

--- layout: nil title : Atom Feed --- {{ site.title }} {{ site.time | date_to_xmlschema }} {{ site.production_url }} {{ site.author.name }} {{ site.author.email }} {% for post in site.posts %} {{ post.title }} {{ post.date | date_to_xmlschema }} {{ site.production_url }}{{ post.id }} {{ post.content | xml_escape }}

{% endfor %}

以上是修改后的atom.xml文件的全文。与Out of the box的atom.xml文件唯一的区别在于，<entry>节点的最后添加了一段：

添加这段内容的目的在于：搜索出的结果不会直接显示文章的全文，而是只显示文章的摘要。这么做有一点要求，那就是_post目录下，每篇文章的YAML头部都必须包含有description信息；否则在本地启动Jekyll进行预览时会报错，那么可想而知，在GitHub上也同样会报错。

---
layout: post
title: 使用Tapir给Jekyll博客添加全文搜索
category : Tutorial
tags : [Tapirgo]
description : 记录了用Tapir为Jekyll博客添加搜索功能的步骤
---

以上是本文的YAML头部，给出以作说明。

提交更改到GitHub

$ git add .
$ git commit -m "modify atom.xml"
$ git push origin master

在Tapir注册atom.xml

登入Tapir，并填入atom.xml文件的位置和自己的邮箱，点击那个大大的橘色按钮以后，会生成一个token和一个secret token。本文只会使用到token，所以暂时可以不用在意secret token。

加入Tapir

Tapir的搜索用到了jQuery，所以需要加入jQuery和一个处理Tapir搜索的js文件。修改_includes\themes\twitter目录下的default.html文件的<head>部分如下：

PS：jQuery也可以使用CDN的地址，可以自行Google，但是鉴于国内的环境，还是不要使用Google的CDN地址了。

在导航条里加搜索框

这一步对于使用Bootstrap的人来说比较简单，只要修改_includes\themes\twitter目录下的default.html文件即可:

以上是修改后的default.html的导航条片段。值得注意的是，form元素的action地址是search.html，那么接着就该创建search.html了。

创建search.html

在username.github.io目录下创建一个search.html，文件内容如下：

--- layout: page title: Search Results header: Search Results ---

需要关注的是jQuery选择的是ID为search_results的元素，这是search.html页面中用来摆放搜索结果的DIV的ID。另外，请自行替换token的值。

现在搜索功能就已经完成了，可以先在本地使用$ jekyll serve进行编译和预览，然后再提交到GitHub上。