Seandainya kita punya koleksi buku-buku seperti yang sudah ditulis dengan susah payah dalam situs ini, semuanya bisa kita letakkan di dalam sebuah folder, untuk ini saya memakai nama ‘sdyxz’, kependekan dari judul aslinya, She Diao Ying Xiong Zhuan.

Kita bisa membuat sebuah entry di dalam file ‘_config.yml’ sbb:

collection:
  sdyxz:
    output: true

Tetapi nama folder sdyxz tersebut harus kita beri awalan underscore ‘_’, menjadi ‘_sdyxz’.

Nantinya secara otomatis Jekyll akan membuat output folder yang bernama ‘sdyxz’, tanpa underscore.

Membuat Menu

Tentunya kalau koleksi tersebut mencapai 40 buku, belum termasuk buku-buku pendukungnya, adalah sangat tidak lucu kalau kita masukkan semuanya sekaligus menjadi sebuah dropdown menu atau menu sederhana lainnya. Lebih masuk akal kalau kita menulis sebuah file baru untuk menampilkan semuanya sekaligus, berikut keterangan yang perlu.

---
layout: page
title: Books
---

<ul>

  {% for book in site.sdyxz %}
    <li><a href="{{ book.url }}">{{book.title}}</a></li>
  {% endfor %}

</ul>

Masalah Dengan URL

Dalam contoh di atas kelihatannya semuanya sederhana, tetapi kalau kita sedang menulis dokumentasi untuk proyek yang akan dimuat di halaman GitHub, dan proyek itu adalah sebuah repository, maka variabel book.url di atas akan menjadi lain, dan halaman tidak akan ditemukan.

Contohnya, repository untuk proyek ini sendiri adalah https://github.com/memanah-rajawali, dan saya deploy menggunakan sub-direktori docs, nantinya Base URL dari proyek ini akan menjadi https://fxadilima.github.io/memanah-rajawali, tetapi isi variabel book.url di atas ternyata masih tetap /sdyxz/bab1.html, yang pasti salah.

Solusinya adalah menambahkan url: https://fxadilima.github.io/memanah-rajawali di dalam file _config.yml, lalu kita ubah sedikit href untuk link di atas menjadi sbb:


<li><a href="{{ site.url | relative_path }}{{ book.url }}">{{book.title}}</a></li>

Dengan cara ini kalau kita sedang membaca hasil rendering dokumen tersebut di localhost, maka site.url akan menjadi localhost:4000 atau PORT berapa pun yang kita pakai, sedangkan kalau kita sedang membacanya secara online, misalnya di host https://fxadilima.github.io/memanah-rajawali, maka nama tersebut akan menjadi semacam https://fxadilima.github.io/memanah-rajawali/sdyxz/bab1.html.

Dalam contoh dokumen ini sendiri, variabel post.relative_path adalah: .

Sedangkan variabel tags dokumen ini, yang bisa diakses melalui page.tags adalah:

Tags: frontmatter jekyll collections template blogs memanah-rajawali