如何实现全局搜索

Jekyll 是静态博客，因此没有数据库搜索功能，那么我们该如何实现全局搜索呢？这里有 4 个方案

1. 使用第三方搜索工具，例如 algolia，需要手动配置，麻烦。
2. 使用搜索引擎，简单，但如果你的文章没有被搜索引擎收录，那么就毫无用处。
3. 使用第三方插件，很难自定义。
4. 为主题专门打造。

除了 GitHub 官方支持的插件和一些快速配置的 JS 库，我很少使用第三方工具，所以我选择方案 4。

1. json 实现数据库

我们利用 Liquid 语言将文章的关键信息都生成到文件 search.json 中，该文件充当了本地数据库的功能，文件内容如下：

[
  {% for post in site.posts %}
    {
      "title"    : {{ post.title | jsonify }},
      "url"      : {{ post.url | relative_url | jsonify }},
      "content"  : {{ post.content | strip_html | strip_newlines | remove: '  ' | jsonify }}
    } {% unless forloop.last %},{% endunless %}
  {% endfor %}
]

添加搜索框

搜索框是用户快速进行搜索的入口，我将其放在了导航栏。

添加搜索结果展示区

搜索结果放在独立的页面 search.html 上，在搜索框输入关键词后跳转到此页。

JS 匹配

在搜索框中输入关键字的时候，触发 JS 搜索 json 文件，并显示相应的文章 URL。JS 实现步骤如下：

1. 获取文章列表的 json 文件
2. 解析 json
3. 匹配关键词
4. 向页面插入搜索结果

实现代码查看 search.js。

CSS 优化

后续工作就是利用 CSS 对搜索框和搜索结果等模块进行相应的美化。

参考文献

1. Simple-Jekyll-Search。
2. 为 Jekyll 加上简单搜索功能。