Aturan Dasar Di Hugo

Disini kita akan belajar dasar-dasar aturan di hugo. Mulai dari aturan dalam menulis sintaks, menggunaan function, variabel hugo dan lain-lain.

Menulis sintaks di hugo

Di hugo, jika kita ingin menulis sintaks diharuskan menggunakan dua (double) kurung kurawal di awal dan diakhir sintaks tersebut.

Lihat contoh dibawah ini:

1{{ Ketik sintaks disini }}

# Sintaks untuk variabel hugo

Di hugo, kita bisa menulis sintaks kustom dan sintaks default hugo.

Sintaks kustom variabel digunakan untuk memberikan nilai dinamis yang dapat kita tentukan sendiri nilainya.

Sintaks default atau bawaan adalah sintaks yang dibuat hugo untuk memudahkan kita saat mengatur situs hugo.

1. Cara penulisan sintaks default variabel

Untuk sintaks default hugo, kita hanya perlu menuliskan nama dari variabel hugo di dalam kurung kurawal.

Begini contohnya:

1{{ .NamaVariabel }}

Dibawah ini adalah contoh menggunakan variabel default hugo.

1{{ .Pages }}

Variabel .Pages diatas digunakan untuk memanggil halaman saat ini (url, judul, konten halaman, dan lain-lain).

Klik disini untuk belajar tentang variable hugo.

2. Cara penulisan sintaks variabel kustom

Untuk menulis variabel kustom di hugo, kita harus menggunakan simbol dolar didepan nama variabelnya.

Begini contohnya:

1{{ $namavariabel := nilai kustom dari variabel }}

1{{ $number := 10 }}

Nilai variabel dapat berupa apa saja. Angka, string, array, function, dan lain-lain. Selama nilai tersebut masih termasuk ke dalam data atau sintaks Golang atau Go.

# Sintaks untuk function hugo

Untuk dapat menggunakan function, kita perlu memanggil nama function ditambah dengan parameter tertentu.

Begini contohnya:

1{{ namafunction parameter }}

Parameter function dipisahkan oleh satu spasi.

Terkadang atau seringkali function di hugo memerlukan dua parameter atau lebih.

Untuk function yang membutuhkan parameter lebih dari satu, kita perlu memisahkan setiap parameternya menggunakan spasi juga.

1{{ namafunction parameter1 parameter2 }}

Dibawah ini adalah contoh penggunaan function hugo yang memerlukan dua parameter.

1{{ add 4 5 }}

Output: 9.

Function add digunakan untuk menjumlahkan angka.

Kamu hanya perlu memisahkan setiap parameter menggunakan satu spasi.

Jumlah parameter tergantung dari function hugo itu sendiri.

Belajar function hugo disini. Maaf, Belum tersedia.

# Looping atau perulangan

Di hugo, kita bisa melakukan looping atau perulangan menggunakan sebuah function bernama range.

Function range ini dapat me-looping data array dan map.

Sebagai contoh, saya akan me-looping variabel .Site.Pages yang berisi semua halaman di situs hugo.

1<ul>
2{{ range .Site.Pages }}
3    <li>
4        <h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
5        </li>
6{{ end }}
7</ul>

Output:

Postingan 1

Postingan 2

Postingan 3

dan seterusnya…

Setiap melakukan looping atau perulangan menggunakan function range, pastikan selalu menutupnya dengan end.

1. looping dan simpan nilai ke variabel kustom

Di hugo, kita juga dapat menyimpan nilai dari looping atau perulangan ke variabel kustom.

Lihat contoh dibawah:

1{{ range $angka := (seq 5) }}
2    <p>{{ $angka }}</p>
3{{ end }}

Output:

1

2

3

4

5

2. looping dengan index dan value untuk data array

Selain di simpan ke satu variabel. Kita juga dapat membagi nilai dari looping ke dua variabel kustom.

Untuk membuat dua variabel kustom secara bersamaan, kita harus menggunakan koma sebagai pemisah variabelnya.

Begini contohnya:

1{{ range $var1, $var2 := array }}
2    <p>{{ $var1 }}</p> <!-- index data array -->
3    <p>{{ $var2 }}</p> <!-- data dalam array -->
4{{ end }}

Keterangan:

$var1 akan memiliki nilai berupa index dari array.

$var2 akan memiliki nilai dari data itu sendiri.

