Greg Morris

Follow @gr36 on Micro.blog.

How To Open External Links In A New Tab By Default In Ghost

Updated: Added in non-jQuery code snippet

This problem is a reasonably simple one if you know what you are doing with writing Javascript. Unfortunately, I am not, and this feels like an issue that shouldn’t need some script, but here we are.

After loads of Googling, looking at Github Gist, and trial and error, I finally found a solution to opening new links in a new tab thanks to InsidersByte.

As they point out you can do this with markdown or adding in target=_blank to the end of each Url, but who has time for that? So add this into the footer of your site.

With jQuery

<script>
var links = document.links;

for (var i = 0, linksLength = links.length; i < linksLength; i++) {
  if (links[i].hostname != window.location.hostname) {
    links[i].target = '_blank';
  }
}
</script>

non-jQuery

<script type="text/javascript">
    var links = document.querySelectorAll('a');
    links.forEach((link) => {
        var a = new RegExp('/' + window.location.host + '/');
        if(!a.test(link.href)) {
            link.addEventListener('click', (event) => {
                event.preventDefault();
                event.stopPropagation();
                window.open(link.href, '_blank');
            });
        }
    });
</script>

You could do this in your theme template if you like, but the easiest way is to head to your dashboard, and then Settings > Code Injection. Copy and paste in the code and remember to save!

Reload your site, and you should be sorted.