使用 Simple-Jekyll-Search 搜索你的文章

Requirements

  • a Jekyll blog (of course)

Create search.json

Create a file search.json with this content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% 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:

1
2
3
<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:

1
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>

And in a separate script tag:

1
2
3
4
5
6
7
8
<script>
SimpleJekyllSearch({
search-input: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{% raw %}{{ site.url }}{% endraw %}{url}">{title}</a></li>'
})
</script>

That’s all!

参考资料

  • https://github.com/christian-fei/Simple-Jekyll-Search