Simple Code Hugo

Dalam catatan ini akan membahas sedikit kode hugo yang sering kali dipakai, seperti List Post, List Categories, List Tags dan lainnya.

Recent Post

Recent post yakni menampilkan post atau content yang terbaru kodenya kurang lebih seperti ini :

{{ range ( first 5 ( where .Site.RegularPages "Section" "catatan" )) }}
{{ $date := .Date.Format "02 January 2006" }}
  <h1>{{ .Title }}</h1>
  <p>{{ .Paramas.Author }} | {{ $date }}</p>
  <p>{{ .Summary }}</p>
{{ end }}

kode di atas akan menampilkan 5 post atau content terbaru, untuk Section bisa juga diganti dengan Type, dan catatan bisa disesuiakan dengan folder dimana post atau content tersimpan untuk penggunaan Section apabila menggunakan Type bisa disesuaikan dengan yang terdapat di frontmeter. Untuk pengaturan Summary bisa disesuaikan pada file config.toml:

summaryLength = 5

untuk panjang katanya silahkan disesuaikan.

Function After

Untuk membuat Recent Post seperti di atas bisa menggunakan function after,

Blok Pertama

{{ range ( first 2 ( where .Site.RegularPages "Section" "catatan" )) }}

{{ end }}

untuk Blok Kedua melanjutkan dari 2 recent post sebelumnya ;

{{ range  first 4 (after 2 (where .Site.RegularPages "Section" "catatan" )) }}

{{ end }}

List Post

List Post yakni menampilkan semua post atau content, bisanyan di letakan pada _default/list.html kurang lebih kodenya seperti ini :

{{ range where .Paginator.Pages "Section" "catatan" }}
{{ $date := .Date.Format "02 January 2006" }}
  <h1>{{ .Title }}</h1>
  <p>{{ .Paramas.Author }} | {{ $date }}</p>
  <p>{{ .Summary }}</p>
{{ end }}

Untuk Section dan catatan bisa disesuaikan seperti pada Recent Post di atas. Dan biasanya diikuti dengan pagination untuk pagination sendiri hugo sudah menyediakan tempeltenya untuk menggunakan cukup menambahkan satu baris berikut :

{{ template "_internal/pagination.html" . }}

untuk jumlah post atau content dapat disesuaikan pada file config.toml, misalkan 5 post atau content perhalaman :

paginate = 5

List Categories

List Categories yakni menampilkan semua Kategori, kurang lebih kodenya seperti ini :

{{ range $kategori, $taxonomy := .Site.Taxonomies.categories }}
  <li>
    <a href="/categories/{{$kategori}}">{{$kategori | humanize}} ({{ .Count }})</a>
  </li>
{{ end }}

kode di atas akan menampilkan semua kategori, dan membuat link ke halaman list semua post atau content yang memuat kategori tersebut, contohnya terdapat di halaman awal situs ini

List Tags

List Tags yakni menampilkan semua Tags, kurang lebih kodenya sama seperti List Categories :

{{ range $tag, $taxonomy := .Site.Taxonomies.tags }}
  <li>
    <a href="/tags/{{$tags}}">{{$tags | humanize}} ({{ .Count }})</a>
  </li>
{{ end }}

sama dengan List Categories kode diatas akan menampilkan semua tags dan membuat link ke halaman list semua post atau content yang memuat tag tersebut.

Lastmod

Untuk lastmod sendiri yakni menampilkan tanggal terakhir post atau content tersebut diupdate atau diedit berdasarkan git, ada beberapa yang perlu ditambahkan pada frontmatter di dalam file config.toml antara lain sebagai berikut :

[frontmatter]
  date = ["date", "publishDate", "lastmod"]
  lastmod = ["lastmod", ":git", "date", "publishDate"]
  publishDate = ["publishDate", "date"]
  expiryDate = ["expiryDate"]

untuk kodenya sendiri sebagai berikut :

{{ $lastmod := .Lastmod.Format "02 January 2006" }}
{{ $date := .Date.Format "02 January 2006" }}
<p> Catatan ini dibuat pada tanggal {{ $date }} dan terakhir diupdate pada tanggal {{ $lastmod }}</p>

kode di atas bisa digunakan dalam file _default/single.html contohnya pada catatan ini di bawah judul terdapat 2 tanggal, tanggal pertama tanggal pembuatan catatan ini dan yang kedua tanggal terakhir catatan ini diedit atau diupdate.

Tags:

Referensi:

Imam Az-Zuhri rahimahullah mengatakan :

"Sesungguhnya yang menyebabkan ilmu hilang adalah lupa dan tidak mengulanginya."

Catatan Terkait :

• + Basic Golang

• + Deploying a Hugo site on Gitlab

#semuabisaonline dengan Jetdino