简单的站内搜索功能

一直想为我的站点添加一个站内搜索功能,苦于不知道能否脱离后端去实现而被搁浅。最近发现了一个非常棒的插件-Simple-Jekyll-Search, 可以实现jekyll站内实时搜索,添加到站点后效果棒棒啊。 在此向此插件的作者献上我的膝盖以表钦佩。

安装

npm

npm install simple-jekyll-search

bower

bower install --save simple-jekyll-search

步骤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 %}
]

如果你的编译器对以上代码警告或者报错,不用担心,just leave it。

步骤2,使用插件

将以下代码整合到你的站点中,具体来说就是把HTML部分放置到你希望展示Search按钮和结果的页面中。然后引入simple-jekyll-search.min.js类库。

<!-- HTML elements for search -->
<div id="search-container">
  <input type="text" id="search-input" placeholder="search...">
  <ul id="results-container"></ul>
</div>

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

步骤3,自定义配置

当我们引入simple-jekyll-search.min.js后会创建一个全局变量SimpleJekyllSearch, 你可以如下添加你的配置到javascript中:

SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '/search.json'
})

恭喜你已经搞定了,赶紧试试吧!

配置参数详细解释:

更多配置介绍请参阅 Simple-Jekyll-Search

  1. 寻寻觅觅 -- Christine Welch
  2. Just the Way You Are -- Bruno Mars
  3. Despacito(Remix) -- Luis Fonsi;Daddy Yankee;Justin Bieber
  4. 没有什么不同 -- 曲婉婷
  5. 故乡--许巍
  6. Jar Of Love -- 曲婉婷
  7. I Really Like You -- Carly Rae Jepsen