Link with _target="blank" in Markdown - Tipp


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


#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

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.


#8

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


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