Site Variabel Di Hugo

Disini kita akan belajar tentang site variable atau variabel situs di hugo. Gunakan site variable untuk mendapatkan nilai global dari situs hugo.

Site variable atau variabel situs adalah variabel dengan nilai global. Artinya, kamu dapat mengakses data secara global (tanpa halangan) dari situs hugomu.

Misalnya, kamu ingin memunculkan judul dari semua halaman di situs hugo. Maka kamu dapat menggunakan site variable.

Contoh penggunaan site variable di file index.html:

1{{ range .Site.Pages }}
2    <h1>{{ .Title }}</h1>
3{{ end }}

range digunakan untuk memanggil semua data yang terdapat di .Site.Pages.

Pastikan, selalu tutup range dengan {{ end }}.

Kamu dapat menganggap range seperti for loop di bahasa Go/Golang.

.Title digunakan untuk mendapatkan judul dari setiap halaman yang di looping (range).

Setelah sedikit mengetahui cara menggunakan site variable di hugo. Sekarang, saya akan memberikan beberapa daftar dan rincian dari site variable yang dapat kita gunakan.

Daftar Site Variable

.Site.AllPages

Variabel ini digunakan untuk memanggil semua daftar halaman di situs hugo. Halaman utama, halaman khusus, halaman artikel atau konten, dan halaman lainnya.

.Site.Author

Variabel ini digunakan untuk memanggil data terkait author. Data dapat berupa nama, hobi, umur, atau data-data lainnya yang terkait dengan author.

Data-data tersebut ditetapkan di file konfigurasi situs (config.toml).

Sebagai contoh, kita dapat membuat data seperti ini:

File config.toml:

1[author]
2nama = doni setiawan
3hobi = menulis

Untuk memanggil nama author, kita harus melakukan ini:

1{{ .Site.Author.nama }}

Output: doni setiawan

.Site.BaseURL

Variabel ini digunakan untuk mendapatkan alamat url dari halaman utama situs hugo.

Contoh, https://www.domainku.com.

.Site.BuildDrafts

Variabel ini digunakan untuk mengetahui apakah artikel yang berada dalam draft (true) ikut di build atau dipublikasi ke situs hugo.

Sebagai contoh, kamu bisa mengikut sertakan artikel dengan variabel draft=true agar ikut dimunculkan di situs hugo dengan menggunakan perintah ini:

1hugo server -D

variabel draft diatur di bagian front matter konten.

-D digunakan sebagai perintah untuk mengikut sertakan artikel yang berada dalam draft (true).

Selain menggunakan -D, kamu juga dapat menggunakan –buildDrafts.

Selain menggunakan perintah diatas, kamu juga bisa langsung mengatur apakah ingin mengikut sertakan artikel yang berada dalam draft melalui konfigurasi situs (config.toml).

Untuk melakukannya, gunakan variabel buildDrafts di file config.toml:

Tambahkan ini di file config.toml

1buildDrafts = true

.Site.Copyright

Variabel ini digunakan untuk memanggil nilai dari variabel copyright. Umumnya berupa kalimat atau kata-kata yang menjadi bagian copyright situs.

Copyright situs biasanya ditampilkan di bagian footer dari blog, website atau forum sebagai informasi tentang hak cipta.

Copyright dapat diatur melalui file konfigurasi situs (config.toml).

Contoh copyright di file config.toml

1copyright = "Copyright 2022 Example LLC. All rights reserved."

.Site.Data

Digunakan untuk membuat sebuah data atau nilai kustom melalui file khusus dibawah folder bernama data.

 1belajarhugo
 2    |
 3    ├── archetypes
 4    |       ├── default.md
 5    |
 6    ├── config.toml
 7    ├── content
 8    ├── data
 9    ├── layouts 
10    |      ├── _default
11    |      ├── partials
12    |      ├── 404.html
13    |      ├── index.html
14    |
15    ├── public
16    ├── static
17    └── themes

File haruslah berekstensi YAML, JSON, XML, atau TOML. Misalnya file dengan nama data-tambahan.toml.

1data
2  ├── data-tambahan.toml

Berikut ini adalah contoh pendeklarasian dan penggunaan data kustom.

Tulis ini di file data-tambahan.toml yang kamu buat:

1Nama = 'Dimas'
2'Deskripsi' = 'Umurnya 20 tahun.'

Cara menggunakan atau memanggil data kustom:

File single.html:

1<p>Si {{ .Site.Data.Nama }} {{ .Site.Data.Dimas "Deskripsi" | markdownify }}</p>

Output: Si Dimas Umurnya 20 tahun.

.Site.DisqusShortname

Digunakan untuk mendapatkan nama pendek (shortname) disqus yang telah diatur di file konfigurasi situs (config.toml).

Contoh di file config.toml:

1disqusShortname = 'namapendekakundisqusmu'

Pastikan kamu sudah menggunakan template internal disqus di situs hugo.

Template internal hugo adalah sebuah kode (template) atau script yang dibuat hugo untuk membantu dan memudahkan pengelolaan situs hugo.

