Tutorial Membuat Related Post di Hugo

Hugo adalah salah satu generator situs web statis (static site generator) yang cukup populer di dunia pengembangan web. Dengan Hugo, kita dapat dengan mudah membuat situs web yang cepat, efisien, dan mudah dikelola. Namun, salah satu tantangan yang sering dihadapi oleh pemilik situs web adalah bagaimana cara menambahkan “Related Post” ke situs mereka. Padahal, dalam dunia blogging , ini fitur yang cukup penting.

So, bagaimana caranya? Apakah kita perlu ngoding dari awal banget? Mari kita ngobar lagi.

Cara Membuat Related Post di Hugo

Untungnya, Hugo sendiri sudah memiliki fungsi untuk memasukkan related post atau related content, yang perlu kita lakukan adalah memasukkan dan mengaturnya.

Step 1: Konfigurasi config.toml

Pertama, kita harus setup dulu di config.toml. Hugo menggunakan nilai parameter yang kita masukkan di front matter untuk menentukan related content.

Buka file config.toml lalu tambahkan konfigurasi berikut di dalam file Anda:

// config.toml

[related]
  includeNewer = true
  threshold = 80
  toLower = true
[[related.indices]]
  name = 'keywords'
  weight = 100
[[related.indices]]
  name = 'date'
  weight = 10
[[related.indices]]
  name = 'categories'
  weight = 80
[[related.indices]]
  name = 'tags'
  weight = 100

Keterangan:

• includeNewer = true Memasukkan artikel terbaru yang relevan sebagai related content. Misalnya begini, Anda punya beberapa artikel tentang kuliner yang diposting tanggal 1, 3, dan 5 September. Di artikel tanggal 3 September, jika setup true, maka artikel yang terbit tanggal 5 (lebih baru) akan masuk sebagai related content. Jika false, maka related content hanya akan memasukkan artikel lama yaitu artikel yang diterbitkan sebelum artikel utama.
• treshold = 80 Relevansi dengan artikel utama. Angkanya dari 0-100, semakin tinggi angka maka semakin relevan. Dihitung dari konfigurasi [[related.indices]].
• toLower = true Ketika diatur sebagai true, ini akan mengubah semua teks menjadi huruf kecil sebelum menghitung relevansi. Ini memastikan bahwa perbedaan antara huruf besar dan kecil tidak mempengaruhi hasil.
• [[related.indices]] Daftar indeks yang digunakan untuk menghitung relevansi.
• name = 'keywords Indeks untuk kata kunci yang ada dalam setiap artikel.
• weight = 100 Bobot untuk indeks name. Semakin tinggi nilainya, maka semakin relevan.
• name = 'categories Indeks untuk kategori.
• name = 'tags Indeks untuk tags.

Seperti yang Anda lihat, saya menggunakan weight = 100 untuk tags, sedangkan untuk kategori hanya 80. Itu karena saya ingin related post yang tampil berdasarkan tags, kalau tidak ada tags yang relevan, barulah menggunakan kategori.

Anda bisa mengganti angkanya sesuai dengan angka atau bobot yang diinginkan.

Step 2: Buat File Partial

Buat file related-post.html di folder partials. Dengan menggunakan partials, kita lebih fleksibel memasukkan related post ke mana saja. Lalu masukkan sintaks berikut:

<!-- layouts/partials/related-post.html -->

{{ $related := site.RegularPages.RelatedIndices . "categories" "tags" "date" | first 3 }}
{{ with $related }}

<h2 class="related-post__header">Related Articles</h2>

<div class="col-11 col-xl-10 card-group">
    {{ range . }}
    <div class="card border-0 px-3">
        {{ if .Params.featured_image }}
        <img src="{{ .Params.featured_image | absURL }}" class="related-post__thumbnail" alt="{{ .Params.alt_text }}">
        {{ end }}
        <div class="card-body">
            <h3 class="related-post__title"> <a href="{{ .RelPermalink }}" class="stretched-link">{{ .Title }}</a></h3>
        </div>
    </div>
    {{ end }}
</div>
{{ end }}

Keterangan

• | first 3 Artinya kita akan menampilkan 3 related content. Anda bisa mengganti angkanya dengan jumlah artikel terkait yang diinginkan.

Kode di atas adalah kode yang telah saya modifikasi, kalau Anda hanya ingin menampilkan judul artikel tanpa featured image, bisa menggunakan sintaks berikut:

<!-- layouts/partials/related-post.html -->

{{ $related := site.RegularPages.RelatedIndices . "categories" "tags" "date" | first 3 }}
{{ with $related }}
<h2>See Also</h2>
<ul>
 {{ range . }}
 <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
 {{ end }}
</ul>
{{ end }}

Step 3: Sisipkan Related Post ke single.html

Buka file single.html yang menangani single post, lalu panggil file partial tadi dengan {{ partial "related-post.html" . }}. Letakkan di bawah artikel.

Step 4: Lihat Hasilnya

Coba jalankan server Hugo dan lihat hasilnya, apakah muncul? Untuk menyesuaikan tampilan, gunakan CSS seperti biasa. Tetapi, bagaimana bila tidak muncul?

Ada beberapa kemungkinan: pertama, memang tidak ada artikel yang relevan (keyword, kategori, atau tag). Ini biasa terjadi bila artikel kita memang belum banyak. Kedua, konten artikelnya memang relevan tapi front matter-nya tidak sama. Misalnya, yang satu menggunakan kategori A, sedangkan yang lain tidak ada kategori di front matter.

Ketiga, ini jarang terjadi karena sepengalaman saya, bila Hugo tidak menemukan artikel yang relevan dari sisi kategori, maka yang ditampilkan adalah artikel yang terbit sebelum dan sesudahnya.

Hal yang terpenting, bila Hugo-nya tidak eror, maka kode Anda bekerja dengan baik.

Gimana, cara membuat related post di Hugo cukup mudah, bukan? Tapi kalau Anda kesulitan atau menghadapi kendala, silakan tanyakan di kolom komentar atau mention saya di Twitter. Saya akan dengan senang hati membantu. (eL)