Mengenal Front Matter Di Hugo
Apa itu Front Matter di Hugo
Front Matter adalah data-data yang tersimpan untuk konten kita yang berisi informasi meta dari file tersebut. Isinya bisa apa saja, sebagai contoh untuk memberi judul, tanggal, tags, image dan apakah postingannya ingin berupa draft atau dipublish langsung.
Contoh Front Matter di Hugo
Kalau kamu sudah pernah membuat postingan di Hugo, berarti kamu sudah pernah melihat front matter ini
+++
title = "Judu Posting"
date = 2020-08-15T09:44:10+08:00
tags = ["hugo", "post"]
image = "/image.png"
draft = false
+++
Front matter berisi pasangan key dan value untuk nilai yang kita deklarasikan.
Format Front Matter
Ada 3 pilhan dalam penulisan front matter, TOML, YAML dan JSON:
TOML
ditandai dengan pembuka dan penutup
+++*contoh di atas adalah contoh TOML
YAML
ditandai dengan pembuka dan penutup
---JSON
dibungkus dengan kurung pembuka dan penutup
{ .. }
Meskipun mungkin JSON lebih akrab kita temukan, namun dalam pembuatan konten penggunaan TOML atau YAML lebih nyaman untuk dilihat.
Apa saja isi Front Matter
Pada dasarnya kita bisa menulis apa saja yang kita inginkan di front matter, seperti memasang kategori atau thumbnail gambar dan informasi lainnya.
Tapi, ada beberapa “key” atau variable yang sudah disediakan oleh Hugo. seperti
aliases
Link url alias / lain untuk konten yang sama
date
untuk informasi waktu
description
meta description pada SEO
draft
Apakah ingin dipublish atau tidak
dan masih banyak lagi, bisa kamu lihat di dokumentasi front matter Hugo
Custom key di front matter
Untuk menggunakan salah satu custom variable yang kita buat sendiri, bisa menggunakan .Params.namaKeynya
Sebagai contoh kalau kita punya thumbnail image
image = "linkgambar.png"
Cara menampilkan variable tersebut
{{ .Params.image }}
Untuk melakukan logika apakah kontent tersebut mempunyai image atau tidak
{{ if isset .Params "image" }}{{ .Params.image }}{{ end }}
Cara membuat default Front Matter
Bagaimana cara mengganti isi front matter default ini?
Kamu bisa mengganti isi folder /archetypes/default.md dan memasukkan default front-matter yang kamu mau.
