hugo-coder icon indicating copy to clipboard operation
hugo-coder copied to clipboard

External links in new tab/window

Open rshorser opened this issue 4 years ago • 9 comments

Is there an existing way to configure external links to open in a new tab/window?

From some quick googling, looks like one would have to add a hook to enable this.

Happy to open a PR if no existing solution exists yet

rshorser avatar Jan 05 '21 16:01 rshorser

that should always be a user decision from my point of view. I don’t like sites who spawn off in different tabs or windows.

a1x42 avatar Jan 05 '21 17:01 a1x42

I came up with the same solution when I was searching for a way to put an external link to a main.menu item on my web site config.toml. All the links are now opens in a new tab but still could not find a solution for this one. External link in the main menu used to work in the previous version of Coder or Hugo. I recently upgraded to the latest version of Coder and using hugo version 0.80.0 and this set up sends me to this link: https://www.naimcinar.com/https:/naimcinar.myportfolio.com/ instead.

[[languages.en.menu.main]] name = "Photography" weight = 3 url = "https://naimcinar.myportfolio.com/" target ="_blank

nakiamo avatar Feb 28 '21 19:02 nakiamo

I totally agree with @a1x42.

But, it seems Hugo is not recognizing your URL as an absolute one. Let me check if we are doing something wrong in this theme template or if this is really a Hugo bug,

luizdepra avatar Mar 04 '21 14:03 luizdepra

Absolute URLs are working perfectly. The problem should be in your custom layouts/_default/_markup/render-link.html.

luizdepra avatar Mar 04 '21 23:03 luizdepra

I have been just down this rabbit hole trying to find a solution, while I agree with @a1x42 conceptually there are times where websites may have a need to send you to a different website in the menu and maintain the existing window. And shockingly not all end users actually know how to accomplish this.

Is it not possible to have this as an option on the config.toml for specific menu items. It seems some other themes support this.

I am super new to Hugo in general so be kind if I'm saying something stupid.

dpcleitao avatar Mar 14 '21 21:03 dpcleitao

It is possible, and it is straightforward to add a target config into menu items. Well, there is a bunch of things to do first in the roadmap. So, if anyone wants to help this is a good first issue.

luizdepra avatar Mar 25 '21 17:03 luizdepra

Absolute URLs are working perfectly. The problem should be in your custom layouts/_default/_markup/render-link.html.

I followed this guide and still url not opening in new tab.

solomonrajan avatar Mar 28 '21 10:03 solomonrajan

Absolute URLs are working perfectly. The problem should be in your custom layouts/_default/_markup/render-link.html.

I also followed the guide that @solomonrajan used. No luck for me; it is still opening my URL in the current window. @rshorser have you had any luck with your attempted fix?

adindrabkin avatar Jun 23 '21 01:06 adindrabkin

Here is a workaround to open links with a different base URL in a new tab:

        {{ with .Site.Menus.main}}
        {{ range sort . }}
        {{ $url := urls.Parse .URL }}
        {{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
          <li class="navigation-item">
            <a class="navigation-link" href="{{ .URL | relLangURL}}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ .Name }}</a>
          </li>
        {{ end }}
      {{ end }}

I created a modified header.html and played it under layouts/partials/header.html

adindrabkin avatar Jun 28 '21 18:06 adindrabkin