Open external links in a new window - Ghost

I've come to love Ghost even with its minor limitations. However, the platform is growing fast and can only get better, so if you're looking to set up a blog, you couldn't go wrong with Ghost. Going back to the limitations I mentioned earlier, one of the problems I've come across recently is opening links on a new page. By default, any hyperlink you define in markdown will open within the same browser tab and there is no way to override this in the editor. Although this is not a bug, it takes your users away from your content. But we don't want this, do we? So how do we fix it?

Fix it with MarkDown

The first solution is simple. Instead of creating links like this:

[My Github](https://github.com/cmatskas)

You create them like this:

[My Github](https://github.com/cmatskas" target="_blank)

This is a very simple, yet effective solution. The only problem with this option is that you have to remember to type this every time! If you tend to forget (like me) and you're looking for some kind of automation, then you're in luck.

Fix it with JavaScript

You can inject a bit of JavaScript in your pages to append a target="_blank to all your post content. The code that performs all the "magic" is attached below. Rest assured that there are more flavors of the same script, some in pure JavaScript and some requiring jQuery to be present. I chose this because I like the exclusion list.

There are 2 ways to inject this code to your site: The first involves you editing the actual theme pages. The best place to place this code is in the post.hbs page. Go to content\themes\"your current theme"\post.hbs and open the file in the editor of your choice. Add the code supplied above at the bottom of the page, just before the closing {{/post}} tag. Save the file, deploy your changes, restart the site and test that it works. In the example below, I edited the default Casper theme page:

The alternative way is to use the admin settings section to inject the code in the footer. Go to Settings -> Code Injection and in the Blog Footer text box, add the code from above. Make sure you click on the "Save" button before you exit. I've included a snapshot below:

That's all you need for now. I'm sure there will soon be a fix for this either in a form of a plugin or an extension within the Markdown editor to support opening links to a new tab/page.

Let me know if you found a better solution to this problem or if you have any questions regarding my suggestions.


  • Share this post on
comments powered by Disqus