[Git/GitHub] Jekyll 기반의 GitHub Page 생성(5) - lunr.js를 이용한 Search 기능 추가 (1)

Subscibe 버튼을 Search 버튼으로 바꾼 후

버튼을 클릭하면 나오는 구독창 또한 검색창으로 바꿀 것임

---

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>

---

default.html

subscribe 부분 코드를 아래와 같이 변경

<!-- The big email subscribe modal content -->
{% 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 %}

---

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>

---

search.html

blogmaker 하위에 search.html 생성 후

---
layout: page
current: search
title: Search Result
navigation: true
logo:
class: page-template
subclass: 'post page'
---

<form action="/search" method="get" hidden="hidden">
    <label for="search-box"></label>
    <input type="text" id="search-box" name="query">
</form>

<ul class="mylist" id="search-results"></ul>

<script>
    window.store = {
    {% for post in site.posts %}
    "{{ post.url | slugify }}": {
        "title": "{{ post.title | xml_escape }}",
            "author": "{{ post.author | xml_escape }}",
            "category": "{{ post.category | xml_escape }}",
            "content": {{ post.content | strip_html | strip_newlines | jsonify }},
        "url": "{{ post.url | xml_escape }}"
    }
    {% unless forloop.last %},{% endunless %}
    {% endfor %}
    };
</script>
<script src="assets/js/lunr.js"></script>
<script src="assets/js/search.js"></script>

 

출처 : 

Jekyll 기반의 GitHub Page 생성(5) - lunr.js를 이용한 Search 기능 추가