效果图
一、安装 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
