Kalian yang suka ikut forum (seperti Kaskus, Reddit, Tenforums, MDL, dll) pasti sudah tahu apa itu spoiler. Spoiler sangat sering digunakan, bahkan dianjurkan jika kalian ingin membuat postingan gambar yang berukuran besar ataupun video.

Untuk bisa membuat spoiler pada website yang menggunakan framework hugo, kita akan menyisipkan beberapa baris kode HTML saja (terutama untuk yang temanya belum support spoiler), Kode ini tidak menggunakan Javascript ataupun JQuery, murni menggunakan HTML saja. Berikut ini adalah langkah-langkah yang bisa kalian coba jika ingin membuat spoiler pada postingan blog yang menggunakan framework hugo.

1. Buat shortcode dengan nama spoiler.html di project hugo kalian, Shortcode ini bisa ditempatkan di bagian Tema atau langsung di bagian layouts pada project hugo.

Bagian Layouts (Disarankan)

rmdhnreza.my.id
└───layouts
    └───shortcodes
        └───spoiler.html

Bagian Tema

rmdhnreza.my.id
└───themes
    └───nama-tema
        └───layouts
            └───shortcodes
                └───spoiler.html

2. Isikan kode berikut pada file spoiler.html. Snippet HTML ini diambil dari Wowchemy Hugo Modules

1
2
3
4
5
6

{{- $id := printf "spoiler-%d" .Ordinal -}}

<details class="spoiler {{ .Get "class" }}" {{ with .Get "style" }}style="{{ . | safeCSS }}"{{ end }} id="{{$id}}">
  <summary>{{ .Get "text" | markdownify | emojify }}</summary>
  <p>{{ .Inner | markdownify | emojify }}</p>
</details>

3. Jika sudah kalian save.
4. Untuk membuat spoiler kalian tambahkan kode berikut pada postingan kalian

5. Jadinya seperti ini

6. Jika kalian ingin mengubah cursor nya menjadi pointer, kalian bisa tambahkan kode CSS berikut

1
2
3

summary {
  cursor: pointer;
}