Mengenal Liquid Templating di Jekyll: Panduan Lengkap untuk Pemula

Kalau kamu sudah mulai bermain-main dengan tema Jekyll dan ingin mengkustomisasinya, kamu pasti akan berhadapan dengan Liquid — bahasa templating yang digunakan Jekyll untuk menghasilkan halaman HTML secara dinamis dari konten statis.

Liquid dibuat oleh Shopify dan didesain khusus untuk bisa berjalan di lingkungan yang aman. Sintaksnya sederhana tapi sangat powerful untuk membangun layout yang fleksibel.

---

Tiga Komponen Utama Liquid

Liquid terdiri dari tiga elemen dasar:

1. Output — {{ }}

Digunakan untuk menampilkan nilai variabel atau ekspresi.

{{ page.title }}
{{ site.name }}
{{ post.date | date: "%d %B %Y" }}

2. Tags — {% %}

Digunakan untuk logika — if/else, loop, assignment, include, dll.

{% if page.author %}
  Ditulis oleh: {{ page.author }}
{% endif %}

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
{% endfor %}

3. Filters — |

Digunakan untuk memanipulasi nilai output. Filter diletakkan setelah variabel dengan tanda pipe |.

{{ "hello world" | capitalize }}       → Hello world
{{ site.posts | size }}                 → 42
{{ post.date | date: "%Y-%m-%d" }}      → 2026-08-05
{{ page.content | truncatewords: 50 }} → (50 kata pertama)

---

Variabel Penting di Jekyll

Variabel Site (site.*)

Berisi data dari _config.yml dan informasi global situs.

{{ site.title }}          → judul blog
{{ site.url }}            → URL situs
{{ site.description }}    → deskripsi situs
{{ site.posts }}          → semua post
{{ site.pages }}          → semua halaman
{{ site.data.nama }}      → data dari _data/nama.yml

Variabel Page (page.*)

Berisi data dari front matter halaman atau artikel yang sedang dirender.

{{ page.title }}          → judul halaman
{{ page.date }}           → tanggal post
{{ page.author }}         → penulis
{{ page.categories }}     → kategori
{{ page.tags }}           → tags
{{ page.url }}            → URL halaman ini
{{ page.content }}        → konten halaman
{{ page.excerpt }}        → cuplikan pertama

Variabel Post di dalam Loop

{% for post in site.posts %}
  {{ post.title }}
  {{ post.url }}
  {{ post.date }}
  {{ post.excerpt }}
{% endfor %}

---

Kontrol Alur (Control Flow)

If / Elsif / Else

{% if page.tags contains "featured" %}
  <span class="badge">Featured</span>
{% elsif page.tags contains "tutorial" %}
  <span class="badge">Tutorial</span>
{% else %}
  <span class="badge">Post</span>
{% endif %}

Unless (Kebalikan If)

{% unless page.hide_comments %}
  {% include comments.html %}
{% endunless %}

Case / When

{% case page.lang %}
  {% when "id" %}
    Bahasa Indonesia
  {% when "en" %}
    English
  {% else %}
    Unknown
{% endcase %}

---

Perulangan (Iteration)

For Loop Dasar

{% for post in site.posts %}
  <article>
    <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
    <p>{{ post.excerpt }}</p>
  </article>
{% endfor %}

Limit dan Offset

<!-- Tampilkan 3 post terbaru saja -->
{% for post in site.posts limit:3 %}
  {{ post.title }}
{% endfor %}

<!-- Skip 3 post pertama, tampilkan sisanya -->
{% for post in site.posts offset:3 %}
  {{ post.title }}
{% endfor %}

Loop dengan Index

{% for post in site.posts %}
  {{ forloop.index }}    → 1, 2, 3, ...
  {{ forloop.index0 }}   → 0, 1, 2, ...
  {{ forloop.first }}    → true jika iterasi pertama
  {{ forloop.last }}     → true jika iterasi terakhir
  {{ forloop.length }}   → total jumlah iterasi
{% endfor %}

---

Filter yang Sering Dipakai

<!-- String -->
{{ "jekyll" | upcase }}              → JEKYLL
{{ "  hello  " | strip }}           → hello
{{ "hello world" | replace: "world", "jekyll" }} → hello jekyll
{{ "hello" | prepend: "say " }}     → say hello
{{ "hello world" | split: " " }}    → ["hello", "world"]

<!-- Angka -->
{{ 3.14 | round }}                  → 3
{{ 3.14 | ceil }}                   → 4
{{ 3.14 | floor }}                  → 3
{{ -5 | abs }}                      → 5

<!-- Array -->
{{ site.posts | size }}             → jumlah post
{{ array | first }}                 → elemen pertama
{{ array | last }}                  → elemen terakhir
{{ array | join: ", " }}            → gabungkan dengan separator
{{ array | sort: "title" }}         → urutkan berdasarkan field
{{ array | where: "lang", "id" }}   → filter array berdasarkan nilai

<!-- URL -->
{{ "/path/to/page" | absolute_url }} → https://blog.kamu.com/path/to/page
{{ "/path/to/page" | relative_url }} → /path/to/page

<!-- Tanggal -->
{{ post.date | date: "%d %B %Y" }}  → 05 August 2026
{{ post.date | date_to_string }}    → 05 Aug 2026
{{ post.date | date_to_xmlschema }} → 2026-08-05T00:00:00+00:00

---

Assign dan Capture

Assign — Simpan Nilai ke Variabel

{% assign featured_posts = site.posts | where: "tags", "featured" %}
{% for post in featured_posts %}
  {{ post.title }}
{% endfor %}

Capture — Simpan String Panjang ke Variabel

{% capture page_title %}
  {{ page.title }} | {{ site.title }}
{% endcapture %}

<title>{{ page_title | strip }}</title>

---

Include — Komponen yang Bisa Dipakai Ulang

<!-- Menyertakan file _includes/header.html -->
{% include header.html %}

<!-- Dengan parameter -->
{% include card.html title=post.title url=post.url %}

Di dalam file _includes/card.html, parameter diakses via include:

<a href="{{ include.url }}">{{ include.title }}</a>

---

Kesimpulan

Liquid adalah inti dari sistem templating Jekyll. Dengan memahami output {{ }}, tags {% %}, dan filters |, kamu sudah punya fondasi yang cukup untuk mengkustomisasi atau membangun tema Jekyll dari nol.

Mulailah bereksperimen dengan memodifikasi file di _layouts dan _includes — dua folder ini adalah tempat dimana semua magic Liquid Jekyll terjadi.