Custom Output Format Di Hugo

Disini kamu akan belajar tentang output format untuk hugo. Seperti misalnya mengkonversi halaman HTML menjadi JSON dan lain-lain.

Output format di hugo adalah cara untuk menampilkan data yang dihasilkan hugo.

Misalnya saat kita melakukan build situs hugo menggunakan perintah hugo.

Maka hugo secara default atau bawaan akan membuat output format dalam bentuk format HTML.

Halaman yang kamu lihat saat ini juga merupakan format HTML yang dihasilkan dari Generator Hugo.

Jenis-jenis format yang didukung

Hugo memberikan banyak sekali jenis format yang dapat kita gunakan.

Mulai dari format yang bersifat tekstual seperti HTML, CSV, Javascript, JSON, PDF, XML, RSS, dan lain-lain.

Format Gambar seperti JPG, GIF, PNG, SVG, WEBP, dan lain-lain.

Sampai format video seperti 3GP, MP4, WEBM, dan lain-lain.

Tabel Output Format Lengkap

Dibawah ini adalah beberapa jenis file yang sering digunakan sebagai output format di hugo.

Saya tidak bisa memberikan semua informasi lengkap tentang jenis file dari tabel sebelumnya.

Alasannya adalah karena kurangnya informasi tentang informasi lengkap dari output format.

Saya sudah mencarinya di dokumentasi hugo maupun di web atau blog lainnya.

Silahkan lihat dokumentasi hugo tentang output format disini.

Mengatur output formats di hugo

Default format

Secara default, hugo memiliki beberapa output formats bawaan.

Lihat default output formats dibawah ini:

Kind adalah cara untuk mengindentifikasi jenis halaman.

Misalnya, home berarti halaman home (halaman utama dari situs).

page berarti diartikan sebagai halaman untuk konten atau artikel.

section halaman untuk kategori tertentu. Seperti domain.com/posts => sectionnya adalah posts.

taxonomy dan term adalah halaman untuk taxonomy (tags, category). Lihat disini untuk detailnya.

Custom output formats hugo

Untuk membuat output formats baru atau kustom. Kita perlu mengatur output formats di file konfigurasi situs dan memanggil output format tersebut.

File config.toml:

 1# Definisikan output format kustom (misalnya , SearchIndex)
 2[outputs]
 3    home = ["HTML", "RSS", "SearchIndex"]
 4
 5# Atur definisi dari output format kustom yang dibuat
 6[outputFormats]
 7    [outputFormats.SearchIndex]
 8        mediaType = "application/json"
 9        baseName = "searchindex"
10        isPlainText = true
11        notAlternative = true

Versi config.yaml:

1outputFormats:
2  SearchIndex:
3    mediaType: "application/json"
4    baseName: "searchindex"
5    isPlainText: true
6    notAlternative: true

Kemudian buat sebuah file untuk mendapatkan semua atau beberapa data dalam format kustom tersebut dan sekaligus membuatnya menjadi sebuah halaman yang dapat diakses.

Sebagai contoh, saya akan menggunakan nama list.searchindex.json sebagai wadah atau tempat untuk mendapatkan data output format yang dibuat tadi.

Buat file tersebut di dalam folder layouts/_default.

Visualisasi letak file list.searchindex.json:

1layouts
2    ├── _default
3            ├── list.searchindex.json

Contoh isi file list.searchindex.json:

1{{- $.Scratch.Add "searchindex" slice -}}
2{{- range $index, $element := (where .Site.Pages "Kind" "page") -}}
3    {{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "uri" $element.Permalink "tags" $element.Params.tags "categories" $element.Params.categories "section" $element.Section "content" $element.Plain "summary" $element.Summary "year" ($element.Date.Format "2006")) -}}
4{{- end -}}
5{{- $.Scratch.Get "searchindex" | jsonify -}}

Cara diatas memanfaatkan sebuah function .Scratch untuk memanipulasi data (menambahkan, memnghapus, dll).

Selain cara diatas, ada cara yang lebih mudah untuk mengatur output format.

Cara tersebut adalah dengan menggunakan variabel khusus untuk output format.

Lihat daftar variabel output formats dan caranya dibawah atau klik disini

Daftar properti atau parameter untuk mendefinisikan output formats

Saat membuat output format kustom, kita perlu mendefinisikan seperti apa format kustom tersebut.

