Hugo 블로그 만들기 (4) - 검색 기능 개선 및 검색 페이지 구현 (Fuse.js)

<!-- layouts/_partials/docs/menu.html -->

<nav>
{{ partial "docs/brand" . }}
{{ partial "docs/search" . }}
<!-- ... -->
</nav>

<!-- layouts/_partials/docs/search.html -->

{{ if default true .Site.Params.BookSearch }}
<div class="book-search hidden">
  <input id="book-search-input" type="text" 
    placeholder="{{ i18n "Search" }}" aria-label="{{ i18n "Search" }}"
    maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>
<script>document.querySelector(".book-search").classList.remove("hidden")</script>
{{ end }}

// assets/search.js

'use strict';

{{ $searchDataFile := printf "%s.search-data.json" .Language.Lang }}
{{ $searchData := resources.Get "search-data.json" | resources.ExecuteAsTemplate $searchDataFile . | resources.Minify | resources.Fingerprint }}
{{ $searchConfig := i18n "bookSearchConfig" | default "{}" }}

(function () {
  const searchDataURL = '{{ partial "docs/links/resource-precache" $searchData }}';
  // ...
})();

[
{{- $pages := where .Site.Pages "Kind" "in" (slice "page" "section") -}}
{{- $pages = where $pages "Params.bookSearchExclude" "!=" true -}}
{{/* Remove until we know why it does not work, see https://github.com/alex-shpak/hugo-book/issues/528 */}}
{{/*- $pages = where $pages "Content" "not in" (slice nil "") -*/}}
{{- $pages = where $pages "Content" "!=" "" -}}

{{ range $index, $page := $pages }}
{{ if gt $index 0}},{{end}} {
    "id": {{ $index }},
    "href": "{{ $page.RelPermalink }}",
    "title": {{ (partial "docs/title" $page) | jsonify }},
    "section": {{ (partial "docs/title" $page.Parent) | default $.Site.Title | jsonify }},
    "content": {{ $page.Plain | jsonify }}
}
{{- end -}}
]

public % tree -L 1 
.
├── ...
├── en.search-data.min.eab6c7b9001273416ee00669c84e2e15e0c20a277354e60f930fbf616c3450cd.json
├── ...

(function () {
  const searchDataURL = '{{ partial "docs/links/resource-precache" $searchData }}';
  // ...

  const input = document.querySelector('#book-search-input');
  const results = document.querySelector('#book-search-results');

  if (!input) {
    return
  }

  input.addEventListener('focus', init);
  input.addEventListener('keyup', search);

  document.addEventListener('keypress', focusSearchFieldOnKeyPress);
  // ...
})();

(function () {
  // ...
  function init() {
    input.removeEventListener('focus', init); // init once
    input.required = true;

    fetch(searchDataURL)
      .then(pages => pages.json())
      .then(pages => {
        window.bookSearchIndex = new Fuse(pages, indexConfig);
      })
      .then(() => input.required = false)
      .then(search);
  }
  // ...
})();

(function () {
  // ...
  function search() {
    while (results.firstChild) {
      results.removeChild(results.firstChild);
    }

    if (!input.value) {
      return;
    }

    const searchHits = window.bookSearchIndex.search(input.value).slice(0,10);
    searchHits.forEach(function (page) {
      const li = element('<li><a href></a><small></small></li>');
      const a = li.querySelector('a'), small = li.querySelector('small');

      a.href = page.item.href;
      a.textContent = page.item.title;
      small.textContent = page.item.section;

      results.appendChild(li);
    });
  }
  // ...
})();

(function () {
  // ..
  input.addEventListener('focus', init);
  input.addEventListener('keyup', search);
  input.addEventListener('keydown', handleEscape);
  input.addEventListener('blur', clearResults);
  // ...

  /**
   * @param {KeyboardEvent} event
   */
  function handleEscape(event) {
    if (event.key === 'Escape') {
      clearResults();
      input.blur();
    }
  }

  function clearResults() {
    while (results.firstChild) {
      results.removeChild(results.firstChild);
    }
  }
  // ...
})();

---
title: "Search"
type: "search"
---

function goToSearchPage() {
  const searchInput = document.getElementById('book-search-input');
  const query = searchInput.value.trim();
  if (query) {
    window.location.href = '/search/?q=' + encodeURIComponent(query);
  }
}

<!-- layouts/_partials/docs/search-input.html -->

<div class="book-search hidden">
  <div class="search-input-container">
    <input type="text" id="book-search-input"
      placeholder="{{ i18n "Search" }}" aria-label="{{ i18n "Search" }}"
      maxlength="64" data-hotkeys="s/" onkeydown="if(event.key==='Enter') goToSearchPage()" />
    <button type="button" id="book-search-button" class="book-search-btn" onclick="goToSearchPage()">
      <i class="fa-solid fa-magnifying-glass"></i>
    </button>
  </div>
  <div class="book-search-spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>
<script>
document.querySelector(".book-search").classList.remove("hidden");
// goToSearchPage() 함수 추가
</script>

// assets/search-input.js

(function () {
  // ...
  function search() {
    // ...
    if (searchHits.length > 3) {
      const moreLink = element('<li class="book-search-more"><a href></a></li>');
      const a = moreLink.querySelector('a');
      a.href = '{{ "/search/" | relURL }}?q=' + encodeURIComponent(input.value);
      a.textContent = '더보기 (총 ' + searchHits.length + '개)';
      results.appendChild(moreLink);
    }
  }
  // ...
})();

