A JavaScript library to add search functionality to any Jekyll blog.
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.
Check out the wiki for all available options and help for troubleshooting
npm install simple-jekyll-search
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" : "{{ post.date }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
]
SimpleJekyllSearch needs two DOM
elements to work:
- a search input field
- a result container to display the results
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>
<!-- or without installing anything -->
<script src="https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></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'
})
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.
E.g.:
var sjs = SimpleJekyllSearch({ ...options })
sjs.search('Hello')
💡 it can be used to filter posts by tags or categories!
Check out the wiki for the options!
npm install
npm test
cd example; jekyll serve
# in another tab
npm run cypress -- run
Thanks to all contributors over the years! You are the best :)
@daviddarnes @XhmikosR @PeterDaveHello @mikeybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber and many others!