Plugin bigfoot 0.2 pour Dotclear

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 ?

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

11 réactions

Fil des commentaires de ce billet

1 De Tomek - 08/01/2016, 11:01

Merci ! Rapide comme l’éclair !
2 De Pinkilla - 08/01/2016, 12:42

Sympa… merci
3 De julien - 08/01/2016, 14:33

Qu’est-ce qu’il y a comme options pour styler (oui, j’ai la flemme de chercher par moi-même) l’affichage des notes ? Parce qu’avec le texte en gris très clair sur fond blanc, c’est pas hyper lisible chez moi…
(Et ce petit tour dans les préférences du blog pour activer bigfoot m’a fait prendre conscience qu’il faut que je mette à jour mes plugins car leurs options ne correspondent plus au style actuel… :-/ )
4 De julien - 08/01/2016, 15:09

Et vu que je suis un chieur : j’ai mal vu ou il n’y a pas moyen d’avoir le style numérique et en pied de page ?
5 De Franck - 08/01/2016, 15:14

julien, pas d’option pour styler, pas plus que pour avoir numérique et pied de page, saynul, hein ? :-D
6 De julien - 08/01/2016, 16:59

Bon, j’ai dû mal m’exprimer, car la possibilité de styler existe : le contenu rajouté par le plugin utilise des classes bigfoot-footnote* qui permettent de modifier son style. :-)
Merci !
7 De Luc - 09/01/2016, 12:51

Adopté!
Merci! :-)
8 De mirovinben - 04/02/2016, 05:44
Je suis en train de tester bigfoot et constate avec plaisir qu’il accepte mon balisage fait à la main dans mes billets, tous rédigés en xHtml.

Par contre je constate deux trucs bizarres chez moi :
1. Seules les notes présentes dans le content sont prises en charge. S’il y en a dans l’extrait, elles restent en présentation classique. Toutes mes notes ont un ID unique du genre <sup><a href=”#note3521-01” id=”revno…</sup> basé sur l’ID du billet qui les contiennent (ici 3521).
2. si je rédige une note un peu beaucoup bavarde, le plugin propose un ascenseur. Super ! Sauf que la dernière ligne n’est alors pas très lisible comme estompée par le bas de la fenêtre.
Pour le second constat, je vais investigationner chez moi pour voir si on peut corriger via CSS.

Sinon, bigfoot est très agréable à utiliser (perso je préfère le mode numérique) et à paramétrer.
9 De Franck - 04/02/2016, 08:25

Merci pour le retour mirovinben, je vais regarder pour l’extrait.
10 De Franck - 04/02/2016, 11:04

Nouvelle version dans les tuyaux, qui corrige les deux problèmes évoqués (extrait et dernière ligne des longues notes), et qui renforce le contraste des boutons d’affichage.
11 De mirovinben - 04/02/2016, 13:40

Merci Franck !

Bigfoot (dans sa nouvelle version 0.3) fonctionne à présent très bien aussi avec l’extrait et les notes un peu bavardes n’ont plus la dernière ligne tronquée.

Open Time