📘 [GithubPages] Jekyll hydejack Search bar 구현 - 4

2025년 03월 05일 in Study / ETC on #Jekyll #GithubPages

[GithubPages] Jekyll hydejack Search bar 구현

---

• ✅ SimpleJekyllSearch 구현
• 1. assets/search.json download link
  • 1-2. assets/js/simple-jekyll-search.min.js download link
• 2. _includes/body/menu.html 상단 메뉴 search bar추가
• 3. _layout/search.html 레이아웃 생성
• 4. search-init.js 스크립트 생성
• 5. _sass/my-style.css _sass/_variables.scss
• 6. search.md 생성
• 📑 Reference

블로그를 시작하면 여러가지 기능들을 구현해보면서 재미를 붙이기 시작했다. 앞으로 study나 dev기록들을 포스팅 할 예정이다. 기록들이 늘어난다면 내가 적었던 글들을 쉽게 찾아보기 힘들것 같아서 Search bar 기능을 구현해보자 하는 생각에 이 글을 작성한다. 구글에서 검색하다가 발견한 SimpleJekyllSearch 오픈 소스 라이브러리를 이용하여 간단하게 구현이 가능했다.

✅ SimpleJekyllSearch 구현

---

1. assets/search.json download link

# file: `assets/js/search.json`

---
layout: none
---
[
  {% for post in site.posts %}
    {
		"title"    : "{{ post.title | escape }}",
	    "categories": "{{ post.categories | join: ' >> ' }}",
	    "tags"     : "{{ post.tags | join: ', ' }}",
	    "url": "{{ post.url | prepend: site.baseurl }}",
	    "date": "{{ post.date | date: '%Y년 %m월 %d일' }}"
    } {% unless forloop.last %},{% endunless %}
  {% endfor %}
]

이 파일은 검색을 수행하기 위한 데이터 소스로 사용된다.

검색 데이터가 다음과 같은 format으로 표현되며 원하는 표현 방식으로 수정하면 된다.

1-2. assets/js/simple-jekyll-search.min.js download link

위 경로에 세팅해준다.

2. _includes/body/menu.html 상단 메뉴 search bar추가

---

# file: `_includes/body/menu.html`

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css" />
<div id="_navbar" class="navbar fixed-top">
  <div class="content">
    <span class="sr-only">{{ site.data.strings.jump_to | default:"Jump to" }}{{ site.data.strings.colon | default:":" }}</span>
    <div class="nav-btn-bar">
      <a id="_menu" class="nav-btn no-hover" href="#_drawer--opened">
        <span class="sr-only">{{ site.data.strings.navigation | default:"Navigation" }}</span>
        <span class="icon-menu"></span>
      </a>
      <div class="nav-span">
        <a href="{{ '/search' | prepend: site.baseurl }}" class="nav-btn no-hover top-menu">
          <i class="fas fa-fw fa-search"></i>
          <!-- <span>Search</span> -->
        </a>
      </div>
    </div>
  </div>
</div>
<hr class="sr-only" hidden />

상단 메뉴에 돋보기 모양이 추가되었다.

3. _layout/search.html 레이아웃 생성

---

# file: `_layout/search.html`

---
layout: default
title: Search
permalink: /search/
---
<div class="search-page">
  <div class="search-header">
    <i class="fas fa-search fa-fw search-icon"></i>
    <input id="search-input" type="search" placeholder="Search" />
  </div>
  <ul id="results-container" class="search-results"></ul>
</div>

<ul id="results-container"></ul>

<script src="{{ '/assets/js/simple-jekyll-search.min.js' | relative_url }}"></script>
<script src="{{ '/assets/js/search-init.js' | relative_url }}"></script>
<script>
  document.addEventListener('DOMContentLoaded', initSimpleSearch);
  document.addEventListener('hy-push-state-load', initSimpleSearch);
  initSimpleSearch();
</script>

[!NOTE] /search 페이지 이동중 template 파싱 오류가 발생함. Hydejack 테마에서는 페이지 로딩없이 이동하므로 search.html에서 직접 script를 사용하면 push-state로 로딩될 때 js가 파싱되지 않고 오류가 발생하는듯 하다. 따라서 js(search-init.js생성)는 별도로 분리하고 DOMContentLoaded 및 hy-push-state-load 이벤트를 모두 처리해줘야 한다.

---

4. search-init.js 스크립트 생성

---

# file: _assets/js/search-init.js

