Search Hugo

Nestero 01 July 2025 | 01 July 2025

Dalam catatan ini akan membahas bagaimana cara membuat halaman pencarian untuk website yang dibuat dengan Hugo, halaman pencarian yang akan dibuat kali ini sangat simpel dan sederhana dengan memanfaatkan file index.json yang digenerate oleh hugo dan sedikit sentuhan javascript tentunya.

Generate file index.json

Ada beberapa langkah yang diperlukan untuk generate file index.json di Hugo.

Pertama buat file index.json

themes/<nama_thema>layouts/index.json

[
  {{- with $.Site.GetPage "/<nama_page>" }}
    {{- range $index, $data := .Pages }}
    {{- if $index }},{{ end }}
    {
      "title": "{{ .Title  }}",
      {{ $sum := .Summary | plainify }}
      "summary": "{{ replace $sum "\n" "" }}",
      "url": "{{ .RelPermalink }}"
    }
    {{- end }}
  {{- end }}
]

untuk /<nama_page> dan komponen seperti title, summary, dan yang lainnya silahkan di sesuaikan sesuai kebutuhan.

Kedua mengatur front matter, tambahkan JSON di Output

[outputs]
  home = ["HTML", "RSS", "JSON"]

Membuat layout

content/cari/_index.md

---
title: Pencarian
---

themes/<nama_theme>layouts/cari/list.html

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  <input id="search-input" type="text" placeholder="Cari ...." name="search-input">
  <div id="search-results" class="container"></div>
  <script src="{{ .Site.BaseURL }}js/cari.js"></script>
{{ end }}

Membuat fungsi pencarian dengan javascript

themes/<nama_thema>/static/js/cari.js

// Fungsi untuk mengambil data JSON dari /index.json
async function fetchData() {
  try {
    const response = await fetch('/index.json');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Gagal mengambil JSON:', error);
    return [];
  }
}

// Fungsi untuk mencari berdasarkan kata kunci
async function cariCatatan(query) {
  const data = await fetchData();
  const results = data.filter(item => 
    item.title.toLowerCase().includes(query.toLowerCase()) ||
    item.summary.toLowerCase().includes(query.toLowerCase())
  );
  
  // Mengembalikan judul, url, dan ringkasan
  return results.map(item => ({
    title: item.title,
    url: item.url,
    summary: item.summary
  }));
}

// Fungsi untuk menampilkan hasil pencarian
async function showResults(query) {
  const resultContainer = document.getElementById('search-results');
  
  // Jika kueri kosong, hapus hasil pencarian
  if (!query.trim()) {
    resultContainer.innerHTML = '';
    return;
  }

  const results = await cariCatatan(query);
  
  // Jika tidak ada hasil
  if (results.length === 0) {
    resultContainer.innerHTML = '<p>Catatan Tidak Ditemukan !!!</p>';
    return;
  }
  
  // Menampilkan hasil title, url dan summary
  resultContainer.innerHTML = results.map(item => 
    `<div>
      <a href="${item.url}"><h2>${item.title}</h2></a>
      <p>${item.summary}</p>
    </div>`
  ).join('');
}

// Event listener untuk input pencarian
document.getElementById('search-input').addEventListener('input', (e) => {
  showResults(e.target.value);
});