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

82 lines
2.6 KiB
Markdown
Raw Normal View History

---
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/