Page Variable Di Hugo

Disini kita akan belajar tentang page variable atau variabel halaman di situs hugo.

Page variable atau variabel halaman digunakan untuk mengatur halaman di situs hugo.

Page variable dapat mengatur beberapa elemen atau bagian pada halaman.

Sebagai contoh, page variable dapat digunakan untuk memunculkan judul halaman, deskripsi halaman, url halaman, atau data kustom yang terkait dengan halaman.

Daftar Page Variable

.AlternativeOutputFormats

Digunakan untuk mengetahui format alternatif pada halaman. Lihat format alternatif di output formats

.Aliases

Digunakan untuk mengetahui alias dari halaman saat ini. Alias yang dimaksud disini adalah nama lain dari url atau link pada halaman.

Ini biasa disebut url pengalihan halaman.

Untuk melakukannya, cukup tambahkan nama url pengalihan di bagian front matter konten (artikel).

Tulis ini di bagian front matter artikel:

1aliases:
2    - /url-alternatif

Jika ada pengunjung yang mengunjungi url alternatif (url alias ini), maka ia akan diarahkan ke url original dari halaman.

.Aliases digunakan untuk membuat url alternatif untuk halaman/artikel. Jika situsmu punya url yang rusak tetapi masih terindex di mesin pencari (google, bing, dll).

Maka gunakan alias untuk mengalihkan url atau link yang rusak tadi ke artikel atau halaman lainnya.

Kita dapat membuat lebih dari 1 url alias (url alternatif).

.Content

Digunakan untuk memanggil isi konten (berupa teks, gambar, dll) dari artikel atau postingan.

.CurrentSection

Bagian halaman saat ini. Sebagai contoh, artikel ini termasuk dalam bagian hugo.

.FirstSection

Bagian paling pertama dari halaman saat ini. Ini mirip dengan variabel .CurrentSection.

.Data

Digunakan untuk mendapatkan data kustom/khusus untuk halaman saat ini. Lihat cara membuat data kustom disini.

.Date

Mereferensikan tanggal dan waktu dari halaman. Ini diambil berdasarkan variabel date di front matter konten.

.Description

Mereferensikan deskripsi dari halaman/artikel. Ini diambil dari variabel description di front matter konten.

.Draft

Bernilai boolean (true atau false). Digunakan untuk mengetahui apakah halaman berada dalam draft (true) atau tidak (false).

.ExpiryDate

Mereferensikan tanggal dan waktu kadaluarsa dari artikel atau konten. Ini diatur menggunakan variabel expiryDate di front matter konten.

.File

Digunakan untuk mengetahui data dari file pada halaman. Saya akan membahas ini secara lengkap di File variable.

Sebagai contoh singkat, .File.Path akan mengembalikan nilai berupa jalur relatif dari halaman saat ini. Biasanya ini terlihat di url halaman.

Contoh jalur file:

1/hugo/page-variable-di-hugo.md

Contoh jalur relatif halaman:

1/hugo/page-variable-di-hugo

Perhatikan!, url atau link halaman tidak selalu sama dengan jalur file yang sebenarnya.

Untuk itu, jika suatu saat kamu membutuhkan sesuatu yang berkaitan dengan jalur file, lebih disarankan menggunakan File variable.

.FuzzyWordCount

Digunakan untuk memperkirakan jumlah kata dalam artikel. Saya lebih menyarankan menggunakan .WordCount.

.IsHome

Bernilai true atau false.

Digunakan untuk mengecek, apakah halaman saat ini adalah halaman home (true) atau bukan (false).

.IsNode

Bernilai true atau false.

Digunakan untuk mengecek apakah halaman saat ini adalah sebuah simpul atau node (berarti true) atau bukan (false).

Contoh halaman yang termasuk simpul atau node adalah halaman yang diatur langsung melalui file html, seperti index.html (halaman home), dll.

Untuk halaman konten biasa atau artikel. Itu tidak termasuk ke dalam Node.

.IsPage

Bernilai true atau false.

Digunakan untuk mengecek apakah halaman saat ini adalah sebuah halaman reguler (artikel atau konten).

.IsSection

Bernilai true atau false.

Digunakan untuk mengecek apakah halaman saat ini adalah halaman kategori.

Sebagai contoh, halaman blog, halaman news, atau halaman khusus lainnya.

Url halaman blog: https://www.domainku.com/blog/

.IsTranslated

Bernilai true atau false.

Digunakan untuk mengecek apakah halaman memiliki terjemahan (bahasa) atau tidak.

.Keywords

