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 }}