Membuat Link External di Hugo
Dalam sebuah website tentu kita tak asing lagi berhubungan dengan link, baik itu link internal maupun external.
Secara default tag a href akan menghasilkan link internal. Sebagai contoh:
<a href="https://surur.my.id">Personal Blog</a>
Dan untuk link external tentu cukup hanya menambahkan atribut target="_blank" Seperti berikut:
<a href="https://surur.my.id" target="_blank">Personal Blog</a>
Mudah bukan….
Eits.. tapi bukan sesederhana itu masalahnya.
Permasalahan
Blog pribadi ini saya bangun dengan stack Hugo (SSG) . Di hugo secara default semua link di postingan akan menghasilkan link internal walapun kita sudah menambahkan atribut target="_blank"
Tentu ini tidak nyaman rasanya jika di kondisi tertentu ingin melampirkan link external, misal disetiap postingan artikel kita ingin mencantumkan link referensi tapi dengan link external agar terbuka di tab baru.
Solusi
Setelah mendaki gunung lewati lembah, akhirnya ketemu solusi yang indah.
Buat file render-link.html di layout/_default/_markup/render-link.html, jika belum ada folder _markup tinggal bikin saja.
Tambahkan script berikut kedalam render-link.html
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
Penjelasan singkat
Script diatas akan menghasilkan link external dimana link href ada http / https.
Referensi
- https://gohugo.io/templates/render-hooks
- https://discourse.gohugo.io/t/simple-way-to-open-in-a-new-tab/28677/4
Published: 31 Juli 2022
Updated: 22 Agustus 2022
