Apa Itu Front Matter Di Hugo

Disini kita akan berkenalan dengan front matter hugo. Definisi, fungsi dan variabel front matter yang dapat kita gunakan untuk front matter.

Front matter adalah kemampuan yang dimiliki hugo yang memungkinkan kita untuk menyimpan metadata atau berbagai data yang berhubungan dengan konten.

Metadata atau data yang dimaksud disini dapat berupa judul, waktu, nama penulis artikel atau hal lainnya yang terhubung dengan postingan atau konten tersebut.

Front matter hanya ditujukan untuk file markdown yang berada dibawah folder content.

Walaupun sebenarnya kita juga dapat membuat folder dengan nama lainnya (sesuai kemauan) dengan kemampuan yang sama dengan folder content.

Untuk melakukan hal itu, perlu beberapa konfigurasi di file config.toml (kalau ada kesempatan akan saya bahas).

Cara menulis front matter dan contoh variable front matter

Terdapat tiga jenis cara penulisan front matter di file markdown.

Diantaranya yaitu menggunakan cara penulisan file toml, yaml, atau json.

Lihat contoh dibawah ini untuk ketiga jenis file tersebut:

File markdown (dengan front matter yaml)

1---
2title: "Judul artikel"
3date: 2022-10-12T20:05:09+08:00
4draft: false
5---

File markdown (dengan front matter toml)

1+++
2title = "Judul artikel"
3date = 2022-10-12T20:05:09+08:00
4draft = false
5+++

File markdown (dengan front matter json)

1{
2    "title": "Judul artikel",
3    "date": "2022-10-12T20:05:09+08:00",
4    "draft": "false"
5}

format yaml menggunakan - - - diawal dan diakhir.

format toml menggunakan + + + diawal dan diakhir.

format json menggunakan { diawal dan } diakhir.

title, date, dan draft merupakan variabel default dari hugo.

Masing-masing format file (yaml, toml, dan json) memiliki perbedaan cara penulisannya.

Perhatikan perbedaan cara penulisan dari ketiga format diatas.

Setelah mengetahui tiga cara penulisan front matter pada file markdown.

Kita akan belajar cara menggunakan variabel bawaan hugo yang khusus untuk front matter.

Kita juga akan belajar membuat variabel front matter versi kita sendiri.

Sebelum ke variabel front matter. Kita perlu tau, bahwa, kita dapat mengatur sebuah halaman khusus (misalnya halaman blog) menggunakan front matter.

Misalnya kita ingin mengubah judul dari halaman khusus blog atau mengubah deskripsi untuk halaman khusus tersebut.

Untuk melakukannya, kita perlu membuat sebuah file khusus yang bernama _index.html.

File _index.md

File ini digunakan untuk mengatur halaman-halaman hugo dengan menggunakan front matter.

Isi file _index.md ini adalah variable bawaan hugo yang khusus untuk front matter, atau variable front matter yang kita buat sendiri.

Misalnya, halaman blog dapat kita ubah dan tambahkan datanya (judul pada halaman blog, isi halaman blog, dan hal keren lainnya).

Kita harus menempatkan file _index.md di dalam folder yang ingin kita atur.

Kira-kira begini penggambarannya:

1content
2    ├── blog
3          ├── _index.md
4          ├── post1.md
5          ├── post2.md

Contoh isi file _index.md:

1---
2title: 'Halaman Blog'
3description: 'Halaman Blog menyajikan berbagai artikel dengan beragam topik pembahasan'
4---

Hasilnya dapat kamu lihat setelah membuka halaman blog. https://domainku.com/blog

Variabel bawaan (default) untuk front matter

Saya akan membagikan hanya beberapa variabel bawaan hugo yang penting untuk sebuah artikel atau postingan.

Selebihnya, kamu bisa lihat secara lengkap di dokumentasi resmi hugo.

Klik link ini untuk melihatnya.

cascade

