Mulai April 2020, bandithijo.com akan menggunakan GitHub subdomain menjadi bandithijo.github.io. Penggunaan domain .com tidak sejalan dengan cara pandang saya terhadap sebuah blog, dimana blog harus bisa tetap hidup tanpa saya. Terima kasih (^_^) (bandithijo, 2020/03/25) ●

Membuat Navigasi Post (Next Prev) pada Jekyll

Ditulis: 2020/04/18
Jekyll Tips

بسم الله الرحمن الرحيم

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.

<!-- _inlcudes/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.

<!-- _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

Penulis

bandithijo

BanditHijo adalah nama pena saya – meminjam istilah keren dari para penulis. Teman-teman menyebut saya sebagai GNU/Linux Enthusiast. Saya memang gemar mengutak-atik sistem operasi ini. Bukan karena hobi tapi karena saya perlu untuk menggunakannya. Hehe.

- Rizqi Nur Assyaufi

Berlangganan via Email

Jangan sampai ketinggalan kabar dan info terbaru mengenai BanditHijo (R)-Chive.
Ayo bergabung!

28dc03c11c68cf4aadee6d17e41ef5d4cac75aea