Jekyll 静态博客实现搜索功能

效果图

一、安装 Simple-Jekyll-Search

---

• npm 安装（需要 Node.js 环境）

npm install simple-jekyll-search

• 或者 bower 安装

bower install --save simple-jekyll-search

二、在 Jekyll 博客根目录中新建 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 %}
]

三、将以下代码放置在要显示搜索的页面中，例如首页/index.html

---

3.1 样式代码

#search-input {
    width: 90%;
    height: 35px;
    color: #333;
    background-color: rgba(227,231,236,.2);
    line-height: 35px;
    padding:0px 16px;
    border: 1px solid #c0c0c0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 17px;
    outline: none;
    box-sizing: border-box;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
#search-input:focus {
    outline: none;
    border-color: rgb(102, 175, 233);
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #007fff;
}

3.2 html代码

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

3.3 配置代码

<script src="{{ site.baseurl }}/simple-jekyll-search.min.js"></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 // 是否模糊匹配
})

四、参考链接

---

• https://github.com/christian-fei/Simple-Jekyll-Search，by christian-fei

版权声明：本文为博主原创文章，转载请注明本文地址。