Digunakan untuk membuat suatu nilai atau value yang telah ditetapkan di _index.md diturunkan ke file dibawahnya.

Variabel cascade digunakan untuk membuat suatu nilai atau value pada halaman khusus, kemudian nilai atau value tersebut diturunkan ke file-file markdown di dalam kategori (halaman khusus) tersebut.

Pada contoh ini berarti semua file markdown yang berada dibawah direktori blog.

Sebagai contoh tambahan, saya ingin semua postingan di direktori (kategori) blog, menggunakan sebuah background yang sama.

Maka saya akan mengaturnya seperti ini:

Saya menulisnya dengan cara penulisan file toml agar lebih mudah dipahami.

File _index.md:

1+++
2[cascade]
3background = '/foto/kucing_besar.jpg'
4    [cascade._target]
5        path = '/blog/**'
6        kind = 'page'
7+++

[cascade] digunakan untuk menyematkan atau menyisipkan kontennya. Pada contoh diatas, saya menyematkan background foto kucing_besar.jpg.

[cascade._target] digunakan untuk mengatur target halaman berdasarkan kriteria yang kita sematkan. Pada contoh di atas, kriterianya adalah path dan kind.

Intinya foto kucing_besar.jgp ingin di wariskan ke semua halaman yang berada di kategori blog.

Misalnya, https://domainku.com/blog/artikel1, https://domainku.com/blog/artikel2, dan halaman lainnya.

Untuk mengakses background diatas, kita dapat menggunakan variabel bawaan hugo. Variabel tersebut yaitu variabel .Params.

Misalnya saya ingin background kucing_besar.jpg muncul di setiap halaman yang termasuk ke direktori (kategori) blog.

Maka saya akan memanggil background tersebut di dalam file single.html.

File single.html

1{{ define "main" }}
2    <img src="{{ .Params.background }}">
3    <h1>{{ .Title }}</h1>
4    {{ .Content }}
5{{ end }}

Background akan muncul di setiap artkel yang termasuk ke dalam direktori (kategori) blog.

date

Variabel date digunakan untuk mengatur waktu dari postingan atau artikel hugo.

Kamu bisa mengaturnya secara manual (yaitu dengan menambahkan variabel date di bagian front matter artikel).

Atau kita juga bisa mengatur variabel date ini, agar secara otomatis menghasilkan tanggal yang tepat dengan menggunakan page variabel di dalam file default.md yang ada di dalam folder archetypes.

description

Nilai: string

Variabel description digunakan untuk menentukan deskripsi artikel hugo.

Kita dapat memanggilnya pada tag meta description HTML atau kita juga dapat memunculkan cuplikan deskripsi ini di mana saja (selama kita memanggil variabelnya dengan benar).

draft

Nilai: true atau false

Variabel draft digunakan untuk menyimpan postingan agar tidak dipublikasikan atau agar tidak dilihat oleh penggunjung situs.

Kita juga dapat memaksa hugo untuk menampilkan konten atau artikel yang di draft dengan menggunakan perintah hugo server -D.

expiryDate

Nilai: tanggal atau waktu dalam format yang valid

Digunakan sebagai penanda kapan konten atau artikel yang kita publikasikan kadaluarsa. Misalnya kadaluarsa tahun 2030 atau lebih dari itu (sesuaikan dengan keinginan/kebutuhan masing-masing).

headless

Nilai: true atau false

Digunakan untuk membuat sebuah halaman atau postingan menjadi sebuah halaman khusus (artinya tidak dapat diakses dimana saja hanya dengan menggunakan link).

Kita dapat mengakses halaman headless ini menggunakan function .Site.GetPage.

Contoh penggunaannya seperti membuat sebuah halaman khusus untuk author (untuk pemilik atau penulis situs).

Tetapi, kita hanya ingin menampilkan data-datanya saja dan tidak boleh di index google atau diakses melalui link seperti https://domainku.com/author.

images

