Open external links in new tab/window

support
1

Hi,

I would like to open links in a new tab or window where we the links created via
[link](http://www.example.com) and starting with http/https… But also avoid this behavior for the links that we created via {{< ref >}} flags.

How can I achive this?

2

You can do this in a render hook, see https://github.com/bep/hugo-mod-misc/tree/main/render-hookshttps://github.com/bep/hugo-mod-misc/tree/main/render-hooks for an example.

3

Hi @bep ,

I cant access the link or its broken :confused:

4

https://github.com/bep/hugo-mod-misc/tree/main/render-hooks

5

hi @jmooring,

I am a bit confuse how should i implement this to my existing project.Could you please help what should be the steps ?

6

You could add the above as a Hugo Module (read the docs), but the fastest way to explain the concept is:

Copy https://github.com/bep/hugo-mod-misc/blob/main/render-hooks/layouts/_default/_markup/render-link.html to layouts/_default/_markup/render-link.html in your Hugo site.

2 Likes
7

@bep,

Do ı have to create a folder name _markup ? Cause at the present i do not have

image

8

Yes, you do.

9

Can we exclude this behavior for {{< ref >}} flags where they should be open in same page.

10

Please test what bep advised you to do, then post here again if it doesn’t do what you want.

Or look at the code.

11

@jmooring,

it worked like i want…thanks a lot!

But i could not find a way to exclude this or avoid this for {{< ref >}} links

12

1. What is the value of baseURL in your site configuration?

2. Please provide an example of the markdown.

13
  1. I’ve multiple config files cause subpath changes. but you can consider https://example.com/config e.g
  2. For instance below ref also opening in new tab however i want to be open this in existing tab.

Please also check the link [information]( {{< ref "information-security" >}} ) prior to usage of API.

14

Something doesn’t make sense. The link render hook is not called when doing this:

[foo]({{< ref "foo" >}})

You would have to do this:

[foo]({{% ref "foo" %}})

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

15

@jmooring ,

I tried but still opening in a new tab

16

We are not communicating well. Please share your repository.

17

Its a private repository :confused:

18

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

19

@jmooring

Below links opening in new tab where it should be open in existing tab instead of new tab. Somehow i could not able to do this for ref flag.

[internal page]( {{< ref "information-security" >}} )

[foo]({{% ref "foo" %}})

Below link opening in existing tab but we would like to use ref for internal links

[internal page](/config/docs/faq/information-security/)

Below links are opening in new tab as expected.

[github](https://github.com)
[github](http://github.com)
20

I have already asked you to share a repository that demonstrates the problem.

Since you are either unable or unwilling to do that, here is a repository with a working example.

git clone --single-branch -b hugo-forum-topic-34000 https://github.com/jmooring/hugo-testing hugo-forum-topic-34000
cd hugo-forum-topic-34000
hugo server

Then visit http://localhost:1313/post/test/

Without looking at your code I have no way of knowing what you are doing wrong. But you are doing something wrong.

2 Likes