初步介绍思路

首先我是参考的Github上的一个开源库Simple-Jekyll-Search，通过这个库的README可以知道，是可以实现搜索功能的，所以，我们就用这个库来实现吧。

通过命令下载这个仓库到本地。

git clone https://github.com/christian-fei/Simple-Jekyll-Search.git

Step 1. 创建search.json文件

在个人博客的根目录下创建一个search.json的文件，然后复制下面的代码到这个文件。

<!--为了防止被编译运行，这里添加了反斜杠，自己手动取掉反斜杠。
---
layout: null
---
\[
  \{\% for post in site.posts \%\}
    \{
      "title"    : "\{\{ post.title | escape \}\}",
      "category" : "\{\{ post.category \}\}",
      "tags"     : "\{\{ post.tags | join: ', ' \}\}",
      "url"      : "\{\{ site.baseurl \}\}\{\{ post.url \}\}",
      "date"     : "\{\{ post.date \}\}"
    \} \{\% unless forloop.last \%\},\{\% endunless \%\}
  \{\% endfor \%\}
\]
-->

Step 2. 复制js文件到js目录下

打开之前下载的Simple-Jekyll-Search/dest/目录，发现会有两个js文件，一个是simple-jekyll-search.js和simple-jekyll-search.min.js。先别管这两个文件是什么内容了，直接复制到自己博客根目录下的/js/下。

Step 3. 在布局文件中添加搜索功能

这里我在两个地方添加了搜索功能，这两个地方的代码都是一模一样。一个是在博客导航栏上有搜索一栏，另一个是在Tags标签里面也添加了搜索功能。

在导航栏上是如何添加的搜索功能的?

1. 在导航栏添加搜索一栏

修改_config.yml文件中的如下内容，其中就是添加了最后一行。

navbar-links:
  Home: "https://zoharandroid.github.io"
  标签: "https://zoharandroid.github.io/tags/"
  项目:
    - Learn markdown: "http://www.markdowntutorial.com/"
  关于我: "aboutme"
  搜索: "search"

2. 在根目录下添加search.md文件

在根目录下添加search.md文件，并复制如下代码到该文件。

---
layout: page
title: Search
---

<!-- HTML elements for search -->
<input type="text" id="search-input" placeholder="搜索博客 - 输入标题/相关内容/日期/Tags.." style="width:380px;"/>
<ul id="results-container"></ul>

<!-- script pointing to jekyll-search.js -->
<script src="/js/simple-jekyll-search.min.js"></script>

<script>
SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('results-container'),
    json: '/search.json',
    searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
    noResultsText: '没有搜索到文章',
    limit: 20,
    fuzzy: false
  })
</script>

3. 效果图

这部分也就是搜索的主要核心代码了。到此，搜索功能也就完成了。下面来看看如何在Targs页面去实现搜索功能。

在Targs标签页是如何添加搜索功能的？

在根目录下找到tags.html文件，然后复制下面的代码到这个文档开头即可实现搜索功能。

---
layout: page
---

<!--添加搜索框-->
<br/>
<!-- HTML elements for search -->
<input type="text" id="search-input" placeholder="搜索博客 - 输入标题/相关内容/日期/Tags.." style="width:380px;"/>
<ul id="results-container"></ul>

<!-- script pointing to jekyll-search.js -->
<script src="/js/simple-jekyll-search.min.js"></script>

<script>
SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('results-container'),
    json: '/search.json',
    searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
    noResultsText: '没有搜索到文章',
    limit: 20,
    fuzzy: false
  })
</script>
<br/>

<!--....省略下面的代码 -->

效果图