Jika belum pernah menggunakan template internal hugo untuk disqus, letakkan kode dibawah ini ke file head.html.

Salin dan tempel kode ke file head.html:

1{{ template "_internal/disqus.html" . }}

Setelah itu kamu bisa mendapatkan shortname disqus menggunakan variabel {{ .Site.DisqusShortname }}.

Kalau mau dibuatkan tutorial install komentar disqus di situs hugo, silahkan request di kolom komentar.

Kalau ada waktu saya sempatkan membuat tutorialnya.

.Site.GoogleAnalytics

Digunakan untuk mendapatkan kode pelacakan dari google analaytics yang sudah di atur di file konfigurasi situs (config.toml).

Contoh kode pelacakan GA (Google Analytics) di file config.toml:

1googleAnalytics = 'G-MEASUREMENT_ID'

Variabel {{ .Site.GoogleAnalytics }} akan mengembalikan nilai G-MEASUREMENT_ID.

.Site.Home

Digunakan untuk mendapatkan halaman utama situs hugo.

Selain halaman utama itu sendiri, kamu bisa menargetkan judul, url, teks atau hal lainnya dari halaman utama.

Sebagai contoh, kode dibawah digunakan untuk mendapatkan url dan judul dari halaman utama situs hugo.

1<h1><a href="{{ .Site.Home.Permalink }}">{{ .Site.Home.Title }}</h2>

.Site.IsMultiLingual

Digunakan untuk mengecek apakah situs hugo menggunakan multi bahasa (maksudnya menggunakan lebih dari satu bahasa).

.Site.IsServer

Hugo mengecek apakah saat ini kamu menggunakan server hugo untuk menjalankan situs. Lihat selengkapnya di dokumentasi resminya.

.Site.Language.Lang

Digunakan untuk mendapatkan kode bahasa dari situs hugo. Contohnya kode en untuk bahasa english (inggris).

.Site.Language.LanguageName

Digunakan untuk mendapatkan bahasa dari situs hugo. Contohnya English, Indonesian, dll.

.Site.Language.Weight

Digunakan untuk mendapatkan daftar bahasa dari situs hugo berdasarkan weight (umumnya urutan dalam bentuk angka) yang telah diatur pada setiap bahasa di file konfigurasi (config.toml).

.Site.Language

Digunakan untuk mendapatkan bahasa saat ini. Ini mirip dengan .Site.Language.Lang tadi.

.Site.LanguageCode

Berisi string yang mewakili kode bahasa dari situs hugo.

Sebagai contoh, kode en-us untuk english united states (bahasa inggris dari united states atau amerika).

.Site.LanguagePrefix

Digunakan untuk mengawali url agar menunjuk ke bahasa yang benar dari halaman hugo.

.Site.Languages

Array yang berisi daftar semua bahasa di situs hugo.

.Site.LastChange

Digunakan untuk memunculkan waktu terakhir saat halaman di edit, dirubah atau di modifikasi.

Misalnya saat menambahkan atau merubah teks, gambar, atau lainnya.

Ini merujuk pada variabel date di front matter artikel/konten.

.Site.Menus

Digunakan untuk mendapatkan data dari menu yang dibuat di file konfigurasi situs (config.toml).

Kamu dapat membuat menu header, footer, dan menu lainnya menggunakan menus.

Dan memanggil properti menu menggunakan menu entry properties atau biasa disebut variabel menu.

Nantinya akan saya bahas juga tentang variabel menu di hugo.

.Site.Pages

Variabel ini berisi semua halaman di situs hugo yang kamu buat.

Gunakan function range dan page variable hugo untuk mendapatkan semua halaman.

.Site.Params

Variabel ini digunakan untuk mendapatkan data params yang dibuat di file konfigurasi situs (config.toml).

Berikut ini adalah cara membuat params dengan data kustom (sesuai kemauan) di file config.toml:

Contoh di file config.toml:

1[params]
2    author = 'doni setiawan'
3    deskripsi = 'penulis artikel ini'

Cara mendapatkan data yang dibuat menggunakan params:

1<div>{{ .Site.Params.author }}</div>
2<p>{{ .Site.Params.deskripsi }}</p>

.Site.RegularPages

Variabel ini berisi semua halaman markdown didalam folder content.

Gunakan function range dan page variable hugo untuk mendapatkan halaman reguler.

.Site.Sections

Variabel ini berisi semua halaman kategori atau halaman khusus yang sudah dibuat.

Contohnya seperti halaman Blog, halaman News atau halaman khusus lainnya.

.Site.Taxonomies

Variabel ini digunakan untuk mengakses data taxonomy.

Data taxonomy dibuat di file konfigurasi situs (config.toml).

Nantinya akan saya bahas tentang cara membuat dan menggunakan taxonomy di pembelajaran mendatang.

.Site.Title

Digunakan untuk mendapatkan judul situs hugo (judul di halaman utama situs hugo).

Judul situs hugo diatur di file konfigurasi situs (config.toml).