Un nouveau petit plugin qui permet de rendre autonomes les notes de bas de page de vos billets — d’ailleurs ce billet de présentation en comporte deux, les trouverez-vous ?
Ce plugin utilise un plugin jQuery (version 1.8 minimum) pour remplacer les liens vers les notes de pages et celles-ci par des affichages dynamiques au clic ou au survol.
Désactivé, les liens et les notes de bas de page apparaissent ainsi :
Une fois activé (voir les Paramètres du blog), les notes sont masquées (mais restent disponibles pour l’impression ou pour les lecteurs d’écran) et les liens apparaissent comme cela :
Un clic sur le lien permet d’afficher la note dans une fenêtre popup, près du lien :
Vous pouvez changer le style des liens en précisant Numérique dans les paramètres[1], vous obtiendrez alors ceci :
et cela une fois le lien cliqué :
Vous pouvez aussi opter pour un affichage en pied de page qui donne alors un affichage comme celui-ci :
Une seconde option vous permet de déclencher l’affichage des notes au survol du lien et non pas au seul clic sur le lien.
Fonctionnement
Le plugin s’appuie sur le modèle des notes de bas de page mis en place par l’éditeur Wiki original de Dotclear et également sur le modèle utilisé par la syntaxe Markdown (cette syntaxe est disponible en installant le plugin Markdown syntax).
Il fonctionnera de plus dès lors que vous utiliserez dans vos billets un balisage semblable à ceux utilisés par les deux syntaxes de l’éditeur (Wiki et Markdown).
Côté Wiki, pour les liens vers les notes, le balisage utilisé est :
<sup> [<a id="rev-wiki-footnote-[n]" href="#wiki-footnote-[n]">[n]</a>] </sup>
et pour le contenu des notes :
<div class="footnotes"> <h4>Notes</h4> <p>[<a id="wiki-footnote-[n]" href="#rev-wiki-footnote-[n]">[n]</a>] [texte de la note]</p> </div>
Côté Markdown, pour les liens vers les notes, le balisage utilisé est :
<sup id="fnref:[n]"> <a rel="footnote" href="#fn:[n]">[n]</a> </sup>
et pour le contenu des notes :
<div class="footnotes"> <hr /> <ol> <li id="fn:[n]"> <p> [texte de la note] <a rev="footnote" href="#fnref:[n]">↩</a></p> </li> </ol> </div>
Si votre balisage est différent, il faut à minima que vos liens vers les notes :
- soient encadrés par un
<sup>
…</sup>
; - suivent le schéma
(fn|footnote|note|wiki-footnote)[:\-_\d]
(soit fn ou footnote ou note ou wiki-footnote suivi a minima d’un : ou d’un - ou d’un chiffre.
Et que vos notes :
- soient encadrées par un élément ayant une classe commençant par footnote (en général une
<div>
)[2]; - soient chacune contenues dans un élément
<p>
ou<li>
.
Ce billet servira de support pour cette version du plugin.
1 De Tomek -
Je suis en train de tester : c’est cool, merci !
Juste un truc : préciser qu’il faudra peut-être devoir changer des styles CSS pour que l’affichage soit lisible (chez moi c’est illisible si je laisse tel quel).
2 De Franck -
Ah oui Tomek sur fond noir, ça risque de pas bien passer en effet.
3 De Tomek -
Et du coup, prévoir un bout d’admin pour modifier le css serait un plus (je sais je suis pénible), parce que j’y vais à coup de !important là. :-P
4 De Franck -
Je pense que je vais reprendre les CSS pour les éclater et prévoir une (ou des) versions qui fonctionneront sur fond sombre.
À l’occasion fait-moi passer tes modifs Tomek.
5 De Tomek -
Yep !
6 De Tomek -
Bon, je reviens dessus parce qu’il semble qu’il y ait un petit souci d’id redondante qui fout la zone quand on n’est pas dans le contexte billet, et du coup, on peut avoir plusieurs ID similaires dans une page : et là… c’est le drame !
Tu peux zieuter sur mon blog en page d’accueil, à partir du 2e billet qui a des notes.
7 De Franck -
Je vais regarder ça Tomek.
8 De Franck -
Tomek en fait le plugin n’y est pour pas grand chose puisqu’il s’appuie sur les ID déjà positionnés pour les notes de bas de page. C’est plutôt côté wiki (et encore) qu’il faudrait éventuellement faire quelque chose (chaque billet est indépendant, ce qui est normal).
Du coup je vais plutôt ajouter une option au plugin pour permettre de ne l’utiliser que dans les contextes de billet (ou page) seul(e).
9 De Tomek -
Yep, c’est un bon compromis je pense.