↓ Aller au contenu
My little space of internet
  1. Tech Corner/

Des liens externes bien identifiables via une icône SVG

·330 mots·2 mins Brouillon
JF Audenard
Auteur
JF Audenard
Un passionné de tech & de cyber

Comment faire pour les liens externes bien visibles avec une icone associée et faire que les liens s’ouvrent dans une nouvelle fenêtre ?

Pour faire cela, il faut modifier deux fichiers :

  • le code en charge du rendering des liens présentes pour ajouter une class CSS
  • Définir une feuille de style complémentaire (qui se chargera d’intégrer l’icone via du SVG)

Le rendering des liens URLs
#

Créer le fichier ./layout/_default/_markup/render-link.html

Y mettre le contenu suivant :

{{/* Ensure external links will open in new tabs and are marked as such with rel attributes */}}
<a href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="external noreferrer noopener"{{ end }}>{{ .Text | safeHTML }}</a>

Dans le fichier ./assets/css/custom.css

/* Add an 'external' icon after <a> elements with rel attribute containing the 'external' value */
a[rel*='external']::after {
    content: "";
    width: 13px;
    height: 13px;
    margin-left: 6px;
    margin-bottom: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='grey' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

Ressources
#

Articles connexes