페이지 템플릿, css는 구현되어 있다고 가정

1 _layouts 디렉토리 하위에 적용할 검색용 레이아웃 파일을 추가하고

    project
        ├─ _layouts
            ├─ search_layout_name.html
        ...

2 추가한 레이아웃 페이지(search_layout_name.html)를 구현한 다음

• body에 검색 영역 추가

        <div>
            <!-- 키워드 입력 영역 -->
            <form type="submit" action="{검색 페이지 path}">
                <input id="{검색 입력란 id}" type="text" name="{검색 키워드 query 변수 이름}" />
            </form>
          
            <!-- 검색 결과 영역 -->
            <section id="{검색 결과 영역 id}">
            </section>
        </div>
  
• 필수 라이브러리 선언

        <!-- underscore template engine-->
        <script type="text/javascript" src="//cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
      
        <!-- search library -->
        <script type="text/javascript" src="//cdn.jsdelivr.net/gh/mindcloud92/dddd.static-search@6ab1ea67a0357bed734a216d4de9e675c13ec45a/src/dist/dddd.search.min.js"></script>
  

  template engine은 underscore를 사용하지 않아도 됨

• 검색 결과 template 추가

        <script id="{검색결과 템플릿 id}" type="text/template">
            <!-- supported properties:  data -->
        </script>
  
• 사이트에 있는 전체 글 JSON으로 변환

        {% assign posts = '' | split: ',' %}
        {% for post in site.posts %}
            {% capture v %}
                "title": "{{ post.title | xml_escape }}",
                "category": "{{ post.category }}",
                "sub_category": ["{{ post.sub_category }}"],
                "content": {{ post.content | strip_html | strip_newlines | jsonify }},
                "tags": [{% for tag in post.tags %} "{{ tag }}" {% unless forloop.last %},{% endunless %} {% endfor %}],
                "date": "{{ post.date | date: '%Y' }}",
                "url": "{{ post.url | xml_escape | relative_url }}",
                "thumbnail": "{{ post.thumbnail | relative_url }}",
                "thumbnail_type": "{{ post.thumbnail_type | default: h-full }}"
            {% endcapture %}
           
            {% assign v = v | prepend: '{' | append: '}' | strip_newlines %}
            {% unless forloop.last %}
                {% assign v = v | append: ', ' %}
            {% endunless %}
           
            {% assign posts = posts | push: v %}
         {% endfor %}
  
• window.onload event 구현

        window.onload = () => {
            const data = [{{ posts }}];
            const search = new dddd.Search(data);
              
            document.getElementById('searchInput').value = search.keyword;
            search.renderResult();
        }
  

3 프로젝트 루트 경로에 검색 페이지 markdown 파일을 추가하고

search_path.md

    ---
    layout: search
    ---

4 원하는 영역에 검색 페이지 링크를 걸면 끗

    <a href="{검색 페이지 path}">검색</a>

---

Reference

• dddd.static-search Documentation
• underscore.js 공식 사이트