Simple-Jekyll-Search

A JavaScript library to add search functionality to any Jekyll blog. Simple-Jekyll-Search

使用方法

  1. 使用bower安装js文件

         bower install --save simple-jekyll-search

  2. 在blog的根路径添加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 %}
 ]

  3. 在搜索页面添加输入框与引入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>
 <script>
     SimpleJekyllSearch({
       searchInput: document.getElementById('search-input'),
       resultsContainer: document.getElementById('results-container'),
       json: '/search.json'
     })
 </script>