Shortcode Variable Di Hugo

Disini kita akan belajar tentang shortcode. Mulai dari mengetahui apa itu shortcode, fungsi shortcode, dan variabel shortcode.

Shortcode adalah sebuah kode pendek yang digunakan untuk menambahkan kode eksternal ke file markdown.

Shortcode ditandai dengan 2 kurung kurawal diawal dan diakhir, dan 2 tanda panah berlawanan arah diawal dan diakhir.

Visualisasi shortcode:

1❴❴< nama_shortcode >❵❵

Shortcode kebanyakan digunakan untuk menambahkan fitur tertentu atau script yang tidak dapat dilakukan oleh file markdown karena keterbatasannya.

Dengan menggunakan shortcode, kita dapat menambahkan tag html, menambahkan kode css, kode javascript, dan lain-lain.

Selain itu, kita juga dapat menggunakan page variable di shortcode.

Dan bukan cuma itu saja, hugo juga telah menyiapkan beberapa variable khusus untuk shortcode ini.

Letak file shortcode

Jika ingin membuat sebuah shortcode, kita memerlukan sebuah folder khusus yang berfungsi untuk menampung file-file shortcode.

Folder khusus tersebut bernama shortcode. Folder shortcode dibuat di dalam folder layouts.

Berikut ini penggambaran folder shortcode:

1layouts
2    ├── _default
3    ├── partials
4    ├── shortcode
5            ├── img.html
6            ├── lorem-ipsum.md

Selain file berekstensi .html.

Kita juga dapat membuat sebuah shortcode dengan file berformat markdown.

Tapi kebanyakan orang membuat shortcode menggunakan file berekstensi .html.

Tentu saja, cara menggunakan shortcode berekstensi .html dan .md berbeda.

Cara menulis shortcode

Untuk shortcode dengan ekstensi file .html, kita dapat menuliskan semua jenis tag html yang didukung browser.

Contoh penulisan shortcode/img.html:

1<img src="{{ .Get 0 }}">

Untuk shortcode dengan ekstensi file .md atau .markdown, kita dapat menggunakan syntax markdown yang didukung.

Contoh penulisan shortcode/lorem-ipsum.md:

1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget sodales orci, id posuere sem. Nullam ornare est convallis felis scelerisque, nec maximus orci cursus. Sed volutpat malesuada odio eget porttitor.
2
3Aenean quis eros quis felis porttitor varius eget et eros. Pellentesque posuere, risus et feugiat ullamcorper, est sem tristique orci, a varius ex est non orci.
4
5Morbi a magna vitae nisl scelerisque fermentum tristique sit amet sapien. In ut tincidunt nulla. In ut velit sagittis, tincidunt massa vel, congue magna.

Cara menggunakan atau memanggil shortcode

Cara menggunakan shortcode yang berekstensi file .html

1❴❴< nama-file-shortcode >❵❵

Cara menggunakan shortcode yang berekstensi file .md atau .markdown

1❴❴% nama-file-shortcode %❵❵

Daftar variabel shortcode di Hugo

Berikut ini adalah daftar atau list dari variable shortcode.

.Name

Mereferensikan nama shortcode. Nama shortcode diambil dari nama file dari shortcode.

Contoh:

1shortcode
2    ├── tampilkan-foto.html

Maka nilai dari variable .Name adalah tampilkan-foto.

.Ordinal

Nilai urut berbasis 0. Akan mengembalikan nilai 0 jika dipanggil di halaman yang menggunakan shortcode.

.Page

Mengembalikan nilai berupa jalur file dari halaman dan nomor unik dari halaman yang menggunakan shortcode tersebut.

Sebagai contoh, postingan/halaman artikel2 berada dalam kategori blog akan mengembalikan nilai berikut:

1{Page(/blog/artikel2.md) nopPage 0xc0010bf680}

.Parent

Digunakan untuk mengakses konteks shortcode jika berada di dalam shortcode lainnya.

Maksudnya adalah untuk memberikan nilai khusus jika shortcode berada di dalam shortcode lainnya (berada di antara pembuka dan penutup shortcode).

Contoh code:

1❴❴< gallery >❵❵
2    ❴❴< img src="img1.jpg" >❵❵
3    ❴❴< img src="img2.jpg" >❵❵
4❴❴< /gallery >❵❵

Di dalam shortcode img, kamu bisa memberikan nilai seperti ini:

1<!-- jika tidak di dalam shortcode lainnya -->
2<img src="{{ .Get 'src' }}" alt="">
3
4
5<!-- jka didalam shortcode lainnya -->
6{{ with .Parent }}
7    <!-- kode khusus jika didalam shortcode lainnya, misalnya menggunakan tag <figure></figure> atau lainnya -->
8{{ end }}

.Position

Digunakan untuk mereferensikan posisi dan nama file dari halaman (artikel) yang menggunakan shortcode tersebut.

Sebenarnya, ini digunakan untuk menangani error yang terjadi di shortcode.

Berikut ini contoh penggunaannya:

1❴❴ with .Get "name" ❵❵
2    <!--  -->
3❴❴ else ❵❵
4    ❴❴ errorf "missing value for attribute 'name': %s" .Position ❵❵
5❴❴ end ❵❵

Output jika error: ERROR 2020/11/07 10:05:55 missing value for attribute name: “/Users/variables/shortcode.md:32:1”

.IsNamedParams

Bernilai true atau false

Bernilai true jika shortcode menggunakan parameter bernama.

Contoh parameter bernama:

shortcode/IMG.html :

1❴❴ $url_img := .Get "src" ❵❵
2<img src="❴❴ $url_img ❵❵" alt="">

content/artikel.md :

1❴❴< IMG src="images/gambar1.jpg" >❵❵

Shortcode IMG mengambil parameter bernama src.

src Inilah yang dimaksud parameter bernama.

.Inner

Digunakan untuk mereferensikan konten atau kode yang ditulis diantara tag pembuka dan penutup shortcode di dalam file markdown.

Maksudnya, variabel .Inner mengambil nilai dinamis diantara tag pembuka dan penutup shortcode yang secara langsung dihasilkan di file markdown tersebut.

Contohnya seperti ini:

shortcode/img-kustom.html :

1{{ .Inner }}

content/artikel.md :

1❴❴ img-kustom ❵❵
2    <img src="">
3❴❴ /img-kustom ❵❵

Biasanya, tujuan penggunaan .Inner di file markdown adalah agar kita dapat menuliskan tag html tertentu di dalam file markdown.

Seringkali kita membutuhkan beberapa tag html karena keterbatasan dari file markdown itu sendiri.

.InnerDeindent

Fungsinya sama seperti variabel .Inner. Perbedaannya adalah bahwa .InnerDeindent menghapus semua indentasi (spasi, dan tab).

Jika menggunakan .Inner sudah berlaku benar, maka tidak perlu menggunakan variabel .InnerDeindent.

Lihat dokumentasi variable shortcode.