Lien#
Syntaxe classique#
Pour définir un lien, il faut respecter la syntaxe suivante:
- [Texte_du_lien](URL_du_lien)
Markdown | HTML | Rendu |
---|---|---|
| <a href="/markdown/image/">Je suis un lien relatif vers une autre page (du même répertoire) du site</a> | Je suis un lien relatif vers une autre page (du même répertoire) du site |
| <a href="/markdown/">Je suis un lien relatif vers une autre page (page parente) du site</a> | Je suis un lien relatif vers une autre page (page parente) du site |
| <a href="/markdown/image/">Je suis un lien absolu vers une autre page du site</a> | Je suis un lien absolu vers une autre page du site |
| <a href="/images/favicon.png">Je suis un lien absolu vers une ressource statique du site</a> | Je suis un lien absolu vers une ressource statique du site |
| <a href="#lien">Je suis un lien vers un ID de titre</a> | Je suis un lien vers un ID de titre |
| <a href="/">Je suis un lien vers la page d'accueil</a> | Je suis un lien vers la page d’accueil |
| <a href="/fr/">Je suis un lien vers la page d'accueil d'une autre langue</a> | Je suis un lien vers la page d’accueil d’une autre langue |
| <a href="https://www.google.com">Je suis un lien externe</a> | Je suis un lien externe |
Les liens ne contenant pas de schéma URL sont tous préfixé en fonction de la configuration baseURL
.
Par exemple:
baseURL | Markdown | Rendu |
---|---|---|
/ | [](/markdown/link/) | href="/markdown/link/" |
http://myWebsite.com/subpath/ | [](/markdown/link/) | href="/subpath/markdown/link/" |
/
sont relatif à la langue actuelle du site./<CHEMIN_DE_LA_RESOURCE>
ne sont pas relatif à la langue actuelle du site.Syntaxe classique avec titre#
Pour définir un lien avec un titre, il faut respecter la syntaxe suivante:
- [Texte_du_lien](URL_du_lien "Titre_du_lien")
Markdown | HTML | Rendu |
---|---|---|
| <a title="Et moi son titre" href="#syntaxe-classique-avec-titre">Je suis un lien</a> | Je suis un lien |
Syntaxe alternative#
Pour définir un lien externe il est possible d’utiliser des syntaxes alternatives:
- Ecrire l’URL du lien (le rendu sera automatiquement réalisé par le convertisseur markdown).
- Entourer l’URL du lien entre les caractères inférieur (<) et supérieur (>).
Markdown | HTML | Rendu |
---|---|---|
| <a href="https://www.google.com">https://www.google.com</a> | https://www.google.com |
| <a href="https://www.google.com">https://www.google.com</a> | https://www.google.com |
| <a href="mailto:foo@bar.com">foo@bar.com</a> | foo@bar.com |
Echapper un lien#
Pour échapper un lien (faire apparaitre une URL en tant que texte) et éviter son rendu automatique par le convertisseur markdown, il est possible d’utiliser des syntaxes alternatives:
- Ajouter une apostrophe inversée (`) avant et après l’URL du lien (Définir le lien en fragment de code).
- Echapper le premier slash (/) de l’URL du lien.
Markdown | HTML | Rendu |
---|---|---|
| <p>https://www.google.com</p> | https://www.google.com |
| <p>https://www.google.com</p> | https://www.google.com |
Accentuer un lien#
Pour accentuer un lien, il faut entourer le code markdown du lien par le code d’acccentuation choisi. Dans le cas d’un lien en fragment de code il faut placer les parenthèses inversées (`) à l’intérieur du texte du lien (entre les crochets).
Markdown | HTML | Rendu |
---|---|---|
| <em><br><a href="/markdown/link/">Je suis un lien en italique</a>
</em> | Je suis un lien en italique |
| <strong><br><a href="/markdown/link/">Je suis un lien en gras</a>
</strong> | Je suis un lien en gras |
| <em><strong><br><a href="/markdown/link/">Je suis un lien en italique et en gras</a>
</strong></em> | Je suis un lien en italique et en gras |
| <a href="/markdown/link/">
<code>Je suis un lien en fragment de code</code>
</a> | Je suis un lien en fragment de code |
Lien référencé#
Pour définir un lien dont l’URL est référencée (donc réutilisable), il faut formater le lien en 2 parties.
Première partie (texte du lien)
Pour définir la première partie du lien, qui correspond au texte qui sera rendu et fait le lien avec une référence d’URL à définir dans la deuxième partie, il faut respecter la syntaxe suivante:
- [Texte_du_lien][Référence_de_l’URL_du_lien]
La référence de l’URL du lien n’est pas sensible à la casse et peut contenir des caractères alphanumériques, des espaces et de la ponctuation.Deuxième partie (référence du lien)
Pour définir la deuxième partie du lien, qui fait le lien entre la référence de l’URL du lien définie dans la première partie, et la valeur de l’URL, il faut respecter une des syntaxes suivantes:
- [Référence_de_l’URL_du_lien]: URL_du_lien
- [Référence_de_l’URL_du_lien]: URL_du_lien "Titre_du_lien"
- [Référence_de_l’URL_du_lien]: URL_du_lien 'Titre_du_lien'
- [Référence_de_l’URL_du_lien]: URL_du_lien (Titre_du_lien)
- <[Référence_de_l’URL_du_lien]>: URL_du_lien "Titre_du_lien"
- <[Référence_de_l’URL_du_lien]>: URL_du_lien 'Titre_du_lien'
- <[Référence_de_l’URL_du_lien]>: URL_du_lien (Titre_du_lien)
La deuxième partie du lien peut-être placée à n’importe quel endroit dans le document. Par exemple toutes les références d’un document peuvent être regroupée à la fin d’un document pour des raisons de lisibilité et de simplicité.
Markdown | HTML | Rendu |
---|---|---|
| <a href="#lien-référencé">Je suis un lien</a>
<a href="#lien-référencé">Je suis un second lien</a>
<p>Je suis un texte tout seul</p> | Je suis un texte tout seul |
| <a title="Et moi son titre" href="#lien-référencé">Je suis un lien</a>
<a title="Et moi son titre" href="#lien-référencé">Je suis un second lien</a>
<p>Je suis un texte tout seul</p> | Je suis un texte tout seul |
| <a title="Et moi son titre" href="#lien-référencé">Je suis un lien</a>
<a title="Et moi son titre" href="#lien-référencé">Je suis un second lien</a>
<p>Je suis un texte tout seul</p> | Je suis un texte tout seul |
| <a title="Et moi son titre" href="#lien-référencé">Je suis un lien</a>
<a title="Et moi son titre" href="#lien-référencé">Je suis un second lien</a>
<p>Je suis un texte tout seul</p> | Je suis un texte tout seul |
| <a title="Et moi son titre" href="#lien-référencé">Je suis un lien</a>
<a title="Et moi son titre" href="#lien-référencé">Je suis un second lien</a>
<p>Je suis un texte tout seul</p> | Je suis un texte tout seul |
| <a title="Et moi son titre" href="#lien-référencé">Je suis un lien</a>
<a title="Et moi son titre" href="#lien-référencé">Je suis un second lien</a>
<p>Je suis un texte tout seul</p> | Je suis un texte tout seul |
| <a title="Et moi son titre" href="#lien-référencé">Je suis un lien</a>
<a title="Et moi son titre" href="#lien-référencé">Je suis un second lien</a>
<p>Je suis un texte tout seul</p> | Je suis un texte tout seul |
Lien avec espace#
Pour définir un lien dont l’URL contient des espaces, il faut encoder l’URL avec le code en pourcentage associé au caractère espace (%20).
Markdown | HTML | Rendu |
---|---|---|
| <a href="https://www.google.com/?query=Themes%20Hugo">Themes Hugo</a> | Themes Hugo |
ID d’un lien (Spécificité du thème)#
Pour définir l’ID d’un lien, il faut écrire un lien en suivant la syntaxe classique avec titre . L’ID est rajouté au lien automatiquement (à l’aide du thème) et aura pour valeur la sortie de la fonction anchorize de Hugo avec en entrée la valeur du titre du lien:
- [Texte_du_lien](URL_du_lien "Titre_du_lien")
Markdown | HTML | Rendu |
---|---|---|
| <a id="et-moi-son-titre" title="Et moi son titre" href="#id-dun-lien-spécificité-du-thème">Je suis un lien</a> | Je suis un lien |
Ref/Relref#
Pour définir un lien en utilisant ref
ou relref
, il faut suivre la syntaxe par défaut des shortcodes intégrés à Hugo
.
Markdown | HTML | Rendu |
---|---|---|
| <a href="<baseURL>/markdown/image/">Je suis un lien ref</a> | Je suis un lien ref |
| <a href="<baseURL>/fr/markdown/image/">Je suis un lien ref avec des paramètres nommées</a> | Je suis un lien ref avec des paramètres nommées |
| <a href="/markdown/image/">Je suis un lien relref</a> | Je suis un lien relref |
| <a href="/fr/markdown/image/">Je suis un lien relref avec des paramètres nommées</a> | Je suis un lien relref avec des paramètres nommées |