Belakangan ini, gue agak telat nulis write-up, tapi kemarin semua akhirnya “terlunaskan”. Alasan keterlambatannya adalah karena satu minggu yang lalu gw mencoba mencari tema sebagai bahan nyontek inspirasi untuk melakukan revamp pada blog ini.

Sebagai catatan sendiri dan mungkin berguna untuk yang mampir, di postingan ini, gue hanya akan membahas sedikit bagian yang mencolok dari perubahan yang dilakukan

Desain kasarnya bisa dilihat digambar berikut.

image-20211015074555598
The power of Ms. Paint

Float the ToC

Tulisan yang gue posting pada umumnya adalah semacam tutorial atau walkthrough. Jadi tentunya floating ToC (Table of Content) adalah salah satu hal yang diperlukan oleh pembaca untuk bisa “loncat-loncat” antar section. Sayangnya ToC bawaan tema blog ini, yaitu PaperMod, belum floating. Dan setau gue authornya gak berniat untuk membuatnya jadi floating.

Gue mencoba untuk tidak mengganti-ganti tema atau pun menambah penggunaan plugin lainnya untuk membuat floating ToC ini. Jadi solusi yang didapat adalah dengan membagi dua area artikel menjadi dua, yaitu: area ToC dan area konten. Rasio-nya adalah 3:7. Nah, kedua area ini dibungkus oleh satu kontainer flex.

image-20211015105411374

Agar area konten bisa tetap full memakai 100% lebar halaman, hal selanjutnya adalah mengeluarkan si area ToC ini dari kontainer dengan meminuskan properti margin-left-nya sebesar lebarnya sendiri (-1*0.3*100%).

image-20211015111941266

Sisanya hanya tinggal styling dan penyesuaian posisi dari ToC tersebut. Desain ToC ini terinspirasi dari blognya 0xdf yang pakai bootstrap toc.

Show Latest Posts

Selanjutnya adalah bagian “Latests Posts” berikut. Fungsinya untuk menampilkan beberapa tulisan terakhir yang saya publikasi.

image-20211015132036300

Penambahan bagian “Latests Posts” ini sebenarnya hanya sekadar copy paste template halaman arsip yang dibuat ke template parsial lalu dipanggil di layouts/list.html.

...
{{- if (and .Site.Params.profileMode.enabled .IsHome) }}

{{- partial "c_profilemode.html" . }}
{{- partial "c_latest_posts.html" . }}
...

Dan berikut potongan kode yang relevan dari template c_latest_posts.html:

  {{ range first 5 (.Site.RegularPages) }} /* index 0 = newest */
  {{ .Title }}
  ...
  {{ .Date.Format "Jan 02" }}
  ...
  {{- printf "%d min" .ReadingTime }}
  ...
  {{- end }}

Desain untuk “Latests Posts” ini nyolong terinspirasi dari tema Hermit, faultable.dev, dan taniarascia.com.

Show Tags in a Post Entry

Menampilkan tag pada post entry ini simplenya bermaksud untuk memberi gambaran tentang topik apa yang dibahas di dalam postingan tersebut.

image-20211015144040968

Untuk menampilkan tag di setiap post entry, gue perlu ngubah total struktur HTML untuk post entry (bisa di-inspect aja ya). Lalu kode yang digunakan untuk menampilkan tag beserta tautannya merupakan modifikasi dari kode yang ada pada dokumentasi Hugo ini: Taxonomy Templates | Hugo (gohugo.io).

{{ $taxo := "tags" }}
{{ with .Param $taxo }}
	{{ $tag_limit := 7 }}
	{{ if ne (len .) 0 }}
		{{- range $k, $v := . -}}
		{{ if lt (add $k 1) $tag_limit }}
			{{- if and (gt $k 0) -}}· {{- end -}} 
			{{- with $.Site.GetPage (printf "/%s/%s" $taxo $v) -}}
			<a href="{{ .Permalink }}">{{- $v -}}</a>
			{{- end -}}
			{{- end -}}
		{{- end -}}
	{{- end -}}
{{ end }}

To be cont’d

Selain 3 hal diatas, ada beberapa elemen dan fitur bawaan yang diotak-atik seperti fitur pagination yang gue buang, pembaruan search indexing, fixed navbar, atau bahkan cuma sekadar iseng coba-coba animasi CSS pseudo selector yang nyolong terinspirasi dari situsnya yui540 dan sai-chan.

Revamp ini masih berantakan, jadi mungkin akan gue lanjut di waktu yang lain. See you!