Pendahuluan

Catatan kali ini mengenai Jekyll. Haha. Jarang-jarang saya menulis tentang Jekyll.

Kebetulan sedang iseng mendevelop blog untuk sebuah buletin yang terbit tiap hari Jum’at. Iseng saja saya bangun menggunakan Jekyll.

Karena blog tersebut adalah blog kedua yang saya buat dengan Jekyll. Maka saya akan mencoba memulai dengna tertib dan lebih rapi. Tidak seperti saat membuat blog ini yang lebih ke “asal jadi dulu”. Ahahaha.

Permasalahan

Post pada sebuah blog, pasti akan runut berdasarkan waktu dibuatnya.

Kalau berdasarkan user experience, setelah pembaca membaca artikel pada sebuah post sampai bawah, kalau ia tertarik, ia akan mencari artikel sebelumnya, atau daftar semua artikel, atau artikel yang memiliki topik yang sama (related post).

Maka dari itu, kita perlu untuk memasang, setidaknya menu navigasi untuk ke post sebelumnya atau ke post selanjutnya.

Penyelesaian Masalah

Saya akan membuat sebuah file bernama page-navigation.html di dalam direktori _includes.

Tujuannya agar lebih modular. Maksudnya, kita dapat memasang page navigation di mana saja yang kita perlukan, tinggal dipanggil menggunakan include.

FILE_includes/page-navigation.html

<div class="page-navigation mt-5">
  <div class="row d-flex justify-content-between">
    <div class="col-6 text-left">
      {% if page.previous.url %}
        <a class="prev" href="{{page.previous.url}}">&laquo; {{page.previous.title}}</a>
      {% endif %}
    </div>
    <div class="col-6 text-right">
      {% if page.next.url %}
        <a class="next" href="{{page.next.url}}">{{page.next.title}} &raquo;</a>
      {% endif %}
    </div>
  </div>
</div>

Oh yaa, untuk class dari stylesheet di atas, saya menggunakan Bootstrap CSS Framework.

Kalau teman-teman menggunakan CSS framework yang lain atau membuat sendiri, silahkan dimodifikasi sendiri yaa.

Selanjutnya tinggal memangilnya.

Karena saya akan menggunakannya pada halaman/layout post, maka akan saya pasangkan di _layouts/post.html.

FILE/_layouts/post.html

...
...

{% include page-navigation.html %}

...

Kelar!

Sudah deh, saya rasa segini saja catatannya.

Mudah banget yaa.

Selamat mencoba!

Terima kasih.

(^_^)

Referensi

1. blog.webjeda.com/related-post-jekyll/
   Diakses tanggal: 2020/04/18

2. talk.jekyllrb.com/t/how-to-link-to-next-and-previous-posts-for-same-blog-category/629
   Diakses tanggal: 2020/04/18

Lisensi

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

Penulis

BanditHijo adalah nama pena saya –meminjam istilah keren dari para penulis. Teman-teman menyebut saya sebagai Linux Enthusiast. Saya memang gemar mengutak-atik sistem operasi ini. Sistem operasi ini memberikan saya kebebasan untuk mengekspresikan ide-ide dalam membantu menyelesaikan pekerjaan saya sehari-hari.

- Rizqi Nur Assyaufi