/ JEKYLL

Jekyll 기반의 GitHub Page 생성(5)

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


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로 변경했습니다.)

그 다음은 화면을 검색 페이지에 맞게 수정하는 것입니다. _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에 출력된다는 정도입니다.

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


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

lunr.jshttps://lunrjs.com/에서 받으실 수 있습니다. CDN을 이용하셔도 됩니다.

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


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

lunr search page

lunr search page

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

End.