hugo

mrfdn.com - Mau bikin postingan yang selalu muncul di atas halaman blog Hugo-mu? Kita bisa pakai fitur “featured” atau “pinned” post! Caranya gampang, ikuti langkah-langkah di bawah ini. 1. Tambahkan Parameter Featured di Front Matter Di file Markdown post yang mau kamu highlight, tambahkan parameter featured: true di front matter-nya. Contoh: --- title: "Postingan Featured" date: 2023-10-30 featured: true --- Kalau pakai format TOML, tulisnya begini: +++ title = "Postingan Featured" date = "2023-10-30" featured = true +++ 2. Modifikasi Template untuk Menampilkan Featured Post Buka file template list, biasanya ada di layouts/_default/list.html atau mungkin di layouts/posts/list.html. Pada template yang saya kembangkan, saya edit file layouts/partials/featured.html. ...

mrfdn.com - Mungkin ada beberapa di antara teman-teman yang menggunakan Hugo sebagai platform untuk nge-blog. Dan blog nya juga menampilkan iklan adsense. Kali ini saya ingin share cara menampilkan iklan di antara paragraf hugo. Baris iklan akan tampil setiap beberapa paragraf. Iklan akan terender secara otomatis pada file html, bukan tampil sebagai javascript. Tanpa berlama-lama, begini caranya menampikan iklan di antara paragraf hugo blog. Buat file partial Buat file partial di layouts/partials/iklan/iklan-tengah.html. ...

mrfdn.com - Saat ini saya menjalankan sebuah situs hugo pada sebuah server VPS yang menggunakan Easyengine (nginx) sebagai web servernya. Semuanya berjalan sangat cepat, dan tanpa kendala sedikitpun. Namun saya menemukan kejanggalan bahwa ternyata halaman eror 404 tidak redirect dengan baik, dia akan menunjukkan pesan eror langsung dari server, bukan malah redirect ke file 404 yang sudah saya buat. Setelah 5 menit ubek2 google saya menemukan solusinya. Ternyata kita hanya perlu manambahkan baris error_page 404 /404.html; pada file nginx.conf situs tertentu. ...

mrfdn.com - Hugo memiliki sedemikian rupa fungsi-fungsi yang bisa digunakan untuk merender halaman yang diinginkan. Salah satunya adalah fungsi if dan isset yang bisa dilakukan untuk melakukan kondisional. Dari pada melakukan pengkondisian sederhana seperti menampilkan description atau summary di hugo Pada artikel ini saya ingin menunjukkan cara saya menggunakan rungsi if isset untuk merender taxonomy yang saya beri nama keyword dan tags, yang mana tag dan keyword ini sudah saya set pada bagian frontmatter file artikel.md saya. ...

Setelah menggunakan Bulma, kini saatnya saya menggunakan Tailwind untuk web Hugo saya karena class-class Tailwind lebih mudah dipahami dari pada Bulma. Tailwind merupakan salah satu CSS Framework yang ada di dunia. Ini merupakan css framework saya. Dengan tailwind saya bisa menciptakan berbagai macan halaman website yang keren dengan sangat mudah. Tailwind benar-benar mudah karena di sana kita hanya menulis class class pada setiap tag html yang dibuat. Tapi jika ingin menggunakan Tailwind di Hugo ini butuh trik khusus. ...

mrfdn.com - Halaman 404 adalah halaman yang berisi tentang informasi halaman tidak ditemukan pada sebuah situs yang diakses. Halaman ini bisa ditampilkan atau bisa juga tidak dengan cara melakukan redirect ke halaman lain jika memang url tidak terdapat pada situs. Di hugo kita bisa set halaman 404. Halaman ini nanti akan berfungsi sebagai penanda kepada user jika saja salah memasukan url. Isinya hanya sejumlah informasi bahwa halaman tidak ditemukan dan url link ke home / halaman utama. ...

mrfdn.com - Shortcode di hugo merupakan salah satu cara untuk memanggil elemen tertentu pada situs. Misalnya kita ingin membuat toc (term of service) di dalam artikel hugo, maka kita bisa dengan mudah memanggilnya dengan shortcode. Shortcode juga ditemukan di Wordpress. Tapi untuk membuat shortcode di WP cukup sulit, beda dengan HUGO dimana kita hanya perlu membuat file shortcode lalu memanggilnya di mana pun kita inginkan. Membuat shortcode TOC di Hugo ...

mrfdn.com - Archetypes di hugo merupakan sebuah folder yang berisi sebuah file default.md yang berfungsi sebagai konfigurasi frontmatter pada setiap postingan markdown yang dibuat. Contoh archetypes hugo yang saya gunakan saat ini : --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} url: /{{.File.TranslationBaseName}} tags: description: tulis deskripsi singkat di sini thumbnail: /uploads/url-gambar-thumbnail.jpg draft: true --- Baris kode di atas akan muncul setiap kali membuat sebuah postingan baru di hugo. ...

mrfdn.com - Pada artikel sebelumnya kita sudah berhasil menampilkan list artikel / konten yang terdapat pada blog hugo yang sedang dibuat. Pada artikel ini saya ingin menunjukkan cara untuk menampilkan setiap isi artikel tersebut melalui file single.html. Single.html adalah file yang bertugas untuk merender setiap halaman postingan yang terdapat pada folder content. Silahkan edit file layouts/_default/single.html kemudian paste baris ini di dalamnya. {{ define "main" }} <section> <h1>{{ .Title }}</h1> <div> <article> {{ .Content }} </article> </div> </section> <aside> <div> <section> <h4>{{ .Date.Format "Mon Jan 2, 2006" }}</h4> <h5>{{ .WordCount }} Words</h5> </section> </div> <div> {{ with .PrevInSection }} <a class="previous" href="{{ .Permalink }}">{{.Title}}</a> {{ end }} {{ with .NextInSection }} <a class="next" href="{{ .Permalink }}"> {{.Title}}</a> {{ end }} </div> </aside> {{ end }} Sehingga hasilnya akan seperti ini. ...

mrfdn.com - Pada artikel sebelumnya sudah dijelaskan beberapa hal yang penting diketahui tentang partials Pada artikel ini saya akan membahas tentang cara setting file list.html pada theme hugo yang sedang dibuat. List template merupakan daftar semua halaman apa saja yang ada di web hugo. Berbeda dengan home page dimana kita bisa set beberapa halaman saja yang tampil, kalau di sini kita bisa melihat semua isi konten. Tanpa berlama-lama simak penjelasannya di bawah. ...