Secara default, Hugo nggak mendukung syntax highlighting untuk Pug. Contohnya aja seperti di bawah ini:
doctype html html head title Hello world meta(charset="utf-8") body h1.text-center Hello world Maka, kita akali dengan menggunakan syntax highlighting Javascript:
doctype html html head title Hello world meta(charset="utf-8") body h1.text-center Hello world
Buat kode berikut di /layouts/shortcodes/html.html:
{{ .Inner }} Untuk menggunakannya, contohnya seperti di bawah ini:
{{< html >}} <details> <summary>Spoiler</summary> <p>Halo <strong>Zen</strong></p> </details> {{< /html >}} Hasilnya:
Spoiler Halo Zen
Pastikan dulu blogmu yang Hugo sudah memanggil jQuery di <head></head>.
Lalu, letakkan pug.js di /static/. Pug JS bisa kamu dapatkan di /pug.js.
Letakkan kode berikut ini di /layouts/shortcodes/pug.html:
{{ $acak := index (seq 999 | shuffle) 0 }} <div class="tes-{{ $acak }}"></div> <script src="/pug.js"></script> <script> pug = require("pug") $(".tes-{{ $acak }}").html(pug.compile("{{ .Inner }}")) </script> Untuk menggunakannya, kamu tinggal menggunakan tag {{< pug >}}{{< /pug >}}. Contohnya aja seperti di bawah ini:
Lebih cepat Sebagaimana yang dikatakan oleh para blogger SSG, Hugo adalah SSG yang cepat. Ya, tak coba sih kayaknya benar. Ini lebih cepat dari Jekyll. Dan juga, ada fitur Livereloadnya sehingga blog kita akan reload otomatis setiap ada perubahan.
Template engine Namun, yang paling nggak nyaman adalah karena dia menggunakan TCL untuk layoutingnya. Contoh sintaksnya ada di postinganku tentang membuat fitur pencarian di Hugo.
Sangat nggak nyaman banget kan?
