Cara Membuat Dan Menggunakan Params Hugo

Disini kamu akan belajar cara membuat dan menggunakan parameter kustom hugo. Mulai dari parameter kustom di file konfigurasi situs (config.toml) atau parameter kustom di front matter konten.

Apa itu Params Hugo

Params atau bisa juga disebut parameter kustom adalah sebuah nilai kustom yang dapat dideklarasikan (dibuat) di file konfigurasi situs (config.toml) atau di front matter artikel.

Dengan params ini, kita bisa membuat banyak sekali nilai kustom dan dapat kita gunakan sesuai keinginan dan kebutuhan.

Cara Membuat Params di Hugo

Membuat params sebenarnya tidak sulit, hanya perlu menggunakan kata params dan masukkan data kustom untuk membuat parameter kustom.

Lihat contoh penggunaannya dibawah ini:

1. Params di file konfigurasi situs

File config.toml:

1baseURL = 'https://belajar.donisetiawan.web.id'
2title = 'Belajar Setiawan'
3[params]
4    customCSS = "styling/style.css"

File config.yaml:

1baseURL: https://belajar.donisetiawan.web.id
2title: Belajar Setiawan
3params:
4    customCSS: styling/style.css

File config.json:

1{
2    "baseURL": "https://belajar.donisetiawan.web.id",
3    "title": "Belajar Setiawan",
4    "params": {
5        "customCSS": "styling/style.css"
6    }
7}

2. Params di front matter konten atau artikel

artikel1.md versi toml:

1+++
2title = 'Berkenalan dengan Hugo'
3description = 'Hugo adalah ...'
4customCSS = "styling/style.css"
5+++

artikel1.md versi yaml:

1---
2title: Berkenalan dengan Hugo
3description: Hugo adalah ...
4customCSS: styling/style.css
5---

artikel1.md versi json:

1{
2    "title": "Berkenalan dengan Hugo",
3    "description": "Hugo adalah ...",
4    "customCSS": "styling/style.css"
5}

Cara Mengakses Data Params di Hugo

# Mengakses data params yang dibuat di file konfigurasi situs

Untuk mengakses data params yang sudah dibuat di file konfigurasi situs (config.toml, config.yaml, atau config.json), kita harus menggunakan format .Site.Params.parameterkustomnya.

Silahkan lihat contoh penggunaannya dibawah ini:

File partials/head.html:

1<link href="{{ .Site.Params.customCSS }}" type="text/css" rel="stylesheet">

# Mengakses data params yang dibuat di front matter artikel

1. Data params biasa

artikel1.md:

1---
2title: Berkenalan dengan Hugo
3date: 2022-09-20T15:26:23-06:00
4description: Hugo adalah ...
5categories:
6- hugo
7fullname: Doni Setiawan
8---
9Hugo adalah framework untuk membangun situs statis...

Contoh penggunaan di file single.html:

1<h1>{{ .Title }}</h1>
2<div>{{ .Params.fullname }}</div>
3<span>{{ .Params.categories }}</span>
4<div>{{ .Content }}</div>

Gunakan .Params jika parameter kustom yang dibuat tidak memiliki parameter didalamnya (seperti contoh fullname diatas).

2. Data params spesifik

artikel2.md:

 1---
 2title: Berkenalan dengan Hugo
 3date: 2022-09-20T15:26:23-06:00
 4description: Hugo adalah ...
 5categories:
 6- hugo
 7author:
 8    first_name: Doni
 9    last_name: Setiawan
10    full_name: Doni Setiawan
11---
12Hugo adalah framework untuk membangun situs statis...

Contoh penggunaan di file single.html:

1<h1>{{ .Title }}</h1>
2<div>{{ $.Param "author.full_name" }}</div>
3<span>{{ .Params.categories }}</span>
4<div>{{ .Content }}</div>

Gunakan metode .Param jika data yang diakses merupakan parameter anak.

Parameter anak yang dimaksud yaitu parameter kustom yang berada dibawah parameter kustom lainnya.

$ adalah jangkauan dari parameter. Anda bisa tidak menggunakannya jika tidak berada dalam pengkondisian, perulangan atau semacamnya.

Baca lebih lanjut disini, Aturan Dasar Scope