Tambahan - Series
Series adalah pengelompokan tulisan berdasarkan tema yang sama.
2 min read
Series adalah fitur pengelompokan tulisan berdasarkan tema yang sama. tulisan ini, misalnya, adalah bagian dari kategori Blog. Kode Series saya salin dari blog Justin James .
Untuk menambahkan fitur series, pertama-tama adalah membuat file /layout/partial/series.html dengan kode berikut
{{ if .Params.series }}
<div>
This article is part of {{ index .Params.series }} series.
<ul class="list-group">
{{ range $num,$post := (index .Site.Taxonomies.series (index .Params.series 0 | urlize)).Pages.ByDate }}
{{ if eq $post.Permalink $.Page.Permalink }}
<li class="list-group-item active">
Part {{ add $num 1 }}: You are here.
</li>
{{ else }}
<li class="list-group-item">
<a href="{{$post.Permalink}}">
Part {{ add $num 1 }}: {{ $post.Params.title}}
</a>
</li>
{{end}}
{{end}}
</ul>
</div>
{{end}}
Masukkan bagian partial series ke /_default/single.html. Saya mengikuti arahan blog Justin James yang menambahkan partial ke bagian sebelum tulisan dan di bawahnya, menjadi
<article>
{{ partial "series.html" . }}
<div class="single-content">
{{ .Content }}
</div>
{{ partial "series.html" . }}
</article>
Kemudian, buat kode CSS di folder /assets/css/series.css atau tambahkan kodenya di /assets/css/custom.css
.series {
background: rgba(255,255,255,0);
height: auto;
padding: 8px 8px 10px 20px;
border-left: 3px solid;
border-color: $global-font-secondary-color;
}
Lalu baris berikut ditambahkan ke hugo.toml
[taxonomies]
series = "series"
Selanjutnya, Series diletakkan pada front matter setiap tulisan dengan format berikut:
---
series: ["nama-series"]
---
Beberapa catatan:
- Seperti yang sudah dijelaskan pada tulisan Sidenote, saya menyukai border kiri untuk mempertegas sebuah bagian.
- Saya masih kurang menyukai posisi Series bagian atas. Jaraknya terlalu dekat dengan baris Tagar.
- Pekerjaan rumah: Tampilan blok hitam juga muncul pada tulisan yang tidak ada dalam kelompok Series.