Pendahuluan

Pagination mungkin menjadi fitur yang diperlukan apabila kita memiliki koleksi post yang sangat banyak.

Tujuannya untuk memudahkan kita mencari sesuatu, misal judul artikel. Bayangkan apabila kita memiliki ratusan judul artikel, namun kita harus melihatnya satu persatu dalam satu halaman. Akan lebih mudah kalo kita pangkas, misal 10-20 judul artikel perhalaman. Tentu akan lebih mudah untuk kita sortir judul mana yang ingin kita baca apabila kita hanya mencari diantar 10-20 judul artikel.

Namun, seperti yang teman-teman ketahui, di blog ini saya tidak memasang pagination. Seharusnya saya memasang pagination pada halaman blog list atua vlog list. Tapi tidak saya lakukan. Saya memilih untuk menggelontorkan saja dengan gamblang seluruh daftar judul artikel yang saya punya. Tunjuannya untuk memotivasi diri sendiri, bahwa saya sudah menghasilkan tulisan sebanyak ini. Dengan begitu, saya akan tetap termotivasi untuk kembali menulis. Hahaha. Alasan macam apa itu.

Nah, sekedar mencatat dan sharing, saya akan berbagi catatan mengenai “Bagaimana memasang pagination pada Jekyll”.

Penerapan

Pagination biasanya akan dipasangkan pada halaman yang menampilkan sebuah collection. Collection dalam hal ini adalah posts.

Dengan jumlah posts yang banyak, tentu saja apabila kita melakukan pengulangan for (for loop), maka akan menghasilkan daftar posts yang banyak sekali seperti yang teman-teman bis alihat pada blog ini di halaman /blog dan halaman /vlog.

Langkah pertama, pasang gem jekyll-paginate pada Gemfile.

FILEGemfile

group :jekyll_plugins do
  # ...
  # ...
  gem "jekyll-paginate", "~> 1.1"
end

Install gems.

$ bundle install

Kemudian, enablekan pada _config.yml.

FILE_config.yml

# ...
# ...

plugins:
  - ...
  - ...
  - jekyll-paginate

Misalnya, pada kasus ini, saya akan memasangkan pagination pada halaman blog.

Namun, sebelumnya, kita buat terlebih dahulu logic dari pagination-nya. Saya akan menggunakan layout partial saja agar lebih modular.

Saya akan buat file bernama pagination.html di direktori _includes.

FILE_includes/pagination.html

<!-- Pagination -->
{% if paginator.total_pages > 1 %}
<nav aria-label="Page navigation example">
  <small>
    <ul class="pagination">
      {% if paginator.previous_page %}
        <li class="page-item">
          <a class="page-link" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo;</a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <span class="page-link">&laquo; Prev</span>
        </li>
      {% endif %}

      {% for page in (1..paginator.total_pages) %}
        {% if page == paginator.page %}
          <li class="page-item active">
            <span class="page-link">{{ page }}</span>
          </li>
        {% elsif page == 1 %}
          <li class="page-item">
            <a class="page-link" href="/">{{ page }}</a>
          </li>
        {% else %}
          <li class="page-item">
            <a class="page-link" href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
          </li>
        {% endif %}
      {% endfor %}

      {% if paginator.next_page %}
        <li class="page-item">
          <a class="page-link" href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">&raquo;</a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <span class="page-link">&raquo; Next</span>
        </li>
      {% endif %}
    </ul>
  </small>
</nav>
{% endif %}
<!-- END Pagination -->

Class di atas, saya menggunakan Bootstrap CSS Framework agar lebih mudah.

Nah, selanjutnya kita akan pasangkan pada halaman yang akan menampilkan pagination ini.

Dalam contoh kasus ini, halaman /blog.

Kita perlu memodifikasi for loop yang digunakan untuk menampilkaan daftar post.

Kalau secara normal seperti ini.

FILEpages/blog.html

---
layout: page
title: Blog
permalink: /blog/
---

<ul>
{% for post in site.posts %}
  <li><a href="{{ post.url }}">{{ post.date | date: '%y/%m/%d' }} : {{ post.title }}</a></li>
{% endfor %}
</ul>

Nah, karena sekarang, kita akan menggunakan pagination.

Maka, kita akan mengambil daftar post yang ada di paginator.posts bukan di site.posts.

FILEpage/blog.html

---
layout: page
title: Blog
permalink: /blog/
---

<ul>
{% for post in paginator.posts %}
  <li><a href="{{ post.url }}">{{ post.date | date: '%y/%m/%d' }} : {{ post.title }}</a></li>
{% endfor %}
</ul>

Untuk mengatur jumlah post yang ditampilkan dalam satu halaman, kita perlu mendefinisikannya pada _config.yml.

FILE_config.yml

# ...
# ...

plugins:
  - ...
  - ...
  - jekyll-paginate

paginate: 10
paginate_path: /page:num/

Bentuk URL path dari pagination di atas akan berupa.

http://localhost:4000/blog/page2/

Kita dapat memodifikasi sesuai keinginan.

Bentuk lain, bisa seperti ini,

FILE_config.yml

# ...
# ...
paginate_path: /page/:num/

http://localhost:4000/blog/page/2/

Perhatian

Untuk membuat pagination kita harus memiliki index.html bukan index.md. Karena pagination hanya dapat bekerja pada file bertipe .html.

Kelar!

Sepertinya segini saja yang dapat saya catat.

Apabila belum jelas, silahkan merujuk pada referensi yang saya berikan.

Terima kasih.

(^_^)

Referensi

1. jekyllrb.com/docs/pagination/
   Diakses tanggal: 2020/04/19

2. blog.webjeda.com/jekyll-pagination/
   Diakses tanggal: 2020/04/19

Lisensi

Tulisan ini dilisensikan dengan :
Atribusi-NonKomersial-BerbagiSerupa 4.0 Internasional (CC BY-NC-SA 4.0)

Penulis

My journey kicks off from reading textbooks as a former Medical Student to digging bugs as a Software Engineer – a delightful rollercoaster of career twists. Embracing failure with the grace of a Cat avoiding water, I've seamlessly transitioned from Stethoscope to Keyboard. Armed with ability for learning and adapting faster than a Heart Beat, I'm on a mission to turn Code into a Product.

- Rizqi Nur Assyaufi