In v0.62.0, Hugo has switched to the new Goldmark Markdown Renderer by default, instead of the Blackfriday renderer used previously. Goldmark also introduces a new way to add Markdown Render Hooks to control custom behaviour, e.g. image processing or opening links in new tabs by adding target="_bla…

Thanks, it was helpful. However, using it in my blog, I have found out it could be improved even more: <a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeUrl }}</a> {{ .Text | safeUrl…

I found this really helpful @szpak . Just to not that your line has a small type-o in it where your second fuction call uses safeUrl not the correct capitalisation (safeURL). Making the corrected line: <a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.Has…

Thanks @briggySmalls . In fact there is a difference even in comparison to my linked PR :). However, as it is a text context and can contain different elements it would be even better to use safeHTML instead of safeURL. Unfortunately, I’m no longer able to edit that post. Therefore, the updated line…

And, for security /performance reasons , add rel="noreferrer noopener": <a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noreferrer noopener"{{ end }}>{{ .Text | safeHTML }}</a>

@h-enk Sounds reasonable. You might consider propose that change to the Hugo documentation .

This seems not to work for plain URL links? I tried the method, but no target="_blank" is added at any href …

Just what I was looking for. Thanks. I tried a few things but could not figure out how to also make this work with mailto links. I duplicated the line and changed http to mailto and that made duplicate links. I tried a new render-mailto.html file which did nothing. I guess some type of if state…

you have to use render-link! Here my implementation: {{ if strings.HasPrefix .Destination "mailto" -}}Send mail to {{end}} <a href={{ .Destination | safeURL }} {{ if strings.HasPrefix .Destination "http" -}} target=_blank rel="noopener noreferrer" {{- end }} >{{ .PlainText | htmlEscape }}</a>

this worked for me. it opens either mailto or http or https links from markdown files in a new tab. Thanks for your help <a href={{ .Destination | safeURL }} {{ if strings.HasPrefix .Destination "mailto" -}} target=_blank {{end}} {{ if strings.HasPrefix .Destination "http" -}} target=_bla…

How to Open Link in New Tab with Hugo's new Goldmark Markdown Renderer in v0.62.0

tips & tricks

h-enk May 10, 2020, 6:21pm 7

Hey @szpak, good point. I just did that.

Where did this doc on "noopener" go?

Topic		Replies	Views
How to open link in new tab? support	5	2568	November 12, 2021
How to open plain URL links in a new tab? support	5	11419	May 15, 2020
Simple way to open in a new tab support	14	8999	November 15, 2024
How to "open Link in a new tab" with hugo book support	3	783	July 18, 2021
Open external links in new tab/window support	23	2413	May 25, 2022

How to Open Link in New Tab with Hugo's new Goldmark Markdown Renderer in v0.62.0

Related topics