如何实现全局搜索

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 加上简单搜索功能
© 2020 . Powered by Jekyll, theme Simple