Add target=`_blank` di Hugo Link

Mulai versi 0.60 hugo mengganti Content Format nya dari Blackfriday ke Goldmark. Untuk blackfriday kalian bisa setting di config.toml

1
2
[blackfriday]
  hrefTargetBlank = true

Tetapi di hugo 0.60 sudah tidak bisa melakukan itu, karena sudah menggunakan Goldmark, jadi kalian perlu beberapa langkah tambahan untuk menambahkan target="_blank" secara default di setiap link hugo website kalian.

Render Hooks dengan Goldmark

Goldmark dan Markdown Render Hooks adalah fitur baru di Hugo v0.62.0 jadi pastikan versi Hugo kalian sama atau lebih baru dari versi ini.

Markdown Render Hooks menawarkan beberapa cara untuk mengubah perilaku default markdown , misalnya mengubah ukuran gambar yang diunggah, menambahkan class lazy di setiap gambar yang kalian unggah atau membuka link di tab baru.

Untuk membuka setiap link di tab baru kalian harus membuat render-link.html di folder layout/_default/_markup/

1
2
3
4
layouts
└── _default
    └── _markup
        └── render-link.html

Jika sudah isikan content html berikut ini

1
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "https" }} target="_blank"{{ end }}>{{ .Text }}</a>

Kalian juga bisa menambahkan rel="nofollow", rel="ugc" atau rel="nofollow noopener" jadinya seperti ini

1
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "https" }} target="_blank"{{ end }} rel="nofollow noopener">{{ .Text }}</a>

Setelah itu kalian save, dan kalian coba dengan membuat link di post kalian dengan format markdown

1
[Contoh Link](https://rmdhnreza.my.id)

Contoh Link

Bantu bagikan halaman ini ke:
Built with Hugo
Theme Stack designed by Jimmy