Link with _target="blank" in Markdown - Tipp

tips & tricks
1

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à.

6 Likes
2

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>

3 Likes
3

So true. Thank you!

4

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?

5

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

6

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:

7

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
8

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

1 Like
9

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.

10

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.

11

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.