// assets/search/list.js

document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const query = urlParams.get('q') || '';
  const currentPage = parseInt(urlParams.get('page')) || 1;
  const itemsPerPage = 10;

  window.bookSearch.initIndex()
    .then(() => {
      initSearch();
      performSearch();
    });

  function initSearch() {
    const displayElement = document.getElementById('search-query-display');
    if (query) {
      displayElement.innerHTML = `"${query}" 검색 결과 <em class="list-count" id="search-count">0</em>`;
    } else {
      displayElement.textContent = '검색어를 입력해주세요.';
    }
  }
  // ...
});

document.addEventListener('DOMContentLoaded', function() {
  // ...

  function performSearch() {
    const sourceContainer = document.querySelector('.search-base');
    const resultsContainer = document.querySelector('.search-results');
    const allPostItems = Array.from(sourceContainer.querySelectorAll('.post-item'));

    if (!query) {
      document.getElementById('search-no-results').classList.remove('hidden');
      document.getElementById('search-pagination').style.display = 'none';
      return;
    }

    // Fuse 검색 인덱스를 활용한 검색 수행
    const searchHits = window.bookSearchIndex.search(query);

    if (searchHits.length === 0) {
      document.getElementById('search-no-results').classList.remove('hidden');
      document.getElementById('search-count').textContent = '0';
      document.getElementById('search-pagination').style.display = 'none';
      return;
    }

    // 검색 결과와 대응되는 DOM 요소를 찾기 (href 속성이 일치하는지 확인)
    const matchedItems = [];
    searchHits.forEach((result) => {
      const href = result.item.href;
      const matchedItem = allPostItems.find(item => {
        const link = item.querySelector('.post-title a');
        return link && link.getAttribute('href') === href;
      });
      if (matchedItem) {
        matchedItems.push(matchedItem.cloneNode(true));
      }
    });

    // 페이지네이션 생성을 위한 인덱스 계산
    const totalPages = Math.ceil(matchedItems.length / itemsPerPage);
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = Math.min(startIndex + itemsPerPage, matchedItems.length);

    // 현재 페이지의 게시글을 가상 DOM 컨테이너에 추가하고 실제 DOM에 업데이트
    const fragment = document.createDocumentFragment();
    for (let i = startIndex; i < endIndex; i++) {
      fragment.appendChild(matchedItems[i]);
    }
    resultsContainer.innerHTML = '';
    resultsContainer.appendChild(fragment);

    // 검색 결과 수를 업데이트
    document.getElementById('search-count').textContent = matchedItems.length;

    buildPagination(currentPage, totalPages, query);
  }
  // ...
});

document.addEventListener('DOMContentLoaded', function() {
  // ...

  /**
   * @param {number} currentPage - 현재 페이지 (1부터 시작)
   * @param {number} totalPages - 총 페이지 수
   * @param {string} query - 검색 쿼리
   */
  function buildPagination(currentPage, totalPages, query) {
    const paginationContainer = document.getElementById('search-pagination');

    if (totalPages <= 1) {
      paginationContainer.style.display = 'none';
      return;
    }

    paginationContainer.style.display = 'block';

    const createPageUrl = (page) => {
      return `/search/?q=${encodeURIComponent(query)}${page > 1 ? '&page=' + page : ''}#pagination-anchor`;
    };

    // 10개 게시글 단위로 페이지를 그룹화
    const groupNumber = Math.floor((currentPage - 1) / 10);
    const groupStart = groupNumber * 10 + 1;
    let groupEnd = groupStart + 9;
    if (groupEnd > totalPages) {
      groupEnd = totalPages;
    }

    // 이전 및 다음 페이지 그룹을 계산
    const prevGroupPage = groupStart - 10;
    const nextGroupPage = groupEnd + 1;

    // 이전 페이지 그룹으로 이동하는 링크
    const prevButtonHTML = groupStart > 1
      ? `<a href="${createPageUrl(prevGroupPage > 1 ? prevGroupPage : 1)}" class="pagination-nav pagination-link">
          <i class="fa-solid fa-backward"></i> 이전
        </a>`
      : `<span class="pagination-nav disabled">
          <i class="fa-solid fa-backward"></i> 이전
        </span>`;

    // 현재 페이지 그룹에 속한 각각의 페이지로 이동하는 링크
    let pagesHTML = '';
    for (let i = groupStart; i <= groupEnd; i++) {
      if (i === currentPage) {
        pagesHTML += `<span class="pagination-page current" id="current-page">${i}</span>`;
      } else {
        pagesHTML += `<a href="${createPageUrl(i)}" class="pagination-page pagination-link">${i}</a>`;
      }
    }

    // 다음 페이지 그룹으로 이동하는 링크
    const nextButtonHTML = nextGroupPage <= totalPages
      ? `<a href="${createPageUrl(nextGroupPage)}" class="pagination-nav pagination-link">
          다음 <i class="fa-solid fa-forward"></i>
        </a>`
      : `<span class="pagination-nav disabled">
          다음 <i class="fa-solid fa-forward"></i>
        </span>`;

    // 페이지네이션을 `#search-pagination` 영역에 업데이트
    paginationContainer.innerHTML = `
      <div id="pagination-anchor"></div>
      <nav class="pagination">
        ${prevButtonHTML}
        <div class="pagination-pages">
          ${pagesHTML}
        </div>
        ${nextButtonHTML}
      </nav>`;
  }
});