Membuat Pagination Hugo

April 4, 2021

Misterthree

Facebook Twitter Instagram Youtube

Fitur Pagination adalah salah satu fitur yang membuat website dapat menampilkan data dengan lebih cepat, karena kita melakukan pembatasan terhadap berapa jumlah konten yang ditampilkan, sehingga website tidak perlu load seluruh data saat halaman halaman ditampilkan. Sebagai contoh kita memiliki 100 konten, jika tidak mengunakan pagination atau membatasi konten yang tampil, maka website kita akan menampilkan 100 konten tersebut, tentunya itu akan memakan banyak ruang dan waktu sampai 100 konten tersebut dapat ditampilkan.

• Untuk mengatur berapa jumlah konten yang tampil per halaman, anda perlu memasukkan code dibawah di konfigurasi config.toml . Sebagai contoh kita akan menampilkan 10 konten perhalaman maka konfigurasi nya :

  paginate = 10
  

• Untuk menampilkan konten berdasarkan pagination gunakan

  {{ range .Paginator.Pages }}
  ...
  {{ end }}
  

• Untuk menampilkan pagination

  {{ template "_internal/pagination.html" . }}
  

  Hugo akan menampilkan semua angka pagination yang tersedia beserta tombol next dan previous untuk berpindah halaman, atau jika kamu hanya ingin menampilkan tombol next dan previous gunakan kode dibawah ini :

  {{ if .Paginator.HasPrev }}
    <a href="{{ .Paginator.Prev.URL }}">  Prev </a>
  {{ end }}
  {{ if .Paginator.HasNext }}
    <a href="{{ .Paginator.Next.URL }}">  Next </a>
  {{ end }}
  

Sekian tutorial dari saya, semoga bermanfaat dan selamat mencoba…!