Digunakan untuk menyimpan gambar yang nantinya akan digunakan di template internal hugo seperti opengraph atau twitter card.

keywords

Variabel keywords berisi satu atau lebih keyword atau kata kunci yang digunakan untuk artikel hugo kita (yang belajar SEO pasti paham maksudnya).

Nantinya, kita bisa memanggil kata kunci artikel menggunakan variabel hugo pada tag meta keywords di HTML.

lastmod

Berisi tanggal dan waktu terakhir kapan artikel di update atau di modifikasi.

publishDate

Digunakan untuk mengatur kapan artikel akan diterbitkan atau dipublikasikan ke publik (internet).

Misalnya besok, besok lusa atau lebih lama dari itu.

Sebagai contoh, misal sekarang anggap saja tanggal 20 desember 2022 dan saya ingin artikel saya di terbitkan tanggal 25 desember 2022.

Maka saya akan mengaturnya di front matter artikel:

1---
2title: 'artikel keseratus'
3date: 2022-12-20T19:43:26+08:00
4publishDate: 2022-12-25T19:43:26+08:00
5---

Perbedaan diatas adalah pada tanggal di variabel date dan variabel publishDate.

Umumnya kita juga perlu mengatur variabel date di front matter artikel

Silahkan coba tanpa variabel date.

Jika itu bekerja dengan semestinya. Maka, pakai variabel publishDate saja.

Kita juga dapat memaksa agar Hugo ikut mempublikasikan postingan di masa depan (yaitu postingan dengan variabel publishDate yang telah diatur).

Caranya adalah dengan menggunakan -F atau –buildFuture saat melakukan build hugo.

Salin dan tempel kode dibawah ini untuk menampilkan postingan dengan variabel publishDate yang telah diatur.

1hugo server -D -F

slug

Nilai: string yang berisi url atau link

Variabel slug digunakan untuk mengatur url atau link pada postingan atau artikel hugo kita.

Misalnya kita ingin membuat sebuah link yang lebih pendek daripada title atau judul halaman. Maka kita perlu mengaturnya dengan variabel slug ini.

summary

Digunakan untuk mengatur cuplikan pendek dari artikel atau postingan (spoiler isi artikel).

Umumnya digunakan di daftar konten atau daftar artikel pada halaman blog atau halaman khusus lainnya.

title

Nilai: string berisi judul artikel atau halaman

Digunakan untuk mengatur judul artikel. Sebagai contoh, misal nama filenya post1 tapi judul artikelnya ingin diganti menjadi postingan pertama.

url

Digunakan untuk mengatur jalur url dari artikel atau halaman. Cara kerjanya mirip dengan variabel slug. Bedanya, slug hanya mengatur url atau link dari halaman saja.

Sedangkan variabel url mengatur jalur url atau link mulai dari domain rootnya (yaitu mulai dari nama stusnya).

Dengan variabel url ini, kita dapat mengubah atau menghilangkan nama kategori atau karakter yang tidak diperlukan dari sebuah link artikel atau halaman hugo.

Contoh link dari artikel postingan1 adalah:

1https://domainku.com/blog/postingan1

Setelah diubah menggunakan variabel url dengan nilai “postingan1”, maka link artikelnya berubah menjadi:

1https://domainku/postingan1

weight

Nilai: angka atau number (1, 2, 3, dst)

Digunakan untuk mengatur urutan daftar postingan. Angka yang lebih rendah akan diprioritaskan daripada angka yang tinggi. Angka 1 lebih dipriotitaskan untuk ditampilkan hugo daripada Angka 2.

Kesimpulan

Dengan menggunakan variabel front matter, kita dapat melakukan banyak hal seperti mengubah judul, deskripsi, foto artikel dan lain sebagainya.

Kita bahkan dapat menetapkan nilai khusus yang hanya akan muncul pada artikel tertentu.

Untuk melakukan hal itu, kita perlu belajar variabel untuk halaman yang akan saya bahas kedepannya.