glenn-carstens-peters-npxXWgQ33ZQ-unsplash

Use Simple-Jekyll-Search on Your Blog in These Easy Steps

Originally posted on cri.dev. xs:code user, Christian Fei, presents how you can easily integrate his repository on your blog.

Requirements

  • a Jekyll blog (of course)

Create search.json

Create a file search.json with this content:

{% raw  %}
---
layout: nil
---
[
  {% 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 %}
]
{% endraw  %}

Prepare HTML

In your template add the following markup to define a placeholder for the search widget:

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

Initialize search widget

Add the following script tag to your base/default _layout:

<script src="https://unpkg.com/[email protected]/dest/simple-jekyll-search.min.js"></script>

And in a separate script tag:

<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: 'No results found',
  limit: 10,
  fuzzy: false,
  exclude: ['Welcome']
})
</script>

That’s all!

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on email

Subscribe to get updates, news and fresh content.

By subscribing you agree to recieve emails from xs:code. We don't spam.

Join The Discussion