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

baca juga : Download Animestream WordPress Gratis

{{< 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 [ID NYA] >}}

Menampilkan atau embed Twitter di Hugos

{{< tweet [ID NYA] >}}

Menampilkan atau embed Video Youtube di Hugo

{{< youtube [ID NYA] >}}

Contoh :

Akhir kata

Sekian pengenalan Shortcode hugo, semoga bermanfaat

Apa selanjutnya? Selanjutnya adalah belajar membuat shortcode sendiri 😁