Cara mengatur postingan unggulan di Hugo

mrfdn.com – Selalu ingin postingan blog Hugo Anda muncul di bagian atas halaman?

Kita bisa menggunakan fitur postingan “unggulan” atau “disematkan”!

Caranya mudah, cukup ikuti langkah-langkah di bawah ini.

1. Tambahkan parameter atribut ke frontmatter#

Tambahkan parameter yang ingin Anda sorot ke file postingan Markdown featured: true Tentang masa depan. Contoh:

---
title: "Postingan Featured"
date: 2023-10-30
featured: true
---

Jika Anda menggunakan format TOML, tulislah seperti ini:

+++
title = "Postingan Featured"
date = "2023-10-30"
featured = true
+++

2. Ubah template untuk menampilkan postingan unggulan#

Buka file daftar template, biasanya tersedia layouts/_default/list.html Atau mungkin di antara keduanya layouts/posts/list.html. Saya mengedit file di template yang saya buat layouts/partials/featured.html.

Tambahkan kode berikut untuk memfilter postingan featured: true.

{{/* Menampilkan Featured Posts */}}
{{ $featured := where .Site.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, postingan yang ada featured: true Muncul di bagian atas di bawah judul “Postingan Unggulan”.

3. (Opsional) Tambahkan gaya ke CSS#

Agar lebih menarik, kita bisa menambahkan sedikit CSS pada bagian unggulan.

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

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

4. Panggil template jika disetel sebagai parsial#

Buka berkasnya baseof.html Kemudian tempelkan baris ini di tempat yang Anda inginkan:

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

4. Periksa hasil#

Jalankan perintah hugo serve dan lihat perubahannya di browser.

Sekarang, Anda ditandai di postingan tersebut featured Selalu ditampilkan di bagian atas halaman.

Selesai!

Sekarang Anda dapat dengan mudah mengatur postingan mana yang ingin Anda sorot tanpa kesulitan.