Lerm-IT

Blog traitant de technologies informatiques. Logiciel libre, AdminSys, DevOps et GNU/Linux !

14 Apr 2020

[Hugo] Ouvrir les liens externes dans un nouvel onglet

Il est possible de configurer Hugo pour qu’il ouvre automatiquement les liens externe à votre site web dans un nouvel onglet. Pour cela nous allons devoir nous pencher sur le moteur de rendu d’Hugo.

Le module BlackFriday vs Goldmark

Le moteur de rendu pour Markdown d’Hugo porte le nom de Goldmark depuis la version 0.60. Avant cette fonction était assuré par Blackfriday . Celui-ci est doté de nombreuses options permettant de changer son comportement mais contrairement à son prédécesseur il n’offre pas une option pour configurer les liens externe avec l’option target=_blank.

Nous allons présenter ici comment faire.

Avec le module blackfriday. Version < 0.60

Avec le module blackfriday il suffisait de réaliser la configuration suivante dans le fichier config.toml pour activer les liens enternes avec l’option target=_blank.

[markup]
  [markup.blackFriday]
    hrefTargetBlank = true

Avec le module goldmark. Version ≥ 0.60

Nous devons utiliser un hook de rendu pour ajouter l’option target=_blank à nos liens. Ceci se réalise en ajoutant un fichier render-link.html dans le dossier layouts/_default/_markup de notre thème. Ici le thème se nomme blog.

$ mkdir -p themes/blog/layouts/_default/_markup
$ vim mkdir -p themes/blog/layouts/_default/_markup/render-link.html

Le contenu de ce fichier sera utilisé pour rendre la partie HTML de tous nos liens. Voici le contenu que nous avons à enregistrer.

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{end }}>{{ .Text | safeHTML }}</a>

Ce template va vérifier si l’URL commence par http (donc https:// ou http://) et le cas échéant ajoutera l’option target=_blank.

Vous pouvez bien évidement modifier ce template suivant vos besoins.

Conclusion

Même si la mise en place des liens externe dans Hugo est plus complexe avec le moteur de rendu Goldmark qu’avec Blackfriday la configuration est tous de même assez rapide, et n’est, au final, à réaliser qu’une seule fois.

Nous pouvons tous de meme constater que cette méthode nous donne une plus grande latitude de cunstomisation de notre site.