깃블로그에 포스팅 데이터가 차곡차곡 쌓이고 있다. 그런데 전에 작성했던 포스트를 찾아보려 하니, 일일이 페이징을 하기엔 너무 번거로웠다.
Jekyll에서 검색을 위한 Simple-Jekyll-Search 자바스크립트 라이브러리로 제공하고 있음을 알게되었다.
simple-jekyll-search 라이브러리를 활용해 깃블로그에 검색 기능을 추가하는 과정을 알아보자.
1. search.json 파일 생성
먼저 루트 디렉토리에 search.json 파일을 생성한다.
본인은 xxx.github.io 폴더 내에 생성하였다.
이 파일은 검색을 수행하기 위해 클라이언트에서 활용된다고 한다.
---
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 %}
]2. 플러그인에 필요한 js 파일 생성
simple-jekyll-search/dest 디렉토리에서 simple-jekyll-search.js파일과 simple-jekyll-search.min.js파일을 만들어 asset/js 디렉토리 내에 두었다.
이 두 자바스크립트 파일은 실제 검색을 수행하기 위한 스크립트라고 이해하였다.
3. 검색필터 파일 생성
루트 디렉토리(xxx.github.io/)에 _plugins 디렉토리를 추가하고, simple_search_filter.rb 파일을 생성한다. 해당 파일 소스는 아래와 같다.
module Jekyll
module CharFilter
def remove_chars(input)
input.gsub! '\\','\'
input.gsub! /\t/, ' '
input.strip_control_and_extended_characters
end
end
end
Liquid::Template.register_filter(Jekyll::CharFilter)
class String
def strip_control_and_extended_characters()
chars.each_with_object("") do |char, str|
str << char if char.ascii_only? and char.ord.between?(32,126)
end
end
end이 필터 파일은 잘못된 JSON으로 인해 검색이 제대로 작동하지 않을 때 활용되는 파일이라고 하는데, 정확한 용도는 잘 모르겠다.
4. search.html 파일 생성
본인은 검색만을 위한 페이지(xxx.github.io/search)를 필요로 하기에 별도에 검색을 위한 입력필드와 결과를 뿌려줄 html 파일이 필요했다.
루트 디렉토리(xxx.github.io/)에 search.html 파일을 생성한다.
해당 파일과 2번에서 생성한 simple-jekyll-search.js 파일 및 simple-jekyll-search.min.js파일의 위치는 같아야 한다.
---
layout: search
page_title: Search
permalink: /search/
---
<div class="container">
<div class="row">
<div class="col-12">
<div id="search-bar">
<i class="fa fa-search" aria-hidden="true"></i>
<input id="search-input" type="text" placeholder="검색어를 입력하세요." />
</div>
<ul id="results-container"></ul>
</div>
</div>
</div>
<!-- Script pointing to jekyll-search.js -->
<script src="/assets/js/simple-jekyll-search.js" type="text/javascript"></script>
<script type="text/javascript">
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}" title="{desc}" target="_blank">{title}</a></li>',
noResultsText: '검색결과가 존재하지 않습니다.',
limit: 10000,
fuzzy: false,
exclude: ['Welcome']
});
</script>5. search.html 레이아웃 파일 생성
5번에서 생성한 search.html의 layout을 담당할 레이아웃 파일을 생성해야 한다.
_layouts 디렉토리에 search.html 파일을 만들어야 한다. 그런데 내가 사용하고 있는 minimal-mistakes 테마에서는 search.html 파일이 이미 생성되어 있어 그대로 사용하였다.
- 파일 소스는 minimal-mistakes/_layouts/에서 확인할 수 있다.
6. 검색기능 동작 확인
5번까지의 과정을 수행후 jekyll serve하여 localhost:4000/seaech로 접속하였다.
java 라는 검색어를 입력해보자.
디자인을 조금 손을 봐야 하긴 하겠지만 정상적으로 동작함을 확인할 수 있었다.
final..
기본적인 내용은 simple-jekyll-search 깃허브 저장소 내용을 참고했지만, 적용 과정에서는 거의 대부분 미냐님 게시글을 참고하였고 많은 도움이 되었다.
참고문서
