Cara Mengurutkan Artikel Di Hugo
⛾ Home ─ hugo
Kamis, 08 Desember 2022
(Diupdate: Kamis, 19 Januari 2023) -
📗
3 Menit
Kali ini kita akan belajar cara mengurutkan daftar artikel atau konten di hugo.
Terdapat banyak cara untuk mengurutkan artikel, seperti mengurutkan berdasarkan tanggal dan waktu, mengurutkan berdasarkan parameter kustom, dan lain-lain.
Cara mengurutkan daftar artikel atau konten
Gunakan
.Pagesuntuk mengurutkan semua halaman di situs hugo.Gunakan
.RegularPagesuntuk mengurutkan hanya halaman reguler (konten atau artikel yang terdapat didalam folder content).
Urutkan berdasarkan bobot (Weight)
1<ul>
2 <!-- urutkan berdasarkan parameter "weight" di front matter -->
3 {{ range .Pages.ByWeight }}
4 <li>
5 <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
6 <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
7 </li>
8 {{ end }}
9</ul>
Urutkan berdasarkan tanggal (Date)
1<ul>
2 <!-- urutkan berdasarkan parameter "date" di front matter -->
3 {{ range .Pages.ByDate }}
4 <li>
5 <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
6 <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
7 </li>
8 {{ end }}
9</ul>
Urutkan berdasarkan tanggal posting (Publish Date)
1<ul>
2 <!-- urutkan berdasarkan parameter "publishDate" di front matter -->
3 {{ range .Pages.ByPublishDate }}
4 <li>
5 <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
6 <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
7 </li>
8 {{ end }}
9</ul>
Urutkan berdasarkan tanggal kadaluarsa (Expiration Date)
1<ul>
2 <!-- urutkan berdasarkan parameter "expiryDate" di front matter -->
3 {{ range .Pages.ByExpiryDate }}
4 <li>
5 <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
6 <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
7 </li>
8 {{ end }}
9</ul>
Urutkan berdasarkan tanggal modifikasi terakhir (Last Modified Date)
1<ul>
2 <!-- urutkan berdasarkan parameter "lastmod" di front matter -->
3 {{ range .Pages.ByLastmod }}
4 <li>
5 <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
6 <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
7 </li>
8 {{ end }}
9</ul>
Urutkan berdasarkan panjang konten (Length)
1<ul>
2 <!-- urutkan berdasarkan panjang konten pada artikel atau konten -->
3 {{ range .Pages.ByLength }}
4 <li>
5 <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
6 <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
7 </li>
8 {{ end }}
9</ul>
Urutkan berdasarkan judul (Title)
1<ul>
2 <!-- urutkan berdasarkan parameter "title" (a, b, c) di front matter -->
3 {{ range .Pages.ByTitle }}
4 <li>
5 <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
6 <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
7 </li>
8 {{ end }}
9</ul>
10``
11
12### Urutkan berdasarkan judul link (Link Title)
13
14```html
15<ul>
16 <!-- urutkan berdasarkan parameter "linkTitle" di front matter. Jika "linkTitle" tidak di set, maka akan mengambil nilai berdasarkan parameter "title" -->
17 {{ range .Pages.ByLinkTitle }}
18 <li>
19 <h1><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></h1>
20 <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
21 </li>
22 {{ end }}
23</ul>
Urutkan berdasarkan parameter kustom
Selain mengurutkan menggunakan parameter default hugo, kita juga bisa mengurutkan berdasarkan parameter kustom dengan nilai yang kita tentukan sendiri.
Sebagai contoh, misalnya saya ingin mengurutkan berdasarkan parameter kustom bernama “rating” yang mengambil rating dari artikel dan mengurutkannya.
Maka saya dapat melakukan hal seperti dibawah ini:
Berdasarkan parameter kustom “rating”
1// urutkan berdasarkan parameter kustom "number" yang diatur di front matter
2{{ range (.Pages.ByParam "myrating") }}
3 // ...
4{{ end }}
Berdasarkan item bersarang dari parameter kustom di front matter
1---
2title: blablabla
3description: ...
4author:
5 first_name: Agus
6 last_name: Jurki
7 display_name: Agus Jurki
8---
1{{ range (.Pages.ByParam "author.last_name") }}
2 // ...
3{{ end }}
Cara membalikkan urutan daftar artikel atau konten
Selain mengurutkan daftar artikel atau konten berdasarkan pengaturan bawaannya.
Kia juga bisa membalikkan pengurutan artikel dengan menggunakan variabel .Reverse.
Dibawah ini adalah contoh membalikan urutan artikel berdasarkan tanggal:
1<ul>
2 <!-- urutkan berdasarkan kebalikan dari parameter "date" (paling baru ke paling lama) di front matter -->
3 {{ range .Pages.ByDate.Reverse }}
4 <li>
5 <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
6 <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
7 </li>
8 {{ end }}
9</ul>
Selain ByDate, kamu juga bisa membalikkan semua parameter yang saya jelaskan tadi.
Cukup gunakan
.Reverseuntuk membalikkan urutan daftar konten atau artikelnya.
Silahkan komen jika ada yang ingin ditanyakan 😄.