Digunakan untuk mendapatkan keyword halaman. Keyword diatur oleh variabel keywords di front matter.

.Kind

Digunakan untuk mencari jenis halaman. Biasanya ini dikombinasikan dengan where function atau lainnya.

Halaman terbagi menjadi beberapa jenis, yaitu home, page, section, taxonomy, atau term.

Contoh penggunaan .Kind:

1{{ if eq .Kind "home" }}
2    <p>Benar</p>
3{{ else }}
4    <p>Salah</p>
5{{ end }}

Contoh diatas akan bernilai Benar, jika berada di halaman home atau halaman utama situs hugo.

.Language

Digunakan untuk mengetahui bahasa yang digunakan pada halaman saat ini.

.Lastmod

Digunakan untuk mengetahui kapan halaman atau artikel diubah atau dimodifikasi.

Ini diambil berdasarkan variabel lastmod di front matter konten.

Jika variabel .Gitinfo diaktifkan, maka waktu dan tanggal diambil berdasarkan waktu paling baru dari commit.

Jika variabel .Gitinfo tidak diaktifkan, maka lastmod akan mengambil waktu dan tanggal dari variabel date pada konten atau artikel.

.LinkTitle

Mengembalikan nilai berupa judul halaman berdasarkan url atau link halaman saat ini.

.Next

Digunakan untuk memanggil halaman selanjutnya dari halaman reguler (konten/artikel) saat ini.

Variable .Next mengabaikan bidang kategori atau pembagian khusus pada halaman.

.NextInSection

Digunakan untuk memanggil halaman selanjutnya dari halaman reguler (konten/artikel) pada kategori yang sama.

Misalnya, artikel1.md, dan artikel2.md berada di dalam kategori blog. Sedangkan post1.md tidak dalam kategori apapun.

Maka, artikel1.md hanya akan memanggil halaman selanjutnya dalam kategori yang sama, yaitu artikel2.md.

.OutputFormats

Berisi output format untuk halaman. Biasanya ini dikombinasikan dengan function .Get untuk mendapatkan format dari halaman tertentu.

Contoh kode untuk halaman dengan format html:

1{{ with .OutputFormats.Get "html" }}
2    {{ .Permalink }}
3{{ end }}

.Pages

Variabel ini digunakan untuk mendapatkan kumpulan halaman yang terkait dengan halaman saat ini.

Gunakan .Site.Pages untuk mendapatkan semua halaman di situs hugo.

.Paginator

Digunakan untuk membuat menu untuk Pagination di hugo.

Ini hanya dapat digunakan di home page (halaman utama situs) atau page section (halaman khusus, halaman kategori atau tags).

.Permalink

Digunakan untuk mendapatkan url atau link halaman saat ini.

.Plain

Digunakan untuk menerjemahkan atau mengubah konten pada halaman yang berupa tag html, simbol atau karakter tertentu menjadi string biasa.

.PlainWords

Digunakan untuk menerjemahkan atau mengubah konten pada halaman yang berupa tag html, simbol atau karakter tertentu menjadi string biasa berdasarkan kata yang dipisahkan oleh spasi.

Contohnya seperti strings.Fields dari golang.

.Prev

Digunakan untuk memanggil halaman sebelumnya dari halaman reguler (konten/artikel) saat ini.

Variable .Prev mengabaikan bidang kategori atau pembagian khusus pada halaman.

.PrevInSection

Digunakan untuk memanggil halaman sebelumnya dari halaman reguler (konten/artikel) pada kategori yang sama.

Misalnya, artikel1.md, dan artikel2.md berada di dalam kategori blog. Sedangkan post1.md tidak dalam kategori apapun.

Maka, artikel2.md hanya akan memanggil halaman sebelumnya dalam kategori yang sama, yaitu artikel1.md.

.PublishDate

Mereferensikan tanggal publikasi artikel yang diatur di bagian front matter menggunakan variabel publishDate.

Ini cocok digunakan jika ingin menjadwalkan konten/artikel yang ingin diterbitkan atau dipublikasikan.

.RawContent

Mereferensikan markdown tanpa bagian front matter. Digunakan pada remarkjs.

.ReadingTime

Perkiraan waktu dalam satuan menit untuk membaca keseluruhan konten atau artikel pada halaman.

.RegularPages

Mereferensikan daftar halaman reguler (artikel) dari halaman saat ini.

Ini akan berguna jika ingin mendapatkan daftar artikel dengan kategori tertentu.

.RegularPagesRecursive

