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
Memang sih kalau domain dotcom dan kawan-kawannya itu membuat blog kita terlihat keren, profesional, dan gampang dapet job.
Tapi…
Bagaimana nasib blog kita pas kita nggak bisa mengurusnya? Misalnya oas kita di hutan atau pas kita nggak ada duit buat perpanjang dotcomnya? Kan, blog kita yang sudah dikenal banyak orang itu akhirnya nggak bisa diakses. Kan sayang.
Makanya sih blog ini nggak kubuatin dotcomnya, masih menginduk di Netlify domainnya.
Konten adalah raja
Di dashboard blogger, pilih tambah HTML lalu masukkan kode berikut:
<iframe src="https://www.worldometers.info/coronavirus/" height=400 width="100%"></iframe> Hasilnya:
Nggak bisa dipungkiri memang, kehadiran jQuery memudahkan umat programmer dalam membuat behavior website dengan lebih cepat. Misalnya aja, kita ingin membuat element click. Kalau di Javascript biasa, atau biasa disebut dengan Vanilla JS, kodenya seperti ini:
document.querySelectorAll(".halo").forEach(x => x.addEventListener("click", function(){ console.log(this.innerHTML) })) Nah, sekarang coba bandingkan sama jQuery:
$(".halo").click(function(){ console.log($(this).html()) }) Terus, kenapa sih kita baiknya menghindari menggunakan jQuery?
Masalah dalam memuat jQuery Ketika ingin menggunakan jQuery, tentu saja kita harus memuat jquery.
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:
Kode CSS Tambahkan kode di bawah ini sebelum </head>:
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> Kode Javascript Tambahkan kode berikut sebelum </body>:
<script> $("table").addClass("table").addClass("table-bordered") </script>
Terkadang kita perlu mengetikkan perintah banyak baris di Termux, seperti kode di bawah ini yang fungsinya adalah untuk upload dengan Git:
git status git add -A . git commit -m "upload" git push Apakah setiap kali kita ingin upload, harus terus-terusan mengetikkan semua itu?
Nah, dengan Termux Path, kamu cukup mengetikkan upload saja di Termux untuk melakukan perintah empat baris itu.
Download Termux Path Ini linknya: https://github.com/mzaini30/apk/raw/master/Termux%20Path.signed.apk.
Menggunakan Masukkan kodenya ke Termux Path lalu klik Olah:
Persiapan Pastikan kamu sudah menginstall Termux.
Lalu, kita install PHP-nya:
pkg install php Menjalankan PHP Arahkan Termuxmu ke lokasi project PHPmu.
Jalankan perintah berikut di Termux:
php -S localhost:2020 Setelah itu, buka localhost:2020 di browser.
