HUGO

Link with _target="blank" in Markdown - Tipp

I just wanted to share with you:

I wrote a Link page in Markdown and wanted the links to open in a new browser window. So I needed to implement _target="blank" in any way. Shortcodes to the rescue:

The shortcode is named {{< target-blank >}} and the content is

<a href="{{ .Get 1 }}" target="_blank">{{ .Get 0 }}</a>

Now you can implement it anywhere in Markdown with {{< target-blank "Title" "https://link-to/" >}} and voilà.

4 Likes

Don’t forget the attribut title :stuck_out_tongue:
https://www.w3.org/TR/WCAG-TECHS/G201.html

<a href="{{ .Get 1 }}" target="_blank" title="opens in a new window, {{.Get 0}}" >{{ .Get 0 }}</a>

2 Likes

So true. Thank you!

Hmm, I am not sure if that is how the title in an anchor element ought to be used. Maybe something like:

<a href="{{ .Get 1 }}" target="_blank">{{ .Get 0 }} (opens in new window)</a>

You could do a title, but it should describe what the link is about, and would be an extra parameter for the shortcode.

Does that make sense?

Sure this is the best solutions because attribut title don’t appear on keyboard focus.

That is true, but my point was including “open in new window” as the title attribute isn’t what it is made for; the title should provide more context about the contents of the link, rather than the operation being used. :slight_smile:

There is a Blackfriday extension for this and I am posting it here in case someone else reads this thread.

Just add the following in your config.toml

[blackfriday]
  hrefTargetBlank = true

And that’s it. Any link with the markdown syntax will be outputted with _target="blank". No need for a shortcode.

4 Likes

but that’s every link? is there a way to say which does and doesn’t apply the _target=“blank”?

That’s for every link in content files. Not navigation links.

For me at least whenever I include a link in a post it’s usually external and this simple setting works out of the box.

A shortcode like this would also be necessary for rel="nofollow", rel="noreferrer" and rel="noopener" links until Blackfriday v2 is built into Hugo, but even then the syntax only allows for a global option.

I was looking to do this for my sources/footnotes, and I found this post via searching.

The behavior seems to be this:

Content articles:
External links get target _blank.
Internal links do not.

Which is perfect for my needs.