blog: Hugo Open External Link in New Tab and Add Rel Attribute

content/blog/hugo-link-render-hook/index.md

@@ -0,0 +1,81 @@
+---
+title: "Hugo Open External Link in New Tab and Add Rel Attribute"
+description: "How to add a render hook for link in Hugo"
+summary: "How to add a render hook for link in Hugo"
+date: 2023-09-10T19:38:50+07:00
+draft: false
+author: "Hiiruki" # ["Me", "You"] # multiple authors
+tags: ["hugo", "render-hook", "goldmark"]
+canonicalURL: ""
+showToc: true
+TocOpen: false
+TocSide: 'right'  # or 'left'
+# weight: 1
+# aliases: ["/first"]
+hidemeta: false
+comments: false
+disableHLJS: true # to disable highlightjs
+disableShare: true
+hideSummary: false
+searchHidden: false
+ShowReadingTime: true
+ShowBreadCrumbs: true
+ShowPostNavLinks: true
+ShowWordCount: true
+ShowRssButtonInSectionTermList: true
+UseHugoToc: false
+cover:
+    image: "<image path/url>" # image path/url
+    alt: "<alt text>" # alt text
+    caption: "<text>" # display caption under cover
+    relative: false # when using page bundles set this to true
+    hidden: true # only hide on current single page
+# editPost:
+#     URL: "https://github.com/hiiruki/hiiruki.dev/tree/main/content/blog"
+#     Text: "Suggest Changes" # edit text
+#     appendFilePath: true # to append file path to Edit link
+---
+
+Hugo is using [goldmark](https://github.com/yuin/goldmark/) as its markdown renderer and has a [render hook](https://gohugo.io/templates/render-hooks/) feature.
+
+Previously, Hugo uses [Blackfriday](https://github.com/russross/blackfriday) as its markdown renderer in version below `v0.60.0`. Check the [changelog](https://github.com/gohugoio/hugo/releases/tag/v0.60.0) for more information.
+
+### Method 1 (No JavaScript)
+
+Make a file `layouts/_default/_markup/render-link.html` and add the following code:
+
+```html
+<a href="{{ .Destination | safeURL }}"
+{{ with .Title}} title="{{ . }}"{{ end }}
+{{ if strings.HasPrefix .Destination "http" }}
+    target="_blank" rel="external nofollow noopener noreferrer"
+{{ end }}>
+    {{ .Text | safeHTML }}
+</a>
+```
+
+### Method 2 (JavaScript)
+
+Make a file `layouts/partials/extend_head.html` and add the following code:
+
+```html
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        var links = document.getElementsByTagName("a");
+        var i;
+        for (i = 0; i < links.length; i++) {
+            if (location.hostname !== links[i].hostname) {
+                links[i].rel = "external nofollow noopener noreferrer";
+                links[i].target = "_blank";
+            }
+        }
+    });
+</script>
+```
+
+## References
+
+- https://gohugo.io/templates/render-hooks/
+- https://discourse.gohugo.io/t/open-external-links-in-new-tab-window/34000?page=2
+- https://agrimprasad.com/post/hugo-goldmark-markdown/
+- https://www.petanikode.com/hugo-render-hooks/