Open menu in new tab

[naveen-vijay]

Expected Behavior

Blogs, portfolio require the ability to link other project or hosted live demo items to be opened in new tab

Current Behavior

Possible Solution

Under config.toml file there are configuration options like name, url, identifier, weight. If there is a option target = _blank HTML like configuration that would be handy or new-tab = true

Steps to Reproduce or Template with Error (for bugs)

Not Applicable.

Context

Blogs, portfolio require the ability to link other project or hosted live demo items to be opened in new tab

Your Environment

Hugo Version: v0.32.2

Browser: Chrome, Safari

Desktop or Mobile: Both

[dudil]

Hi -

This is already covered by the Hugo platform.
Just add the following to your config.toml

[blackfriday]
  hrefTargetBlank = true

[naveen-vijay]

Am i missing something ? This is what i am trying in config.toml but doesn't seem to work.

[[menu.main]]
  name = "www.example.com"
  url = "www.example.com"
  identifier = "fa fa-example-external-site"
  hrefTargetBlank = true
  weight = 3

[dudil]

Yes - it has to be under the [blackfriday] section and not under any other section.
It is a directive to the Hugo markdown compiler and as such needs to be set on the higher level

[naveen-vijay]

That would mean - the the behavior would be applied for all the menu items, but we need only specific menus to be target = _blank enabled. If I am wrong, could you please give a bigger example with multiple examples ?

[dudil]

I got your point.

Let me better explain:
There are several potential places for external links:

1. Through the content itself (*.md files)
   For links you are having at the content, Hugo will compile them into tags.
   If you wish these specific (in content from markdown) links to open in new window you should use the directive

[blackfriday]
 hrefTargetBlank = true

• please note! you must include the blackfriday section, this is the Hugo formate for markdown files.
  More about it you can read in the following:
  https://gohugo.io/readfiles/bfconfig/

2. Through links you put on menu items.
   (like what you stated on the above examples)
   Here indeed a change can be done to include such option - if this is what you are looking for let me know, and I'll post a PR for the team.
   I will be happy to assist you with that :)

[acidsploit]

Through links you put on menu items.
(like what you stated on the above examples)

I am also interested in that!

It would be very handy to be able to do something like @naveen-vijay detailed, be able to specify how links in the menu should behave:

[[menu.main]]
  name = "www.example.com"
  url = "www.example.com"
  identifier = "fa fa-example-external-site"
  hrefTargetBlank = true
  weight = 3

[dudil]

I got you @acidsploit
Unfortunately it won't work like that due to Hugo limitation, there is an open issue 3600 about it - not sure where it stands.

I can implement but it will be kind go workaround.

1. Have a global parameter stating that if the URL base is different than baseURL - set target to blank.
2. Hack one of the available parameter not used by this skin (e.g title) as parameter. to set target as blank to specific menu item.

CC: @pacollins @jpescador

Guys, what do you think?

[pacollins]

@dudil Thanks for addressing this question. I think that it would be best to avoid hack-y solutions and wait for there to be a real method presented from Hugo. The easy solution is edit the navbar partial directly and just make that a direct link for your particular version.

That being said, I do understand what you guys are wanting to do and how it would make sense, but I'd rather not do a hack-y solution.

[dudil]

Hi @pacollins - sure, thats make sense and why I asked you to look at it.

@naveen-vijay @acidsploit, just to be still able to help out - I made this gist with some instruction on how to set it up to your own site.

https://gist.github.com/dudil/edf2b1838c7cc5f1131a3777dbc662a9.html

I've tested it local and it is working fine - just make sure to set your baseurl parameter at the config.toml correctly (which in any case is important...)

[acidsploit]

Awesome! Thanks for taking the time to write that up.

[dudil]

My Pleasure :)

[LukeTOBrien]

I have just been Googling this as I to want to open some menu links in a new tab.
Basically my site is a portfolio site and I want my full page demos is a new tab.

In my workings with Markdown I have used Markdown-it so I use the attrs plugin to do target="_blank", can BlackFriday have plugins or is there anyway to add a similar thing?