Kumpulan Sintaks Hugo

Artikel ini lebih tepat disebut sebagai cheat sheet alias daftar contekan. Catatan saya ketika mengembangkan website menggunakan Hugo . Karena saya pelupa, maka untuk mengabadikan ingatan, sintak-sintaks itu saya tuliskan di sini.

Kumpulan Kode Hugo

Selain dari dokumentasi resminya, saya sendiri banyak mendapatkan insight dari bloger dan developer lain, baik developer luar maupun para developer dari Indonesia. Oleh sebab itu, seperti kata Pak Dhika, apa yang kita dapatkan dari komunitas harus dikembalikan kepada komunitas.

1. Menampilkan hanya sebagian dari file partial

Ketika ingin memasukkan file partial ke sebuah halaman, kita memanggil file partial tersebut dengan {{ partial "content/file-partial.html" . }}. Tetapi bagaimana bila kita hanya ingin memasukkan sebagian dari apa yang ada di file partial? Katakanlah satu section.

Caranya, di file partial, kita bungkus tiap section dengan operator kondisional dan beri ID pada masing-masing section. ID akan kita gunakan saat section tersebut dipanggil. Sebagai contoh:

<!-- file-partial.html -->
{{ if eq .section "section1" }}
<section id="section1">
    <!-- Isi section 1 -->
</section>
{{ else if eq .section "section2" }}
<section id="section2">
    <!-- Isi section 2 -->
</section>
{{ else if eq .section "section3" }}
<section id="section3">
    <!-- Isi section 3 -->
</section>
{{ end }}

Maka, tiap section bisa kita panggil di halaman mana pun dengan cara memasukkan sintaks {{ partial "content/file-partial.html" (dict "section" "section1") }}. Perhatikan di bagian "section", ini menandakan tag HTML yang kita gunakan. Jadi, kalau misalnya kita menggunakan tag div, maka disi dengan "div".

Saya sendiri menggunakan metode ini untuk menyatukan ikon SVG. Karena satu ikon digunakan di beberapa halaman yang berbeda, saya tidak mungkin memasukkan ikon SVG tersebut setiap kalinya. Selain tidak efektif dan jadi lama, halaman tersebut juga jadi terlalu panjang.

2. Menyatukan File Shortcode

Ada berapa file shortcode di web Hugo Anda? Puluhan? HAHAHAHASAMMA! WeLL, shortcode adalah fitur favorit saya karena seperti kata Hugo di dokumentasinya, shortcode sengaja dibuat untuk mengatasi keterbatasan-keterbatasan yang dimiliki oleh Hugo.

Sayangnya, terlalu banyak file shortcode juga akan membuat manajemen konten web kita jadi tidak efektif. So, untuk mengatasinya, kita bisa menggunakan metode yang sama seperti file partial di poin pertama.

{{ if eq (.Get "section") "shortcode1" }}
<section id="shortcode1">
  <!-- Isi shortcode 1 -->
</section>
{{ else if eq (.Get "section") "shortcode2" }}
<section id="shortcode2">
  <!-- Isi shortcode 2 -->
</section>
{{ else if eq ( .Get "section") "shortcode3" }}
<section id="shortcode3">
  <!-- Isi shortcode 3 -->
</section>
{{ end }}

Untuk shortcode, ada sedikit perbedaan dalam penulisan sintaks, kita perlu menggunakan fungsi .Get. Get adalah fungsi bawaan Hugo yang digunakan untuk mengambil nilai dari parameter yang diberikan kepada shortcode.

Nah, setelah dibuat, kita bisa memanggil shortcode tersebut dengan {{ <shortcode-gabungan section="shortcode1"> }} di mana saja di dalam konten.

3. Menampilkan daftar kategori dan tag blog

Untuk menampilkan daftar kategori dan tag, caranya cukup mudah yaitu menggunakan sintaks:

// Menampilkan daftar kategori
<ul>
{{ range $name, $taxonomy:= .Site.Taxonomies.categories }}
    <li>
      <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
    </li>
{{ end }}
</ul>

// Menampilkan daftar tag
<ul>
{{ range $name, $taxonomy:= .Site.Taxonomies.tags }}
    <li>
      <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
    </li>
{{ end }}
</ul>

TETAPI, bagaimana bila selain blog kita juga punya page lain yang memiliki kategori? Misalnya, halaman portofolio atau kategori produk. Bila menggunakan sintaks di atas, Hugo akan merender seluruh kategori dan tag, tak peduli apa halamannya.

Lalu, bagaimana bila kita hanya ingin menampilkan daftar kategori blog dan mengecualikan kategori dari halaman lainnya? Di Hugo, halaman disebut sebagai section, kita bisa menyaringnya seperti ini:

// Hanya menampilkan kategori untuk section blog

<ul>
    {{ range $name, $taxonomy := .Site.Taxonomies.categories.ByCount }}
    {{ $isBlogCategory := false }}
    {{ range .Pages }}
    {{ if eq .Section "blog" }}
    {{ $isBlogCategory = true }}
    {{ break }}
    {{ end }}
    {{ end }}
    {{ if $isBlogCategory }}
    <li>
        <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> <span class="count">({{ .Count }})</span>
    </li>
    {{ end }}
    {{ end }}
</ul>

Demikian, semoga membantu. Bila ada sintaks atau metode baru, artikel ini akan saya update. (eL)