Une nouvelle version de ce 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 ?
Cette version ajoute la gestion des notes des extraits et plus seulement des contenus des billets, renforce le contraste des boutons d’affichage des notes et corrige un problème de masquage de la fin du texte de la note lorsque celle-ci est longue (ce qui provoque l’affichage d’un ascenseur pour la faire défiler).
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.
Une dernière option vous permet d’activer ce plugin uniquement dans le contexte des billets et pages seuls, ce qui est utile lorsque les ID des notes sont réutilisés d’un billet à un autre (défaut inhérent à la gestion des notes de bas de page des syntaxes wiki et markdown[2]).
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>
)[3]; - soient chacune contenues dans un élément
<p>
ou<li>
.
Ce billet servira de support pour cette version du plugin.
Notes
[1] Notez que la numérotation des notes est spécifique à chaque billet.
[2] quoique pour cette dernière syntaxe il est toujours possible de s’en prémunir à condition d’utiliser un modèle de numération de note unique et spécifique à chaque entrée.
[3] Notez que les éléments enfants <hr />
et <h4>
seront automatiquement masqués s’ils sont présents dans cet élément
1 De mirovinben -
Impec !
2 De Gilsoub -
hello, profitant de ma fripouille, j’ai voulu essayer Big Foot. Apparemment il ne marche pas avec dcCK editor (j’avais cru le comprendre à la lecture du billet, mais j’ai essayer quand même). Par contre chez moi, quand Big Foot est activé dans les prefs, c’est le plug in “lien externe” qui ne fonctionne plus sur mes pages. Je perd la petite icône qui me permet d’ouvrir le lien dans une nouvelle page (oui, je sais que t’aime pas, mais bon ;-) ). Voila, c’était juste pour dire ;-)
3 De Franck -
Gilsoub c’est pas que CKEditor ne peut pas être utilisé, c’est juste que c’est largement plus simple avec le wiki (ou le markdown).
Maintenant si tu suis le schéma de mise en place des notes (il est décrit plus haut dans ce billet), ça devrait rouler.
Concernant les liens qui s’ouvrent à l’extérieur, tu fais bien comme tu veux, faut juste que je regarde ce qui coince avec bigfoot, à commencer par trouver ce plugin “lien externe”.
4 De mirovinben -
J’utilise bigfoot avec beaucoup de satisfaction mais j’ai constaté une anomalie dans des cas très spécifiques : ceux où j’affiche dans le corps du billet le champ “notes” (grâce à deux fonctions que j’ai ajoutées dans mon thème : IfEntryNotes et EntryNotes et qui sont détaillées là) qui me permettent d’afficher des infos (essentiellement pour les solutions de mes mékéskeucé, définitions des obsolètes, listes des participants à la photo du mois).
Dans ce cas, et dans ce cas seulement, bigfoot ne fait rien. Ni dans l’extrait ni dans le contenu.
Un exemple dans ce billet de mon blog de test. Ce dysfonctionnement dans de telles circonstances n’est pas bien grave mais je me suis dit que ça pouvait t’intéresser…
J’ai du mal à comprendre les fonctions jQuery, mes rares notions de javascript sont bien loin à présent et je n’ai pas vu où ça coinçait.
5 De Gilsoub -
@Franck : Le plug c’est : External link de Bruno Hondelatte
6 De Franck -
Gilsoub je vois pas trop ce qui coince côté bigfoot, du coup je pense que c’est plutôt du côté du plugin externalLinks qu’il faut regarder.
Maintenant c’est pas dit qu’on arrive à les faire cohabiter tous les deux.
7 De Sylvain -
Sauf erreur on est même presque obligé de la cocher la case, sinon sur une page d’accueil avec différents billets et notes cela ne fonctionne pas (en tout cas chez moi, j’ai le même note en popup partout par exemple).
8 De Franck -
Sylvain est-ce que sans le plugin activé, les notes n’auraient pas encore les mêmes URLs (d’accès aux notes et de retour des notes) ?
9 De Sylvain -
Ah oui donc en fait cela n’a jamais fonctionné avec le mode normal sur la liste des x billets affichés. Faut juste pas cliquer sur les liens des numéros.
10 De Franck -
Sylvain c’est un des défauts, pas encore corrigé, de la gestion des notes avec le wiki Dotclear et il est possible qu’il en soit de même si on n’y prend pas garde avec celui de Markdown.