Mereferensikan semua daftar halaman dari halaman saat ini. Ini hampir mirip dengan .RegularPages, tetapi ini juga memunculkan halaman dalam daftar kategori yang berada dibawahnya.

Misalnya, halaman belajar memiliki beberapa kategori seperti kategori hugo dengan beberapa artikel di dalamnya.

Maka gunakan .RegularPagesRecursive untuk memanggil semua daftar halaman tersebut.

.Resources

Digunakan untuk mengakses sumber daya pada halaman. Sumber daya dapat berupa gambar, css, video atau lainnya.

Contoh mendapatkan sebuah gambar1.jpg dari folder static/images:

1{{ with .Resources.Match "images/gambar1.jpg" }}
2    <img src="{{.Permalink}}" alt="gambar1.jpg">
3{{ end }}

Jika sumber daya berasal dari folder static, maka tidak perlu ditulis lagi nama folder static. Seperti contoh diatas.

.Match digunakan untuk mencocokkan sumber daya (gambar, css, js, atau lainnya) sesuai dengan nama atau jalur yang dituju.

Selain .Match, terdapat beberapa cara lainnya seperti ByType dan GetMatch.

Saya akan membahas tentang metode-metode mengambil sumber daya ini, nanti.

Kemungkinan saat sudah memasuki pembelajaran konten manajemen bagian page resources.

.Ref dan .Relref

Mereferensikan url atau link dari tujuan yang diberikan.

Contoh yang diberikan di dokumentasi hugo:

1{{ .Ref "sample.md"}}
2
3{{ .RelRef "sample.md" }}

Ref mengembalikan url absolut.

RelRef mengembalikan url relatif.

Belum jelas tujuan dari penggunaan variabel ini pada halaman, karena saat saya mencobanya, hasilnya error.

Tidak ada dokomentasi yang jelas tentang masalah ini.

Namun, untuk mendapatkan url atau link di artikel tanpa error, kita dapat menggunakan shortcodes rel dan relref.

Shortcodes rel dan relref bekerja dengan baik tanpa error.

Lihat penggunaan shortcodes ref dan relref disini.

.RelPermalink

Mereferensikan url relatif dari halaman saat ini.

.Sites

Mereferensikan semua situs hugo yang dibuat (termasuk situs dalam beberapa bahasa).

.Sites.First

Mereferensikan situs dengan bahasa pertama dari sekian banyak bahasa yang digunakan di situs.

.Summary

Mereferensikan ringkasan atau cuplikan isi konten. Secara default atau bawaan, hugo mengambil 70 kata pertama yang terdapat dalam konten.

Kamu bisa mengubah panjang kata yang diambil menggunakan variabel summaryLength di file konfigurasi situs (config.toml).

.TableOfContents

Berisi daftar heading pada artikel. TOC (Table Of Content) diartikel ini juga menggunakan variabel ini untuk mengatur heading.

Untuk mengatur level tag heading yang ingin dimasukkan ke TOC, Lihat pengaturan TOC disini.

.Title

Mereferensikan judul untuk halaman saat ini.

.Translations

Daftar halaman yang merupakan terjemahan dari halaman saat ini.

.TranslationKey

Kunci yang digunakan untuk memetakan halaman yang diterjemahkan dari halaman saat ini.

Ini berguna saat kamu menggunakan atau memiliki beberapa terjemahan bahasa dari situs saat ini.

Lihat contohnya disini.

.Truncated

Bernilai true atau false.

Digunakan untuk mengecek apakah arikel memiliki cuplikan konten yang terpotong atau tidak.

Cuplikan diambil berdasarkan variabel .Summary.

Contoh kode:

 1{{ range first 10 .Pages }}
 2    <article>
 3      <div>
 4        <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
 5        {{ .Summary }}
 6      </div>
 7      {{ if .Truncated }}
 8      <!-- Jika konten terpotong/tidak ditampilkan semua, maka tombol Read More dibawah akan muncul -->
 9      <div>
10        <a href="{{ .RelPermalink }}">Read More…</a>
11      </div>
12      {{ end }}
13    </article>
14{{ end }}

.Type

Digunakan untuk melihat tipe dari halaman saat ini. Ini juga dapat mereferensikan kategori halaman.

Contoh, https://domainku.com/blog/artikel-satu/ akan memiliki tipe blog, diambil dari kategori pada halaman.

.Weight

Mereferensikan bobot (dalam bentuk angka) yang digunakan untuk mengurutkan konten atau artikel.

Secara default atau bawaan, halaman memiliki bobot (angka) 0.

.WordCount

Mereferensikan jumlah kata dari konten di halaman saat ini.