HUGO

How to target="_blank" in .md?

See

This would be a global or per page setting, but better than nothing.

Pull requests welcome. Should be pretty straight forward, just look at the previous similar additions. Just ask.

The above issue is added to the latest source.

1 Like

mmm, and of course, we need a non-global way to do this :confused: - using the source level linking - oh joys - which is only triggered for markdown style links.

only way to do it one off is inline HTML or a Shortcode. That is the defined way to do it in Markdown.

1 Like

I’m going to port the GitHub linking PR to use mmark (as well as blackfriday) - as https://github.com/fletcher/MultiMarkdown/wiki/MultiMarkdown-Syntax-Guide#anchor-and-image-attributes gives me hope.

A slightly non-global way to do it is to set this Blackfriday option on a per-page basis … But I suspect this isn’t non-global enough.

@bep and @SvenDowideit, am I missing something? I’ve set the following in my config.toml and it works like a charm:

[blackfriday]
   plainIDAnchors = true
   hrefTargetBlank = true

I have some handy javascript to that controls for things like mailto and also works for href’s ending in .pdf, excel, etc. Let me know if I can help. Cheers.

Oh yeah, and some JS for extra formatting flexibility with blockquotes. I hate using inline HTML in markdown if I can help it, since I think of markdown as an abstraction of all markup languages and not just HTML.

1 Like

He wants to set it on a per-link basis. Currently you can set the target=_blank on site or per page.

1 Like

Ah, terribly sorry. Figured I was missing something. I’m curious about this use case @SvenDowideit. Why would you need such granular control on a per-anchor basis? My assumption would just be for anchors to external sites and non-HTML documents (eg, .docx, .pdf, etc).

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/
1 Like