name

Digunakan untuk mengidentifikasi nama dari output format. Misalnya HTML, CSS, AMP (seperti pada tabel output format lengkap).

mediaType

Jenis atau tipe format. Misalnya “text/html” atau “application/json” dan lain-lain.

path

Jalur khusus untuk output format. Kebanyakan output format tidak membutuhkan parameter path ini.

Salah satu contoh yang menggunakan path adalah untuk output format tipe amp.

Kamu dapat melihatnya di tabel output format lengkap.

baseName

Digunakan untuk memberikan nama kustom untuk output format.

Kita tidak harus memberikan nama yang sama dengan nama dari file atau outputnya.

Kita dapat memberikan nama sesuai dengan apa yang kita mau.

rel

default: alternate.

Digunakan untuk memberikan nilai pada atribut rel yang biasanya digunakan pada tag html <link>.

protocol

Digunakan untuk mengatur protocol dari output format. Contoh protocol seperti http://, https://, dan lain-lain.

Pastikan hanya gunakan ini jika output format memang memerlukannya.

isPlainText

Bernilai true atau false.

Digunakan sebagai pengurai (parser) untuk output format yang bersifat tekstual.

Misalnya, JSON, CSV, CSS, dan lain-lain.

Lihat di tabel output format lengkap.

isHTML

Bernilai true atau false.

Gunakan parameter ini jika output format berjenis HTML.

noUgly

Digunakan untuk mematikan url dengan nama ekstensi dari output format.

Sebagai contoh, domainku.com/datajson.json menjadi domainku.com/datajson.

ugly

default = true

Ini kebalikan dari noUgly tadi.

Digunakan untuk memberikan nama ekstensi dari output format.

Sebagai contoh, domainku.com/datajson menjadi domainku.com/datajson.son.

Ini jarang digunakan karena secara default url yang dihasilkan dari output format memang menggunakan eksetensi dari output format itu sendiri.

Namun jika tidak ada, kamu dapat menggunakan ugly ini dan menetapkan nilainya ke true untuk memberikan url dengan ekstensi.

notAlternative

Bernilai true atau false.

Setting ke true jika tidak ingin output format dimasukkan ke dalam list dari variabel .AlternativeOutputFormats.

permalinkable

Bernilai true atau false.

Setting ke true jika ingin output format memiliki variabel .Permalink dan .RelPermalink.

Ini digunakan saat kita ingin output format memiliki url atau halaman yang dapat diakses.

Misalnya, domainku.com/datajson.json.

Secara default, HTML dan AMP sudah memiliki parameter ini tanpa harus kita setting.

weight

Digunakan untuk mengurutkan output format. Gunakan ini jika ingin mengurutkan banyak output formats yang kamu buat.

Variabel untuk mendapatkan output formats

Hugo sudah menyiapkan variabel khusus untuk dapat mengatur output formats.

Kita juga dapat menggunakan page variable di output formats.

Dibawah ini adalah daftar variabel untuk output formats.

.OutputFormats

Berisi semua output format yang telah dibuat di file konfigurasi situs (config.toml).

Kamu bisa mendapatkan output format dengan .OutputFormats yang digabungkan dengan function .Get.

Contoh penggunaannya:

Contoh, file datajson.json untuk output format json:

1{{ .RelPermalink }} > /url-halaman/
2{{ with .OutputFormats.Get "json" -}}
3{{ .RelPermalink }} > domainku.com/datajson.json
4{{- end }}

Contoh, file datahtml.html untuk output format html:

1{{ with  .OutputFormats.Get "html" -}}
2{{ .RelPermalink }} > domainku.com/datahtml/
3{{- end }}

json dan html diambil berdasarkan parameter baseName dari output format.

.AlternativeOutputFormats

Ini digunakan jika kamu ingin memasukkan output format ke situs hugo.

Biasanya ini digunakan pada tag html <link>. Misalnya, saat ingin menggunakan output formats css yang membutuhkan tag html <link>.

Lihat contoh dibawah ini:

1// Gunakan .AlternativeOutputFormats
2{{ range .AlternativeOutputFormats -}}
3<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
4{{ end -}}
5
6// Tampilan atau hasilnya
7<link rel="stylesheet" type="text/css" href="https://domainku.com/style.css">