/ JEKYLL

Jekyll 기반의 GitHub Page 생성(5)

Jekyll 기반의 GitHub Page 생성은 여러 절로 구성되어 있습니다.


영상설명

Jekyll은 정적 사이트 generator이기 때문에 검색 기능이 따로 없습니다.

이번 영상은 블로그 검색기능을 추가 & 설정하는 방법에 대한 내용입니다.

Jekyll 기반의 GitHub Page 생성(5) - 블로그 Search 기능 추가 영상


lunr.js를 이용한 Search 기능 추가

Jekyll은 정적 사이트 generator이기 때문에 검색 기능이 따로 없습니다. 여러가지 방법을 동원해서 만들 수 있긴 하지만 최종적으로 2가지 방법이 적당할 듯 보입니다.

하나는 Google Custom Search를 이용하여 블로그내 검색 기능을 추가하는 것입니다. 쉽고 편하게 검색 기능을 붙이수는 있으나 다음과 같은 단점이 있습니다.

  • 광고가 뜬다 ( 참을 수 있습니다. )
  • style을 조절하기가 쉽지 않다. ( 참기 힘듭니다. 안 예뻐요! )

Google Custom Search는 일단 제외하고 조금 찾아보니 lunr.js를 이용하면 검색 기능을 어렵지 않게 붙일 수 있을 듯 보였습니다. lunr.js는 client side full-text search engine입니다. 검색 기능을 붙이는 방식은 아래의 두 사이트를 참고 하였습니다.

Jasper2 theme가 가지고 있는 subscribe 화면을 수정해서 search 기능을 구현해 보겠습니다.


Jasper2 theme는 subscribe 기능을 위한 링크를 가지고 있습니다.

subscriber 그림

해당 링크를 누르면 다음과 같은 그림을 볼 수 있습니다.

subscriber 그림

흠.. 새로운 포스트가 등록될 때마다 메일로 전송해주는 것이군요. 당연히 외부 기능을 제공받아야 사용할 수 있습니다. Jasper2 theme는 말 그대로 theme입니다. 모양만 제공해 주는것이지요.

저는 이 화면을 검색 화면으로 대체해서 사용했습니다.

먼저 _includes/site-nav.html파일을 열어 블로그 안에서 표현되는 Subscribe라는 글자를 Search로 변경합니다.


<div class="site-nav-right">
        <div class="social-links">
            {% if site.facebook %}
                <a class="social-link social-link-fb" 
                   href="https://facebook.com/{{ site.facebook }}" 
                   target="_blank" 
                   rel="noopener">{% include facebook.html %}</a>
            {% endif %}
            {% if site.twitter %}
                <a class="social-link social-link-tw" 
                   href="https://twitter.com/{{ site.twitter }}" 
                   target="_blank" 
                   rel="noopener">{% include twitter.html %}</a>
            {% endif %}
        </div>
        {% if site.subscribers %}
            <a class="subscribe-button" href="#subscribe">Search</a>
        {% endif %}
    </div>

맨 아래쪽

<a class="subscribe-button" href="#subscribe">Search</a>

라고 보이는 부분을 수정했습니다. (단순히 Subscribe라는 글자를 Search로 변경했습니다.)

그 다음은 기존의 Subscribe 화면을 검색 페이지에 맞게 수정하는 것입니다. _layouts/default.html을 열어서 검색 화면으로 수정합니다.


{% if site.subscribers %}
        <div id="subscribe" class="subscribe-overlay">
            <a class="subscribe-overlay-close" href="#"></a>
            <div class="subscribe-overlay-content">
                {% if site.logo %}
                    <img class="subscribe-overlay-logo" 
                         src="{{ site.baseurl }}{{ site.logo }}" 
                         alt="{{ site.title }}" />
                {% endif %}
                <h1 class="subscribe-overlay-title">Search {{ site.title }}</h1>
                <p class="subscribe-overlay-description">
                lunr.js를 이용한 posts 검색 </p>
                {% include subscribe-form.html placeholder="keyword" %}
            </div>
        </div>
{% endif %}

그 다음으로 _includes/subscribe-form.html을 열어서 수정했습니다.

코드는 아래와 같습니다.

<span id="searchform" method="post" action="/subscribe/" class="">
    <input class="confirm" type="hidden" name="confirm"  />
    <input class="location" type="hidden" name="location"  />
    <input class="referrer" type="hidden" name="referrer"  />

    <div class="form-group">
        <input class="subscribe-email" onkeyup="myFunc()" 
               id="searchtext" type="text" name="searchtext"  
               placeholder="Search..." />
    </div>
    <script type="text/javascript">
        function myFunc() {
            if(event.keyCode == 13) {
                var url = encodeURIComponent($("#searchtext").val());
                location.href = "/search.html?query=" + url;
            }
        }
    </script>
</span>

기존 코드를 수정한것이기 때문에 불필요한 코드도 좀 들어가 있습니다. 중요한 내용은 입력상자에서 검색어를 입력하고 enter를 누르면 search.html페이지로 이동하면서 검색 결과가 search.html에 출력된다는 정도입니다.

이제 검색 결과가 표현될 C:/blogmaker/search.html을 생성해서 다음과 같은 코드를 삽입합니다.


이제 마지막 단계만 남았습니다. 사용되는 lunr.jssearch.jsassets/js 폴더 안에 복사해 주어야 합니다.

lunr.js여기에서 받으실 수 있습니다.

lunr.js의 Official Home은 https://lunrjs.com/입니다. 여기서 받으셔도 되고 CDN을 이용하셔도 되는데 이럴 경우 우리의 코드를 수정해야 하기때문에 권장하지 않습니다. 제가 제공해드린 파일을 이용하도록 하죠.

search.js는 다음과 같은 코드로 작성합니다.


잘 동작하는지 한번 실행시켜보겠습니다.

lunr search page

lunr search page

검색 결과 화면에 대한 css는 취향에 맞게 설정해 사용하면 됩니다.!!

End.