Hugo Pagination Tutorial: Navigasi List Pages yang Efisien

Update: 3 February 2026

Baca: 1 menit

Hugo Pagination Tutorial: Navigasi List Pages yang Efisien

Pagination adalah fitur penting untuk website dengan banyak content. Hugo menyediakan built-in pagination system yang powerful dan mudah dikustomisasi.

Setup Pagination

Configuration

# hugo.toml
[pagination]
  pagerSize = 10  # Posts per page
  path = 'page'

List Template dengan Pagination

{{ define "main" }}
<div class="container">
  <h1>{{ .Title }}</h1>
  
  <!-- Posts -->
  <div class="grid">
    {{ range .Pages }}
    <article>
      <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
      <p>{{ .Description | default .Summary }}</p>
    </article>
    {{ end }}
  </div>
  
  <!-- Pagination -->
  {{ template "_internal/pagination.html" . }}
</div>
{{ end }}