function initSimpleSearch() {
	const input = document.getElementById('search-input');
	const results = document.getElementById('results-container');
	if (!input || !results) return;

	if (window.simpleJekyllSearchInstance){
		// 이전 인스턴스를 제거 (동일한 DOM에 두 번 초기화 방지)
		delete window.simpleJekyllSearchInstance;
	} 
    
    SimpleJekyllSearch({
        searchInput: document.getElementById('search-input'),
        resultsContainer: document.getElementById('results-container'),
        json: '/search.json', // 또는 '{{ "/search.json" | relative_url }}'
        searchResultTemplate: `
        <li class="content-item">
          <div class="content-row">
            <i class="fas fa-folder fa-fw"></i>
            <a href="{url}">{categories}</a>
          </div>
          <div class="content-row">
            <i class="fas fa-book fa-fw"></i>
            <a href="{url}">{title}</a>
          </div>
          <div class="content-row">
            <i class="fas fa-tags fa-fw"></i>
            <a href="{url}">{tags}</a>
          </div>
          <div class="content-row">
            <i class="fas fa-calendar-alt fa-fw"></i>
            <a href="{url}">{date}</a>
          </div>
        </li>
      `,
        noResultsText: '검색 결과가 없습니다.',
        limit: 10,
        fuzzy: false
    });
}
  

• searchInput : input 태그에 text를 입력받는 요소
• resultsContainer : 검색 결과가 렌더링되어야 하는 요소
• json : 검색 데이터가 json에 직접 전달된다.
• searchResultTemplate : 검색 결과 템플릿
• templateMiddleware : 템플릿에서 일치하는 항목이 발견될 때 호출되는 함수
• noResultsText : 일치하는 검색 결과가 없을 경우 표시
• limit : 게시물 수 제한
• fuzzy : 덜 일치하는 항목도 검색 저는 false를 줬습니다.
• exclude : 검색 제외항목 추가

---

5. _sass/my-style.css _sass/_variables.scss

기본 검색 레이아웃 디자인이 좋지않아서 🤣 별도로 css를 추가했습니다.

# file: `_sass/my-style.css`
.search-page {
    max-width: 768px;
    margin: 3rem auto;
    padding: 2rem;
    backdrop-filter: blur(8px);
    background: var(--glass-bg);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.search-header {
    display: flex;
    align-items: center;
    background-color: var(--card-bg);
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 2rem;
    transition: border 0.3s ease;
}

.search-header:focus-within {
    border-color: var(--accent);
}

.search-icon {
    color: var(--icon-color);
    font-size: 1.2rem;
    margin-right: 0.8rem;
}

#search-input {
    flex: 1;
    border: none;
    font-size: 1.1rem;
    background: transparent;
    color: var(--text);
    outline: none;
}

.search-results {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--text);
}

.search-results li {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 1rem;
    padding: 1rem;
    transition: transform 0.2s ease, background 0.3s ease;
    color: var(--text); // 👈 명시적으로 추가
}

.search-results li.no-results {
    color: var(--text);
    font-style: italic;
    opacity: 0.8; 
}

.search-results li:hover {
    background-color: var(--hover-bg);
    transform: translateY(-2px);
}

.search-results a {
    color: var(--link);
    text-decoration: none;
    font-weight: 600; 
}

# file: `_sass/_variables.css`
:root {
    --glass-bg: rgba(255, 255, 255, 0.8);
    --card-bg: #ffffff;
    --border: #ddd;
    --hover-bg: #f0f0f0;
    --text: #111;
    --link: #007acc;
    --icon-color: #666;
    --accent: #007acc;
}

[data-theme="dark"] {
    --glass-bg: rgba(30, 30, 30, 0.5);
    --card-bg: #2a2a2a;
    --border: #444;
    --hover-bg: #3a3a3a;
    --text: #ddd;
    --link: #66ccff;
    --icon-color: #aaa;
    --accent: #66ccff; 
}

hydejack 테마는 dark mode, light mode 지원하기 때문에 색상 모드에 따라 css가 다르게 적용되게 추가한다.

6. search.md 생성

---

• _pages 폴더 안에 생성
• 루트 디렉터리에 생성하면 자동인식 되지만 _pages 폴더 안에 넣어서 관리하고 싶으면
• _config.yml 에서 collections에 pages 추가

# file: '_config.yml'
collections:
  pages:
    output: true
    permalink: /:name/

# file: `_pages/search.md` 
---
layout: search
title: Search
permalink: /search/
---

search.md 생성하여 search.html 레이아웃에 연결한다.

Search 기능이 잘 작동되는지 확인🤔

---

📑 Reference

---

• Simple-Jekyll-Search
• Jekyll에 검색 페이지 추가하기

---