Open links in new tab?

[vincerubinetti]

From this comment:

Is there a way to get these links to open in a new window/tab, e.g. by setting target="_blank" on the links?

UPDATE: I looked into it a bit and it's possible to change Jekyll's renderer from GitHub-flavored markdown to a different style, "Kramdown", that allows you to add arbitrary attributes to tags, but supposedly it can change the site's rendering in subtle ways. Maybe it's best to just leave the links as-is to avoid changing the renderer, but I figured I'd leave a record of it all the same. (reference, https://stackoverflow.com/a/71373125/346905)

It will not be good/possible to do this for all links, but for components (gallery, member portrait, button, etc), we control the html and can put in target blank.

However I don't really like doing this, especially for apps where the user isn't entering in any data and thus has no risk of losing things when navigating away. I prefer to be able to open a link in the current tab (regular left click) if I want, and not be forced to open a new tab (like a middle click).

If we did want to do this... it'd probably make sense to open in a new tab if the url was an external one. Since Jekyll doesn't have built in "functions" per se, in every component where there's a link, I'd have to do a few checks (starts with http, https, mailto, etc), which would get repetitive. Instead, I might actually want to just do that in a small javascript plugin.

[vincerubinetti]

I'm going to close this as wont-fix, because I personally don't like this behavior. I like having the choice. Sometimes I do actually want to open things in the same tab, especially when I already have too much tab clutter open, and when I want to see the page immediately without switching.

If you disagree, please voice your opinion. If enough people want't like this, I'll implement it.

[sbbe2024]

Hello @vincerubinetti,

Since you opened this for voting, I also think that having the option of making the links open on another page would be a good idea. Please consider the example below:

https://sbbe2024.github.io/members/Fernanda-Caron.html

There are many links there and it would be great if the viewer could open more than one at once while not having to leave our page.

Kind regards, George.

[vincerubinetti]

You can do this with your browser though by middle clicking links or right clicking and selecting "open in new tab". I think the default behavior should still stand, to give viewers the choice.

However, if you want, you can simply add target="_blank" to anywhere in the code that there is a <a> element. In the example you gave, those are button components in _includes/button.html, so you could just make the change there.

Or you could do this automatically to all links using Jekyll Spaceship (already comes with the template): https://github.com/jeffreytse/jekyll-spaceship?tab=readme-ov-file#example-1

Or if for some reason you can't use Jekyll Spaceship, you could drop this simple (untested) script into _scripts/ext-links.js:

/*
  make all external links open in a new tab
*/

{
  const onLoad = () => {
    // for each link
    const links = document.querySelectorAll("a");
    for (const link of links)
      try {
        // if link absolute and different domain
        if (new URL(link.href).hostname !== new URL(window.location).hostname)
          // make link open in new tab
          link.setAttribute("target", "_blank");
      } catch (error) {}
  };

  // after page loads
  window.addEventListener("load", onLoad);
}

[sbbe2024]

Hello. Thanks a lot!

Unfortunately, I could not make the ext-links.js script work. I also did not try the Jekyll Spaceship as it looked too advanced considering my level. But I did get the result I wanted by adding target="_blank" :)

Kind regards, George.

[vincerubinetti]

I tested the above script and noticed an error. link.src should've been link.href. That should make it work.

Also regarding Jekyll Spaceship, all you have to do is copy that code (configuration code for the plugin) into your _config.yaml at the end.

[sbbe2024]

Hello.

Sorry for the delay but I confirm the ext-links.js scrip does work after the alteration :)

Thanks a lot, George.