Plugin bigfoot 0.3 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 ?

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 :

Liens et notes de bas de page

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 :

Liens vers les notes de bas de page

Un clic sur le lien permet d’afficher la note dans une fenêtre popup, près du lien :

Note de bas de page affichée 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 :

Liens numérotés vers les notes de bas de page

et cela une fois le lien cliqué :

Note de bas de page affichée près du lien numérique

Vous pouvez aussi opter pour un affichage en pied de page qui donne alors un affichage comme celui-ci :

Note de bas de page affichée en pied de page

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 :

  1. soient encadrés par un <sup></sup> ;
  2. 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 :

  1. soient encadrées par un élément ayant une classe commençant par footnote (en général une <div>)[3];
  2. 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

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/12712

Haut de page