2018-07-13 admin


什么是simple-jekyll-search,Simple Jekyll site search using javascript and json


Build Statusdependencies StatusdevDependencies Status

A JavaScript library to add search functionality to any Jekyll blog.

<g-emoji class=“g-emoji” alias=“rocket” fallback-src=“”>🚀</g-emoji>Check it out on my website and read this guide<g-emoji class=“g-emoji” alias=“book” fallback-src=“”>📖</g-emoji>to get started!

Use case

You have a blog, built with Jekyll, and want a lightweight search functionality on your blog, purely client-side?

No server configurations or databases to maintain.

Just 5 minutes to have a fully working searchable blog.



npm install simple-jekyll-search

Getting started

Create search.json

Place the following code in a file called search.json in the root of your Jekyll blog. (You can also get a copy from here)

This file will be used as a small data source to perform the searches on the client side:

layout: null
  {% for post in site.posts %}
      "title"    : "{{ post.title | escape }}",
      "category" : "{{ post.category }}",
      "tags"     : "{{ post.tags | join: ', ' }}",
      "url"      : "{{ site.baseurl }}{{ post.url }}",
      "date"     : "{{ }}"
    } {% unless forloop.last %},{% endunless %}
  {% endfor %}

Preparing the plugin

Add DOM elements

SimpleJekyllSearch needs two DOM elements to work:

  • a search input field
  • a result container to display the results

Give me the code

Here is the code you can use with the default configuration:

You need to place the following code within the layout where you want the search to appear. (See the configuration section below to customize it)

For example in _layouts/default.html:

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

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

<!-- or -->
<script src=""></script>


Customize SimpleJekyllSearch by passing in your configuration options:

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

returns { search }

A new instance of SimpleJekyllSearch returns an object, with the only property search.

search is a function used to simulate a user input and display the matching results.


var sjs = SimpleJekyllSearch({ ...options })'Hello')

<g-emoji class=“g-emoji” alias=“bulb” fallback-src=“”>💡</g-emoji>it can be used to filter posts by tags or categories!


Check out the wiki for the options!


Check out the wiki for general discussions.


Acceptance tests

cd example; jekyll serve

# in another tab

npm run cypress


Thanks to all contributors over the years! You are the best :)

@daviddarnes @XhmikosR @PeterDaveHello @mikeybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber and many others!


转载请注明:文章转载自 JavaScript中文网 []