Sejak memasang "dark" theme, saya cenderung menjadi malas menulis. Untuk sementara, dark theme saya disable dulu yaa. Terima kasih (^_^) (bandithijo, 2024/09/15) ●

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

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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
1
2
3
4
5
6

...
...

{% 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

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

Penulis

bandithijo

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

1287153a5a9f6db9efda51d44b9e10e6744965e1