Pagination Halaman Di Hugo

Disini kamu akan belajar tentang pagination. Mulai dari belajar tentang apa itu pagination dan cara membuat pagination di situs hugo.

Pagination adalah pembagian halaman berdasarkan konten atau artikel pada halaman tersebut.

Umumnya pagination dibagi berdasarkan jumlah artikel maksimum pada setiap halaman yang dibagi.

Di hugo kita dapat dengan mudah membuat pagination pada halaman.

Pagination dibagi menjadi 2, yaitu pagination pada halaman daftar konten atau artikel dan pagination pada halaman konten atau artikel itu sendiri.

Pagination di halaman daftar konten atau artikel

Disini saya akan menggunakan internal template dari hugo yang digunakan untuk pagination.

Internal template adalah susunan kode atau sintaks yang dikhususkan untuk tujuan tertentu.

Dengan internal template, kita tidak perlu lagi bersusah payah membuat semuanya dari awal.

Cara menggunakan internal template sangat mudah. Kamu hanya perlu memasukkan satu baris sintaks ke tempat dimana itu diperlukan.

Misalnya, untuk internal template pagination. Maka umumnya kita memanggilnya di halaman daftar konten atau artikel, lebih tepatnya di file list.html.

Lihat contoh menggunakan internal template dibawah ini:

File list.html:

1{{ template "_internal/pagination.html" . }}
2{{ range .Paginator.Pages }}
3    <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
4    {{ .Summary }}
5{{ end }}

Selain menggunakan internal template pagination, kamu juga bisa membuat pagination kustom sendiri menggunakan .Paginator object.

Daftar paginator object

Cara menggunakannya cukup mudah. Kamu hanya perlu memanggil paginator object dibelakang variabel .Paginator.

Sebagai contoh:

1{{ range .Paginator.Pagers }}
2    <p>{{ .TotalPages }}
3{{ end }}

Perlu diingat, tidak semua object digunakan bersamaan dengan variabel .Paginator.

Jadi, sesuaikan dengan fungsi object yang akan dipakai.

PageNumber

Mereferensikan nomor halaman saat ini dalam urutan .Pagers.

URL

Url relatif dari halaman pagers saat ini. Misalnya, https://domainku.com/page/2.

Pages

Mereferensikan halaman untuk pagers saat ini.

NumberOfElements

Mereferensikan jumlah artikel atau konten pada halaman pagers saat ini.

HasPrev

Digunakan untuk mengetahui apakah halaman pagers saat ini mempunyai halaman pagers sebelumnya.

Misalnya, halaman pagers 2 memiliki halaman pagers 1.

Prev

Mereferensikan halaman pagers sebelumnya.

HasNext

Digunakan untuk mengetahui apakah halaman pagers saat ini mempunyai halaman pagers selanjutnya.

Misalnya, halaman pagers 1 memiliki halaman pagers 2.

Next

Mereferensikan halaman pagers selanjutnya.

First

Mereferensikan pagers pertama dari total semua pagers.

Last

Mereferensikan pagers terakhir dari total semua pagers.

Pagers

Digunakan untuk mendapatkan daftar pagers untuk membuat pagination kustom.

PageSize

Mereferensikan ukuran untuk setiap pagers (ini mirip TotalPages).

TotalPages

Mereferensikan total halaman pada pagers saat ini.

TotalNumberOfElements

Mereferensikan jumlah semua (keseluruhan) pagers yang dibuat.

Pagination di halaman konten atau artikel

Untuk membuat pagination di halaman konten atau artikel sebenarnya sangat sederhana dan mudah.

Kamu hanya perlu memanggil variabel .PrevInSection dan .NextInSection di dalam file yang mengatur konten atau artikel itu sendiri, lebih tepatnya di file single.html.

Lihat contoh penggunaannya dibawah ini:

 1{{ if .Section }}
 2<div class="NextPrev-container">
 3    {{ with .PrevInSection }}
 4        <a class="prev" href="{{.Permalink}}">❮ {{.Title}}</a>
 5    {{ end }}
 6    {{ with .NextInSection }}
 7        <a class="next" href="{{.Permalink}}">{{.Title}} ❯</a>
 8    {{ end }}
 9</div>
10{{ end }}