Intro

Many a times we need to open some External Link in New Tab for the convenience of the Visitor . In Hugo there is no default method for this. All we have in Hugo is relref for Internal sites. :/

Implementaion

Hugo offers a way to render using a predefined template to Markdown(.md) with the help of Shortcodes. We can create such a shortcode for *Creating an Exeternal link with with target='_blank'.

  1. Create a folder in /layouts named shortcodes/

  2. Create a file named newtabref.html which will act as a templete for our shortcode :=

layouts/
├── _default/
├── partials/
└── shortcodes/
    └── newtabref.html <- new file created
  1. In newtabref.html put the following code:
<a href="{{ .Get "href" }}" rel="noopener" target="_blank">{{ .Get "title" }}</a>
  1. Now you can simply use
{{< newtabref  href="<YOUR EXTERNAL LINk>" title="<TITLE FOR LINK>" >}}

Thus we have created an External Link With target='_blank' In Hugo Markdown !!! :D


Refrerences: