Mengenal shortcodes di Hugo

Kita menulis konten di static site seperti Hugo menggunakan markdown. Dengan syntax markdown ini, kita bisa lebih fokus ke konten dibanding harus selalu melihat tag HTML yang dibuat. Tapi tentu ada yang kurang, ada beberapa tag html yang sulit diimplementasikan di markdown, sebut saja seperti iframe. Untuk itu, Hugo memperkenalkan Shortcodes!

Apa itu Shortcodes

Shortcodes adalah syntax singkat yang dibuat oleh Hugo untuk merender berbagai kebutuhan tag HTML tambahan yang tidak tersedia oleh format markdown.

Sebagai contoh untuk menggunakan tag figure di HTML

{{< figure src="link-gambar.jpg" title="judul gambar" >}}

Ini akan menghasilkan

<figure>
  <img src="link-gambar.jpg"  />
  <figcaption>
      <h4>judul gambar</h4>
  </figcaption>
</figure>

Atau contoh untuk memberi highlight pada kode

{{< highlight html >}}
<h1> Halo </h1>
<h2> Sekolah Koding </h2>
{{< /highlight >}}

Saat menampilkan hasilnya, kamu akan melihat syntax HTML tersebut sudah dalam format highlight.

Shortcode Hugo untuk media sosial

Tidak hanya itu, fungsi kekinian seperti menampilkan tweet atau instsagram bisa juga dengan shotcode dari Hugo

Menampilkan atau embed foto Instagram di Hugo

{{< instagram IDFOTO >}}

Menampilkan atau embed Twitter di Hugos

{{< tweet ID-TWEET >}}

Menampilkan atau embed Video Youtube di Hugo

{{< youtube ID-VIDEO >}}

Baca dokumentasi shortcode Hugo di sini