Cara Set Featured Post di 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.

Tambahkan kode berikut buat ngefilter post yang featured: true.

{{/* Menampilkan Featured Posts */}}
{{ $featured := where .Pages "Params.featured" true }}
{{ if $featured }}
  <h2>Featured Post</h2>
  <div class="featured-posts">
    {{ range $featured }}
      <article>
        <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
        <p>{{ .Summary }}</p>
      </article>
    {{ end }}
  </div>
{{ end }}

{{/* Post Lainnya */}}
<h2>Semua Post</h2>
<div class="all-posts">
  {{ range .Pages }}
    {{ if not (in .Params "featured") }}
      <article>
        <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
        <p>{{ .Summary }}</p>
      </article>
    {{ end }}
  {{ end }}
</div>

Dengan kode ini, post yang ada featured: true bakal tampil di bagian atas, di bawah heading “Featured Post”.

3. (Opsional) Tambahkan Styling di CSS

Supaya lebih mencolok, kita bisa tambahkan sedikit CSS untuk bagian featured-nya.

.featured-posts {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
}

.featured-posts h3 {
  color: #e63946;
}

4. Panggil template tersebut jika diset sebagai partials

Buka file baseof.html lalu paste baris ini di dalamnya dimanapun anda ingin menempatkannya:

<main>
{{ if .IsHome }}
    {{ partial "featured" . }}
{{ end }}
</main>

4. Cek Hasilnya

Jalankan perintah hugo serve dan lihat perubahan di browser.

Sekarang, post yang kamu tandai featured bakal selalu muncul di bagian atas halaman.

Selesai!

Sekarang kamu bisa dengan mudah mengatur post mana yang mau ditonjolkan tanpa ribet.