Sebagai contoh, dibawah ini saya akan melakukan looping dengan dua variabel kustom dan menampilkan hasilnya.

1{{ range $index, $halaman := .Site.Pages }}
2    <div>
3        <span>No: {{ $index }}.</span>
4        <p>{{ $halaman }}</p>
5    </div>
6{{ end }}

Output:

No: 0. Page(/hugo/aturan-dasar/_index.md)

No: 1. Page(/hugo/aturan-dasar/Aturan-Dasar-di-Hugo.md)

No: 2. Page(/tags/aturan-dasar-hugo)

No: 3. Page(“Belajar Setiawan”)

No: 4. Page(/categories)

3. looping dengan key dan value untuk data map

Selain data tipe array. Kita juga dapat me-looping atau melakukan perulangan untuk data tipe map.

Begini contohnya:

1{{ range $keys, $values := map }}
2    <p>{{ $keys }}</p> <!-- key dari data map -->
3    <p>{{ $values }}</p> <!-- value atau nilai dari data map -->
4{{ end }}

# Conditionals atau pengkondisian

1. if statement

Untuk menggunakan if statement di hugo, kita perlu membungkus if statement di dalam dua kurung kurawal (sama seperti sebelum-sebelumnya).

Pastikan selalu menutup if statement dengan end agar tidak terjadi error.

Contoh if statement:

1{{ if kondisi }}
2    <!--Tulis Kode Disini -->
3{{ end }}

Contoh penggunaan:

1{{ if gt 10 5 }}
2    kondisi terpenuhi, alias true.
3{{ end }}

Output: kondisi terpenuhi, alias true.

gt adalah function hugo untuk membandingkan 2 bilangan (integer, atau float) yan lebih besar.

Ini mereferensikan lebih besar >. Lihat dokumentasi hugo tentang gt.

2. if..else

1{{ if gt 5 10 }}
2    kondisi terpenuhi, alias true.
3{{ else }}
4    kondisi tidak terpenuhi, alias false.
5{{ end }}

Output: kondisi tidak terpenuhi, alias false.

3. if..else if..else

Untuk membuat banyak kondisi sekaligus, kita dapat menggunakan else if.

Ini sama seperti di bahasa Go atau Golang.

1{{ $number := 2 }}
2
3{{ if eq $number 1 }}
4    kondisi satu terpenuhi, angka adalah 1.
5{{ else if eq $number 2 }}
6    kondisi dua terpenuhi, angka adalah 2.
7{{ else }}
8    kondisi tidak terpenuhi, alias false.
9{{ end }}

Output: kondisi dua terpenuhi, angka adalah 2.

eq digunakan untuk membandingkan 2 kondisi. Ini mereferensikan sama dengan ==.

Lihat dokumentasi hugo tentang eq.

4. with statement

Mungkin kamu bertanya, bedanya if statement dengan with statement apa?

Bukannya fungsinya sama?

Jawabannya, hampir benar bahwa fungsinya sama. Lebih tepatnya mirip.

Perbedaan keduanya adalah terletak pada konteks dari nilai itu sendiri.

Konteks yang saya maksud disini adalah titik atau dot.

Baca tentang konteks dibawah atau klik disini.

Dengan menggunakan with kita dapat merubah konteks dari dot atau titik ini.

Misalnya saya ingin merubah konteks titik atau dot pada halaman ke konteks titik atau dot dari kondisi yang ditulis.

Contohnya seperti saat kita ingin mengubah konteks dari menu yang diatur di front matter (dari konteks menu ke konteks halaman saat ini).

Lihat contoh dibawah:

