Bandeau
SpipFactory
.fr .com .org

C’est une plateforme d’hébergement autogéré en association de loi 1901
Propulsée par la mutualisation de Spip sous Habillage Escal

Les Ancres
Article mis en ligne le 19 août 2024
dernière modification le 9 août 2024

Les Ancres

Concrètement, cela permet à un auteur de créer une ancre dans un article avec un raccourci typographique :
[nomdelancre<-]
pour pouvoir ensuite créer un lien cliquable vers cette ancre dans la page (et permettre au lecteur d’aller directement à cet endroit de la page, comme pour les notes) avec un lien Spip vers #nomdelancre :
[aller directement voir l'ancre->#nomdelancre]

1. Aller du mot vers sa définition
Mot à définir par une note de bas de page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat blandit nisl, a ornare magna egestas vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam non mauris eu purus laoreet vehicula in nec dui. Nullam malesuada feugiat gravida. In vestibulum elit eget elit vulputate, nec sagittis leo porta. Maecenas non pretium sapien. Morbi malesuada lacus eu venenatis blandit. Phasellus sit amet ultricies elit, ac iaculis ex. Curabitur posuere felis et metus rutrum, sed pulvinar metus eleifend. Nunc et purus lectus. Proin consectetur mattis risus, id tincidunt nunc auctor non. Duis porttitor justo venenatis nisi vestibulum, eu maximus elit lobortis. Praesent vestibulum maximus lorem nec laoreet. Integer cursus justo ac augue pretium, ac euismod tellus hendrerit. Donec nisl urna, accumsan sit amet leo sit amet, dictum scelerisque felis.

Note : explication du mot
Aliquam vel hendrerit nisl, quis pretium nulla. Phasellus vitae lectus tellus. Curabitur tellus est, sagittis tempus felis quis, tincidunt posuere massa. Suspendisse nisi neque, ornare eget varius nec, rhoncus ac nulla. Praesent non suscipit velit. Vestibulum vulputate sem elit, a laoreet urna mollis vitae. Cras sed massa libero. Cras venenatis commodo metus auctor rutrum. Vivamus sed nisl vitae elit laoreet pharetra. Cras sit amet viverra urna. Nam ac ante sit amet lacus posuere sollicitudin eu sit amet ante. Nulla et magna augue. In facilisis malesuada urna, ut fringilla dolor pharetra sit amet. Proin rhoncus, mauris volutpat ultricies condimentum, justo justo posuere nunc, non luctus lectus orci a ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.


Le titre avec lien cliquable
"Mot à définir par une note de bas de page."
est construit ainsi :

{{[Mot->#1] à définir par une note de bas de page.}}
On crée le lien cliquable vers l’ancre 1 : [...->#1]


Le code de ce lien cliquable [...->...] respecte la syntaxe générale de SPIP utilisée pour naviguer :

  • à l’intérieur d’un site :
    • [Aller à l'article 392->art392]
  • vers un site externe :
    • [Cliquer pour aller visiter le site www.abd.fr->https://abd.fr]

Il est composé de 2 parties : [expression->destination]

  1. l’expression sur laquelle on clique
    • [expression : crochet ouvrant [ avant l’expression.
  2. la destination
    • ->destination] : pointeur -> avant la destination et crochet fermant ].

Dans le langage de SPIP (et html) une ancre est désignée par le symbole #.

  • La destination sera donc codée :
    • ->#destination]

Et le code de l’ancre attachée à "Note : explication du mot"

{{[1<-] Note : explication du mot}}
On crée l’ancre 1 : [1<-]

  • Nom de l’ancre [1
    • crochet ouvrant [ suivi du nom 1
  • Création de l’ancre <-]
    • pointeur inverse <- et crochet fermant ]

2. Remonter de la note de bas de page vers le mot à définir

Mot à définir par une note de bas de page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat blandit nisl, a ornare magna egestas vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam non mauris eu purus laoreet vehicula in nec dui. Nullam malesuada feugiat gravida. In vestibulum elit eget elit vulputate, nec sagittis leo porta. Maecenas non pretium sapien. Morbi malesuada lacus eu venenatis blandit. Phasellus sit amet ultricies elit, ac iaculis ex. Curabitur posuere felis et metus rutrum, sed pulvinar metus eleifend. Nunc et purus lectus. Proin consectetur mattis risus, id tincidunt nunc auctor non. Duis porttitor justo venenatis nisi vestibulum, eu maximus elit lobortis. Praesent vestibulum maximus lorem nec laoreet. Integer cursus justo ac augue pretium, ac euismod tellus hendrerit. Donec nisl urna, accumsan sit amet leo sit amet, dictum scelerisque felis.

Note : explication du mot.
Aliquam vel hendrerit nisl, quis pretium nulla. Phasellus vitae lectus tellus. Curabitur tellus est, sagittis tempus felis quis, tincidunt posuere massa. Suspendisse nisi neque, ornare eget varius nec, rhoncus ac nulla. Praesent non suscipit velit. Vestibulum vulputate sem elit, a laoreet urna mollis vitae. Cras sed massa libero. Cras venenatis commodo metus auctor rutrum. Vivamus sed nisl vitae elit laoreet pharetra. Cras sit amet viverra urna. Nam ac ante sit amet lacus posuere sollicitudin eu sit amet ante. Nulla et magna augue. In facilisis malesuada urna, ut fringilla dolor pharetra sit amet. Proin rhoncus, mauris volutpat ultricies condimentum, justo justo posuere nunc, non luctus lectus orci a ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.


Dans ce 2° exemple, on inverse simplement la place de l’ancre (en haut) et du lien cliquable (en bas).

L’ancre [2<-] placée après (ou avant) le Mot du titre : "Mot [2<-] à définir", sert à remonter de la Note vers lui.

Le lien de l’ancre se définit par [&uarr;->#2] devant le mot Note
C’est sur lui qu’on clique pour remonter dans le texte.




NB : la flèche vers le haut s’obtient par le caractère spécial &uarr;, teinté en rouge pour une plus grande visibilité. (Voir ci-dessous le sens de &uarr;)

3. Note et retour au mot défini

**On mélange les 2 systèmes

Mot à définir par une note de bas de page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat blandit nisl, a ornare magna egestas vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam non mauris eu purus laoreet vehicula in nec dui. Nullam malesuada feugiat gravida. In vestibulum elit eget elit vulputate, nec sagittis leo porta. Maecenas non pretium sapien. Morbi malesuada lacus eu venenatis blandit. Phasellus sit amet ultricies elit, ac iaculis ex. Curabitur posuere felis et metus rutrum, sed pulvinar metus eleifend. Nunc et purus lectus. Proin consectetur mattis risus, id tincidunt nunc auctor non. Duis porttitor justo venenatis nisi vestibulum, eu maximus elit lobortis. Praesent vestibulum maximus lorem nec laoreet. Integer cursus justo ac augue pretium, ac euismod tellus hendrerit. Donec nisl urna, accumsan sit amet leo sit amet, dictum scelerisque felis.

Note : explication du mot.
Aliquam vel hendrerit nisl, quis pretium nulla. Phasellus vitae lectus tellus. Curabitur tellus est, sagittis tempus felis quis, tincidunt posuere massa. Suspendisse nisi neque, ornare eget varius nec, rhoncus ac nulla. Praesent non suscipit velit. Vestibulum vulputate sem elit, a laoreet urna mollis vitae. Cras sed massa libero. Cras venenatis commodo metus auctor rutrum. Vivamus sed nisl vitae elit laoreet pharetra. Cras sit amet viverra urna. Nam ac ante sit amet lacus posuere sollicitudin eu sit amet ante. Nulla et magna augue. In facilisis malesuada urna, ut fringilla dolor pharetra sit amet. Proin rhoncus, mauris volutpat ultricies condimentum, justo justo posuere nunc, non luctus lectus orci a ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.



On a les 2 systèmes mélangés :
  1. En haut, pour Mot : {{[Mot->#4][3<-] à définir par une note de bas de page.}}
    • On crée à la fois l’ancre 3[3<-]
    • et le lien cliquable 4 [Mot->#4]
  1. En bas, depuis la Note : {{[4<-] [&uarr;->#3] Note : explication du mot.}}
    • inversement l’ancre 4 [4<-]
    • et le lien cliquable 3 [&uarr;->#3]


Mémoriser le code du caractère spécial &uarr ; &uarr;
Il se décompose en 4 parties : & - u - arr -  ;
  • & et  ; délimitent le début et la fin d’un caractère spécial.
  • u pour UP (en haut, en anglais)
  • arr pour ARROW (flèche, en anglais)
  • uarr = Up Arrow : c’est bien une flèche, pointe en haut !

    Si comme ici, vous voulez au lieu de , le code est &uArr; : juste un A majuscule et le tour est joué !



    Sandy

    « Il n’y a pas de problème qu’une absence de solution ne finisse à la longue par se résoudre sur SpipFactory »
    Plan du site Contact Mentions légales

    2017-2025 © SpipFactory - Tous droits réservés
    Haut de page
    Réalisé sous SPIP
    Habillage ESCAL 5.2.14
    Hébergeur : SpipFactory
    Soutenir par un don