luizdepra / hugo-coder

A minimalist blog theme for hugo.
MIT License
2.71k stars 1.06k forks source link

External links in new tab/window #505

Open rshorser opened 3 years ago

rshorser commented 3 years ago

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

a1x42 commented 3 years ago

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.

nakiamo commented 3 years ago

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

luizdepra commented 3 years ago

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 commented 3 years ago

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

dpcleitao commented 3 years ago

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.

luizdepra commented 3 years ago

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.

solomonrajan commented 3 years ago

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.

adindrabkin commented 3 years ago

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 commented 3 years ago

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