Hugo: ouvrir les liens dans un nouvel onglet

Comment ouvrir un lien dans un nouvel onglet dans une page générée par Hugo?

Introduction

Par défaut, les liens insérés dans les pages d’un site Hugo s’ouvrent dans l’onglet courant. Ce fonctionnement peut vite devenir gênant pour le lecteur.

Mise en place

On va utiliser un hook standard Hugo en créant un autre modèle pour la génération des liens. Pour cela, on ajoute le fichier render-link.html dans le dossier layouts/_default/_markup. Attention, le nom et le dossier sont fixés par le hook donc impossible de changer!

Le code contenu dans le fichier est le suivant:

    
 1{{ $link := .Destination | safeURL }}
 2{{ $hastg := (strings.HasPrefix $link "target=") }}
 3{{ $tg := "" }}
 4{{ if ($hastg) }}
 5    {{ $tablink := strings.Split $link ";" }}
 6    {{ $link := strings.Replace $link (index $tablink 0) "" }}
 7    {{ $link := strings.Replace $link ";" "" }}
 8    {{ $tabtg := strings.Split (index $tablink 0) "=" }}
 9    {{ $tg := index $tabtg 1 }}
10    <a href="{{ $link }}" {{- with .Title }} title="{{ . }}"{{ end -}} target="{{ $tg }}">{{- with .Text }}{{ . }}{{ end -}}</a>
11{{ else }}
12    <a href="{{ $link }}" {{- with .Title }} title="{{ . }}"{{ end -}}>{{- with .Text }}{{ . }}{{ end -}}</a>
13{{ end }}

Utilisation dans une page

Par défaut, les liens sont de la forme [Texte](https://www.rien.null). Le hook mis en place respecte bien entendu cette syntaxe de base. Par contre, si on ajoute le mot-clé “target”, le comportement change et le lien s’ouvre dans l’onglet nommé par “target”. Exemple: pour ouvrir le Quad9 dans l’onglet nommé “q9”, on saisit le lien [Quad9](target=q9;https://www.quad9.net/). Lien de test vers Quad9 dans un autre onglet .