Extrenal Link Icon in Hugo Natively, Markdown Render Hooks

Introduction (TL;DR) 

Bumped into wikipedia references, and found an icon commonly used as an external link symbol at the end of the source Help:External link icons  ¹. And I wondered whether it got an unicode symbol for it, did some engine searching. Unfortunately, at the time of this writing there was no unicode symbol for this icon yet.

Goals

I looked for the most convenient way to implement this, this site is using Hugo  static site generator, then I looked further for their discussion forum until I did another engine searching using Brave Search  (engine search I mostly used nowadays), some good articles came up. But I found a pretty straightforward article with some details regarding this, written by Jessica Smith, Automatically Mark External Links in Hugo  ². It referred to Hugo doc for Markdown Render Hooks  ³ as well.

I was using shortcode to open link in another tab without external link icon at the end of it, it’s not convenient enough as I have to remember its file name. I forgot things quite easily. Secondly, I tried to avoid using shortcode as it’s not a best practice, example case when I accidentally deleted my shortcode file or migrated to another theme without my shortcode I use before. My goals:

• Put internal link in the same tab without external link icon
• Put external link in another tab with external link icon at the end of the text source

Prerequisite

I read further to setup my external link to become natively rendered to external link icon at the end of its title. Then I create folder called _markup under layout/_default/. And make a file called render-link.html. So my render-link.html directory would look like this:

1
2
3
4
5
6
7
8
9

layouts/
 +--_default/
     +--_markup/
         +-- render-link.html
         +-- render-codeblock.html
         +-- render-heading.html
         +-- render-image.html
         +-- render-image.rss.xml
         +-- render-codeblock-bash.html

I edited a bit the snippet by Jessica Smith, Automatically Mark External Links in Hugo , I changed the svg icon and put target="_blank" line to open the link in another tab, then put these lines into this render-link.html. My final snippet:

<a href="{{- .Destination | safeURL -}}"{{ with .Title}} title="{{- . -}}"{{ end }} target="_blank">{{- .Text | safeHTML -}}{{- if strings.HasPrefix .Destination "http" -}}<span style="white-space: nowrap;"><svg width=".7em" height=".7em" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><path d="m13 3l3.293 3.293l-7 7l1.414 1.414l7-7L21 11V3z" fill="currentColor"/><path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z" fill="currentColor"></svg></span>{{- end }}</a>

rel="noopener" is not necessarily to be added. Source: Link types: noopener .

For use case, you can conveniently put external link with an icon at the end of it on your markdown file with this:

[titleexample](https://example.com)

Caveat

This use case is only applied to markdown file any-post.md only under content/ folder. If you have external link on your footer or another place directs to your social media account and whatnot, add your external link icon accordingly on your html file under your layouts/.