Simple way to open in a new tab

support
1

Hi,

With this way of inserting a link to an URL :

[Dummy](https://www.dummy.com/ "Dummy")

Is there a simple way to make it open in a blank page or tab ?

Thanks for the help.

2

Hi there,

Have a look at render links: https://gohugo.io/getting-started/configuration-markup#link-with-title-markdown-example

3

Thanks,

I read that page (render links), but could you send me a markup file with a working example ?
Because I would need a working example to understand…

4

This is how I use it:

in my layouts/_default/_markup/render-link.html

<a

	{{ if or (strings.HasPrefix .Destination `http`) (strings.HasPrefix .Destination `#`) (strings.HasPrefix .Destination `/`) }}
	
		href = "{{ .Destination | safeURL }}"

		{{ else if strings.HasPrefix .Destination `mailto` }}

			href = "mailto:{{ .Text }}"

	{{ end }}

	{{ with .Title}}
		
		title = "{{ . }}"
	
	{{ end }}

	{{ if strings.HasPrefix .Destination "http" }}

		target = "_blank"
		rel = "nofollow noopener noreferrer"

		{{ else if strings.HasPrefix .Destination "mailto" }}

			onClick = "javascript:window.open('mailto:{{ .Text }}', 'mail'); event.preventDefault()"

	{{ end }}>
	
	<span>
		{{ .Text }}
	</span>

</a>

To break this down, you can use 4 types of links - External, Internal, mailto and #.

The first if condition parses the link and checks if the destination starts with http or / or #. If it starts with any of those, it’ll add that in the href. The mailto is slightly different. It directly uses the text.

The second if statement is the one that adds the target = "_blank if the link starts with http. For my personal satisfaction, I use JavaScript to force open mailto links in new tab.

Then, in markdown, I can use this like:

  1. External link: [text to link](https://www.foo.com/). Make sure to use http or https in the start as that’s how the detection of external link is working. This will open in new tab.

  2. Internal link: [text to link](/link-relative-to-domain). Make sure to use relative links or else, if you use absolute ones and end up prefixing them with http, they’ll open in new tab as well. This will open the link in same tab.

  3. Hash link: [text to link](#link). This will scroll the element with the id as link. The element should be present in the same page.

  4. mailto: [user@example.com](mailto). Just this much configuration is enough. Make sure to use just the word mailto and nothing else and the text to be linked should be an e-mail address.

2 Likes
5

Have you tried to follow the docs?

It includes an example of how you would use it in markdown:

[Text](https://www.gohugo.io "Title")

And the render-link code that you put into layouts/_default/_markup/render-link.html:

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
4 Likes
6

Hi Hrishikesh,
Thanks a lot for your example.
Are you sure the > after the {{ end }} is correct ?
What does it close ? Or what is it for ?

7

Hello pointyfar

Sorry, I didn’t fully get it that I needed to have a render-link file.

Now it’s in place and works great.

Big thank you for your help.

Andrew

8

It’s the closing bracket of the <a>. Basically, the code goes like this:

<a href = "link from condition" title = "title" target = "_blank".....>.

So, the > after the {{ end }} is responsible for the > in the above line.

9

But there is a problem…
Because here is the final source code of the webpage

Plugins pour 4D <a

	
	
		href = "https://www.e-node.net/"

		

	

	

		target = "_blank"
		rel = "nofollow noopener noreferrer"

		>
	
	<span>
		e-Node
	</span>

</a>

And there is a little “>” that is lost…

10

Yes this is what 'im using too, works great but…

I realize that it doesn’t work for links inside shortcodes. For example in a markdown table, if you put the markdown link it don’t respect the _blank… I don’t know what I’m missing but it’s really annoying !

Any suggestions ?

11

Hi @alnc, Please read Requesting Help and open a new topic with the details of your question.

12

I don’t see the problem here. Isn’t this correct? If you’d minimise this to one line, it’d look like:

Plugins pour 4D <a href = "https://www.e-node.net/" target = "_blank" rel = "nofollow noopener noreferrer"><span> e-Node</span></a>

13

My bad.

You are correct, there is no error !

Sorry.

Have a nice day and : Thank you for your help and time :sunny:

1 Like
14

A shortcode is different from markdown. Is it not working inside markdown or inside shortcode? But yeah, you should really open this up in a separate thread as this one seems solved now.

15

I modify the near the end of the code as follow

{{ .Text | safeHTML }}

so it can work with pairs of ` in the text without showing <code> .. </code>.