Belakangan ini, gue agak telat nulis write-up, tapi akhirnya minggu ini semua “terlunaskan”.
Salah satu alasan keterlambatannya adalah karena seminggu yang lalu gue terdistract karena pengen nyari tema baru sebagai bahan nyontek inspirasi untuk melakukan revamp blog ini.
Di postingan ini, gue akan membahas sedikit bagian tentang perubahan yang gue lakuin. Sebenarnya ini sebagai catatan pribadi aja tapi mungkin jadi referensi bagi yang mampir.
Desain kasarnya bisa dilihat digambar berikut.
Floating 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 dengan mudah “loncat” antar section tanpa harus scroll panjang. Untungnya tema ini, yaitu PaperMod, sudah punya fitur ToC bawaan. Tapi sayangnya, toc-nya belum bisa floating.
Implementasi
Gue sebisa mungkin untuk tidak mengganti-ganti tema atau pun menambah penggunaan asset javascript lainnya seperti jquery atau bootstrap hanya untuk membuat floating ToC ini. Posisi ToC bawaan saat ini menjadi satu dengan kontainer dari artikel. Jadi gue perlu membuat satu kontainer flex baru sebagai parent kontainer untuk kontainer area konten/artikel dan kontainer area toc. Kemudian gue bagi area kontainer flex tersebut menjadi dua bagian dengan rasio 3:7, dimana 3 untuk area toc sedangkan 7 untuk area konten.
Ilustrasinya seperti berikut.
Agar area konten bisa tetap memakai penuh lebar halaman seperti sebelumnya, hal selanjutnya adalah mengeluarkan kontainer area ToC ini dari kontainer parent-nya dengan meminuskan properti margin-left-nya sebesar lebarnya sendiri yaitu: -1*0.3*100%.
Sisanya hanya tinggal styling dan penyesuaian posisi dari ToC tersebut. Desain ToC ini terinspirasi dari blognya 0xdf yang pakai bootstrap toc.
Latest Posts
Selanjutnya adalah bagian “Latests Posts” berikut. Fungsinya untuk menampilkan beberapa tulisan terakhir yang saya publikasi.
Implementasi
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, show 5 latest*/
{{ .Title }}
...
{{ .Date.Format "Jan 02" }}
...
{{- printf "%d min" .ReadingTime }}
...
{{- end }}
Desain untuk “Latests Posts” ini terinspirasi dari tema Hermit, faultable.dev, dan taniarascia.com.
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.
Implementasi
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 }}
Setelah tagnya muncul, gue tinggal menyesuaikan stylenya aja.
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!