깃블로그에 포스팅 데이터가 차곡차곡 쌓이고 있다. 그런데 전에 작성했던 포스트를 찾아보려 하니, 일일이 페이징을 하기엔 너무 번거로웠다.

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 깃허브 저장소 내용을 참고했지만, 적용 과정에서는 거의 대부분 미냐님 게시글을 참고하였고 많은 도움이 되었다.

참고문서

• 미냐님의 게시글
• Simple-Jekyll-Search
• minimal-mistakes