How to target="_blank" in .md?

Here’s my a_blank.html shortcode, for anyone just looking for something to copy-paste:

<!-- {{/*
Usage: {{% a_blank "TITLE" "URL" %}}
*/}}-->
<a target="_blank" href="{{ .Get 1 }}">{{ .Get 0 | markdownify }}</a> <i class="fa fa-external-link"></i>

The <i>tag is for an external link icon, if you don’t use it / don’t want it just remove the <i> tag.

3 Likes

On Hugo 0.15 with the hrefTargetBlank BlackFriday option enabled, relative links made with the Hugo relref are also opened in the another tab. For example:

- [Colours sorted by hue]({{< relref "#colours-sorted-by-hue" >}})

Generates the following HTML code:

<ul>
<li><a href="#colours-sorted-by-hue" target="_blank">Colours sorted by hue</a></li>
</ul>

Is this expected behaviour? It seems to me that relative links should not have the target="_blank" section added to it.

No…

It might be because of relref, because this:

- [Colours sorted by hue](#colours-sorted-by-hue)

Generates:

<ul>
<li><a href="#colours-sorted-by-hue">Colours sorted by hue</a></li>
</ul>

So it doesn’t seem to be because of the # sign.


It might be separate from BlackFriday’s hrefTargetBlank option because ref and relref also work differently than documented. The docs say the difference between them is a relative vs. absolute link, but that’s not what I see on Hugo 0.15.

This:

- [Colours sorted by hue]({{< relref "#colours-sorted-by-hue" >}})
- [Colours stored alphabetically]({{< ref "#colours-sorted-by-hue" >}})

Generates:

<ul>
<li><a href="#colours-sorted-by-hue" target="_blank">Colours sorted by hue</a></li>
<li><a href="#colours-sorted-by-hue" target="_blank">Colours stored alphabetically</a></li>
</ul>

I have my base url formatted with the --baseUrl flag.

Hope this helps. :slight_smile:

https://github.com/rdwatters/hugo-starter/blob/master/assets/js/modules/target-blank-external-links.js

@Jura This is part of a Hugo Starter I’m trying to put together (mostly to teach myself), but maybe (strong maybe) this might help you so that you don’t need to fiddle with the simple content of the MD file?

Thank you, quite helpful.

@Jura I just barely noticed that I’m having the same behavior with {{relref}}. Have you reported a bug via GH?

No I haven’t. I perhaps should, but didn’t want to open an issue too soon without the ‘green light’ from a Hugo contributor or confirmation from another person. But if you experience the same behaviour it’s probably a bug. :slightly_smiling:

Hi everybody,

I’m Anna and I’m quite new in hugo and I’ve found this topic 'cause I was looking for a solution for target="_blank" in .md for my blog.
I’ve found that @dimo414 solution was perfect (thanks!) for me.

But I’ve tried to use this shortcode for an internal link and this can’t work: my blog is not currently online so I’ve not a “real” link. At the moment I’m using [post](/blog/aaaa/mm/dd/post) for internal link…

Should I use html metod and forgive about this shortcode? Or… Can I edit it?
Thank you very much! :slight_smile:

I got it!

I’ve edit the code below and I’ve add " | absLangURL " after .Get1 and now it works! :tada:

<!-- {{/*
Usage: {{% url "TITLE" "URL" %}}
URL example: "blog/aaaa/mm/dd/post"
*/}}-->
<a target="_blank" href={{ .Get 1 | absLangURL }}>{{ .Get 0 | markdownify }}</a>

That’s it. I’m sorry to have reupped an 11 months old topic.

In case someone is interested to add target='_blank' to external links only.

You can enable blackfriday.hrefTargetBlank=true.

[blackfriday]
  plainIDAnchors = true
  hrefTargetBlank = true

Sadly, shortcode ref/relref link can no longer be used as the link will be generated with target='_blank' as well.

You can use markdown reference link.

[External link with _target blank](http://www.google.com)
[Internal Page](/posts/my-page/)
[Internal Page using reference][my-page]

[my-page]: /posts/my-page/
2 Likes

For future searchers:

https://agrimprasad.com/post/hugo-goldmark-markdown/