Menambahkan instantclick.js pada Hugo Agar Terasa Seperti SPA

"a mouse cursor that move fast" - Bing Image Creator

Untungnya, keinginan ini cukup mudah untuk dilakukan, karena sudah ada orang yang mengembangkan library javascriptnya, instantclick.io.

Langsung saja, mengingat saya menggunakan tema PaperMod, tentu isinya mengikuti hal-hal yang menurut saya tidak begitu mengubah template dari PaperMod.

Buat file pada /layouts/partials/extend_head.html yang isinya:

{{- /* InstantClick.js */}}
{{- if (.Param "EnableInstantClick") }}
{{- $instantclick := resources.GetRemote "https://cdn.jsdelivr.net/npm/instantclick/dist/instantclick.min.js" }}
<script src="{{ $instantclick.RelPermalink }}" data-no-instant
    {{- if site.Params.assets.disableFingerprinting }}integrity="{{ $instantclick.Data.Integrity }}"{{- end }}
></script>
<script data-no-instant>InstantClick.init();</script>
{{- end }}

Intinya, hanya perlu mendownload instantclick.js dari CDN dan kemudian mengaktifkannya dengan InstantClick.init(). Ya, dengan ini saja, maka link yang ada di blog ini otomatis instan. Hanya saja, ternyata ada masalah ketika ada di halaman pencarian. Untuk menghilangkan instantclick, kita perlu menambahkan {{- if $is_search -}}data-no-instant{{- end -}} pada file header.

Untuk file header sendiri, meskipun saya tidak ingin mengubah template, saya harus melakukan clone/copy dan menempatkannya pada layout/partials/header.html serta menambahkan baris tadi di sekitar $is_search.`

Dengan begitu, Sepertinya semuanya aman, yang saya rasakan hanya sepertinya smooth-scrolling ketika kita meng-klik go-to-top tidak bekerja, tapi tidak apa-apa, yang penting klak-klik postingan lebih cepat!