1{{ range .Site.Menus.main }}
2    <!-- Mengakses nama dari menu -->
3    <h3>{{ .Name }}</h3>
4
5    <!-- Mengakses nilai dari halaman yang terkait dengan menu -->
6    {{ with .Page }}
7        <a href="{{ .Permalink }}">{{ .Title }}</a>
8    {{ end }
9{{ end }}

5. with..else

Sama seperti if statememnt, with statement juga memiliki else untuk kondisi jika tidak terpenuhi.

Contoh penggunaan:

1{{ with kondisi }}
2    // kode jika kondisi jika terpenuhi, alias true
3{{ else }}
4    // kode jika kondisi tidak terpenuhi, alias false
5{{ end }}

6. and

Selain if dan with statement. Kita juga dapat menggunakan and yang mengharuskan kedua nilai benar.

Biasanya ini dikombinasikan dengan if atau with statement.

Lihat contoh dibawah ini:

1{{ if and (kondisi 1) (kondisi 2) }}
2    // kode jika kedua kondisi terpenuhi
3{{ end }}

7. or

Jika and mengharuskan dua kondisi terpenuhi (alias true).

Maka or hanya memerlukan salah satu kondisi terpenuhi.

Jika salah satu kondisi terpenuhi, maka kode akan dijalankan.

Lihat contoh dibawah ini:

1{{ if or (kondisi 1) (kondisi 2) }}
2    // kode ini akan dijalankan jika salah satu kondisi terpenuhi
3{{ end }}

8. and…or

Hugo tidak terbatas pada satu statement. Kita juga dapat menggabungkan 2, 3 atau lebih dari itu.

Sebagai contoh, saya ingin membuat sebuah kondisi dimana kode akan dijalankan jika 2 kondisi dari total 4 kondisi terpenuhi.

Jadi kodenya akan dijalankan jika 2 dari 4 kondisi tersebut benar atau true.

Lihat contohnya dibawah ini:

1{{ if or (and kondisi1 kondisi2) (and kondisi3 kondisi4) }}
2    // kode ini akan dijalankan jika minimal 2 kondisi terpenuhi.
3    // misalnya kondisi 1 dan 2 terpenuhi, maka kode ini akan dijalankan.
4{{ end }}

Contoh penggunaannya:

1{{ $angka := 10 }}
2{{ $str := "apaan tuh" }}
3
4{{ if or (and (eq $angka 10) (eq $str "apaan tuh") (and (eq $angka 5) (eq $str "tuh apaan")) )}}
5    {{ printf "kode berhasil dijalankan." }}
6{{ end }}

Output: kode berhasil dijalankan.

# Pipes atau pemisah

Jika kamu sadar, sebelumnya kamu sudah melihat contoh dari sebuah pipes atau pemisah.

Yakk… tanda kurung biasa () adalah sebuah pipes atau pemisah.

Pipes atau pemisah ini digunakan untuk menumpuk atau membuat banyak kondisi atau mengidentifikasi data tertentu.

1. kurung biasa ()

Pertama adalah kurung biasa. Ini dibuat dengan pembuka kurung ( dan penutup kurung ).

Kemudian, kode atau sintaks ditulis di dalam kurung tersebut.

Kurung ini bertujuan untuk memberikan konteks yang tepat terhadap kode atau sintaks.

Misalnya saat sedang membuat pengkondisian yang membutuhkan banyak sekali data atau variabel.

Jika tidak menggunakan pemisah kurung, maka biasanya kode akan tercampur dengan kode atau sintaks diluar dari yang kita inginkan.

Maka dari itu, pastikan menggunakan sebuah pemisah kurung biasa () ini jika sintaks sudah mulai rumit atau banyak.

Contoh penggunaan ():

1{{ if eq (add 3 1) (add 2 2) }}
2    // kode ini dijalankan jika hasil dari 3 + 1 sama dengan hasil dari 2 + 2.
3{{ end }}

2. simbol pemisah |

Sebenarnya pemisah | ini sama fungsinya dengan kurung biasa () tadi.

Bedanya hanya pada penulisan kode dan penempatannya.

Kamu dapat mengibaratkan kurung biasa () sebagai sangkar burung (burungnya tetep berada di dalam sangkarnya).

Sedangkan simbol | ini bisa di ibarakan seperti sebuah tembok atau dinding yang memisahkan antar ruang atau tempat.

Lihat contoh penggunaannya dibawah ini:

1{{ $satu := add 3 1 }}
2{{ $dua := add 2 2 }}
3
4{{ if $satu | eq $dua }}
5    kode ini dijalankan jika hasil dari 3 + 1 sama dengan hasil dari 2 + 2.
6{{ end }}

Saya sendiri lebih menyukai metode atau cara yang pertama.

Alasannya karena menurut saya lebih mudah dipahami dan lebih terlihat jika ada kondisi atau sintaks yang tercampur.

# Konteks

Tadi saya sudah sedikit membahas mengenai konteks ini. Lihat disini.

Konteks sangat penting untuk kita ketahui.

Mengapa…?

Karena jika kita tidak mengetahui tentang konteks ini, bisa jadi kita salah memasukkan data, nilai atau bahkan suatu pengkondisian.

Memahami konteks sebenarnya cukup mudah. Kita hanya harus tau letak kode atau sintaks yang kita tulis.

Misalnya, kode yang kita tulis berada di dalam area sebuah range atau looping.

Maka bisa dipastikan variabel atau nilai didalamnya akan terpengaruh oleh range atau looping tersebut.

Lihat contohnya dibawah ini:

Misalnya sekarang saya berada di file single.html (terhubung ke konten atau artikel).

Maka, saya dapat mengakses halaman konten atau artikel itu sendiri.

Berarti konteksnya ada di halaman dari konten atau artikel.

Konteks tersebut bisa berubah jika saya berada di dalam sebuah perulangan atau looping.

Halaman dari file artikel2.md.

1{{ .Title }} // .Title ini ada dalam konteks dari artikel2.md
2{{ range .Site.RegularPages }}
3    {{ .Title }} // .Title yang ini, berada dalam konteks dari looping (BUKAN pada konteks artikel2.md)
4{{ end }}

Gimana sudah paham?

Kalau masih belum paham, kamu bisa tanyakan saja di kolom komentar 😄.

Sebenarnya, kita dapat dengan mudah mengubah sebuah konteks ini dengan memanfaatkan fitur scope atau jangkauan dari hugo.

Silahkan baca dibawah ini.

# Scope atau jangkauan

Salah satu masalah yang sering terjadi saat kita menulis atau mengakses variabel, function, dll adalah masalah konteks.

Kita dapat menyelesaikan masalah konteks tersebut dengan menggunakan fitur jangkauan (saya tidak tahu pasti nama fitur ini).

Cara menggunakannya sangat mudah.

Kita hanya perlu menyisipkan simbol dollar $ di depan nilai yang ingin diubah konteksnya.

Sebagai contoh, saya ingin mengubah konteks dari looping atau perulangan Menu (menu dari front matter) agar konteksnya menjadi konteks untuk halaman saat ini.

Maka saya akan menuliskannya seperti ini:

File single.html:

1{{ range .Site.Menus.main }}
2    <!-- Mengakses judul dari MENU -->
3    <h3>{{ .Title }}</h3>
4
5    <!-- Mengakses judul dari HALAMAN saat ini -->
6    <h3>{{ $.Title }}</h3>
7{{ end }}

# Menghapus jarak (spasi, tab, atau baris baru)

Saat membuat sintaks hugo, nilai dari sintaks hugo yang dihasilkan biasanya sesuai dengan spasi, tab atau baris baru dari apa yang kita tulis.

Sebagai contoh, sintaks atau kode dibawah ini akan menghasilkan nilai yang sesuai dengan apa yang ditulis:

1<div>
2    {{ .Title }}
3</div>

Output:

1<div>
2    Aturan Dasar Di Hugo
3</div>

Untuk dapat menghapus jarak berupa spasi, tab atau baris baru.

Kamu dapat menggunakan tanda penghubung - diawal dan diakhir kurung kurawal.

Lihat contohnya dibawah:

1<div>
2    {{- .Title -}}
3</div>

Output:

1<div>Aturan Dasar Di Hugo</div>

# Menulis komentar untuk sintaks hugo

Menulis kode pasti membutuhkan banyak usaha. Apalagi untuk membuat kode yang mudah dimengerti maksud dan tujuannya.

Hampir semua penulis kode atau programmer pasti membutuhkan fitur yang namanya comments atau komentar dibahasa yang mereka gunakan.

Comments atau komentar bertujuan mempermudah pendokumentasian kode (memberikan penjelasan tentang kode yang ditulis).

Di hugo, kita juga dapat membuat komentar untuk sintaks hugo.

Caranya adalah dengan menggunakan {{/* komentar anda disini */}}.

Contoh penggunaan komentar hugo:

1Andi sedang pergi ke {{/* WC*/}} Pasar

Perlu di ingat!

Komentar hugo hanya berlaku di tempat yang dapat menulis sintaks hugo.

Misalnya saat membangun struktur web di file single.html atau index.html atau lainnya.

Yang pasti, selama kamu bisa menggunakan sintaks hugo pada file bagian atau file tersebut, maka komentar hugo dapat digunakan.

Jangan menulis komentar hugo di file markdown ya 😄.