Aujourd'hui je vous présente deux outils que j'ai développé conjointement, à savoir un module et un plugin, c'est la raisson pour laquelle je publie cet article dans ma rubrique Joomla, qui vous permet d'intégrer dans vos articles des notes, ces notes étant des retours en bas de page grâce à leur numéro de note. Pour faire une analogie avec Word par exemple on appelle cela des notes de bas de page. Pour faire la même analogie avec Latex, c'est équivalent de la commande \footnote ou une de ces commandes dérivée bien entendu.
Cet outil fonctionne avec à la fois un plugin, mais aussi un module. Ce sont donc deux éléments de Joomla que nous devons utiliser et installer sur le site pour que cela fonctionne.
Le plugin
Le plugin permet au cœur de votre article, puisque c'est un plugin de contenu, de spécifier le terme auquel vous souhaitez affecter une note de bas de page et sa numérotation de la note est automatique.
Le plugin permet simplement à Joomla de "détecter" la balise note de votre article que vous allez intégrer. Attention toutefois, cette balise note doit prendre certains paramètres pour qu'elle soit pleinement fonctionnelle. Ainsi vous devez utiliser la balise note de la manière suivante :
{note:description de votre note}libellé de votre note{/note}
Comme vous pouvez le constater sur l'exemple que je viens de mentionner ci-dessus, cette commande prend deux paramètres :
- dans la première balise note, le place une texte décrivant la note
- dans le deuxième le contenu de votre note.
Ce contenu c'est ce qu'il se trouvera dans le texte de votre article (ou un module) Joomla auquel vous souhaitez affecter votre note. Ce qui se trouve dans la balise note, après le double point (:), c'est le contenu même de cette note. C'est donc ce contenu qui sera récupéré dans le module que vous placerez généralement en pied de page de votre template.
footnote.php
<?php
defined('_JEXEC') or die('Access deny');
class plgContentFootnotes extends JPlugin
{
function onContentBeforeDisplay($content, $article, $params, $limit){
/*Source regex : https://forum.joomla.org/viewtopic.php?t=794108*/
/*1. On commence par remplacer le content dans l'article par le numero de sa note*/
$doc = JFactory::getDocument();
$doc->addStyleSheet('plugins/content/footnotes/style.css');
$re = '/\{note:(.*)}(.*){\/note}/m';
$subst = "$1<sup class=\"note-bas-page\"></sup>";
//$article->text = preg_replace($re, $subst, $article->text);
$re = '/\{note:(.*)}(.*){\/note}/m';
preg_match_all($re, $article->introtext, $matches, PREG_SET_ORDER, 0);
/**
* 1.1 On procède maintenant aux remplacements du tag dans l'article. dans le plugin, il faut ici rempalcer tout ce qui peut être automatisé pour retrouver l'article :
* - son id,
* - son alias,
* - son titre
***************************************************/
$i=1;
foreach($matches as $une_note )
{
$une_note[3] = $i;
/*echo $i."<br><pre>";
print_r($une_note);
echo "</pre>";*/
$article->text = str_replace($une_note[0],'<span class="une-note"><span class="libelle">'.$une_note[1].'</span><sup class="nro"><a href="#note-bas-page-'.$i.'" >'.$i.'</a></sup>',$article->text);
$i++;
}
}
}
?>footnotes.xml
<?xml version="1.0" encoding="utf-8"?>
<extension version="3.1" type="plugin" group="Content">
<name>Foot notes</name>
<author>Sebastien LHUILLIER</author>
<creationDate>Janvier 2023</creationDate>
<copyright>Sébastien LHUILLIER</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<authorEmail>Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.</authorEmail>
<authorUrl>www.sebastien-lhuillier.com</authorUrl>
<version>1.0</version>
<description>En complément au MODULE footnote, ce plugin modifie le contenu de l'article</description>
<files>
<filename plugin="footnotes">footnotes.php</filename>
<filename>footnotes.xml</filename>
<filename>style.css</filename>
</files>
</extension>style.css
.liste-hits {
text-align: left;
list-style-type: none;
}
.liste-hits .titre{
color:red;
font-weight:bold;
}
.liste-hits .hits{
color:blue;
font-weight:bold;
}
.num-renvoi{
font-variant-position: super;
color:red;
}
.une-note .libelle{
color:red;
}
.une-note .nro{
margin-left: 0.5%;
}
.une-note .nro a{
color:blue;
text-decoration:underline dotted;
}Le module
Comme il est relativement difficile de développer la deuxième partie recensant l'ensemble des notes avec des simples plugins, (ou plutôt puisque je n'ai pas l'ensemble des compétences pour le faire), je me suis tourné vers un module. L'intérêt du module c'est que en son cœur, il est possible d'avoir accès à la propriété introtext de l'objet article. Cette propriété permet de récupérer l'intégralité du texte d'un article. Je n'ai pas réussi à le faire dans un plugin.
Lorsque vous créez votre module, si vous souhaitez par exemple dans protostar l'intégrer en pied de page, vous devez le lui spécifier sa position à la création de ce module. Dans mon cas, je lui affecte la position footer afin que ce module se place en pied de page. Ne maîtrisant pas les autres templates à vous de trouver la position il y a plus adaptée à votre besoin.
helper.php
<?php
class modFootnotes{
public static function getAllNotes(){
$article = JControllerLegacy::getInstance('Content')->getModel('Article')->getItem($articleId);
$re = '/\{note:(.*)}(.*){\/note}/m';
$subst = "$1<sup class=\"note-bas-page\"></sup>";
$re = '/\{note:(.*)}(.*){\/note}/m';
preg_match_all($re, $article->introtext, $matches, PREG_SET_ORDER, 0);
$i=0;
foreach($matches as $uneligne)
{
/***************
*j'ajoute à mon tableau le n° de l'index. Dans le plugin qui ajoute la note,
* je commence à 1. C'est pour ca que je rajoute 1 ici partout
***************************************************************/
$matches[$i][3]=$i+1;
$i++;
}
return($matches);
}
}
?>mod_footnotes.php
<?php
defined('_JEXEC') or die;
require_once dirname(__FILE__).'/helper.php';
$mesNotes = modFootnotes::getAllNotes();
require JModuleHelper::getLayoutPath('mod_footnotes');
$doc = JFactory::getDocument();
$doc->addStyleSheet('modules/mod_footnotes/style.css');
//L'id (pour lien interne) doit etre de la forme #note-bas-page-1 (ou 1 est le n° de la note)
echo '<fieldset class="notes-de-bas-de-page">';
echo '<legend>Notes de bas de pages</legend>';
$i=1;
foreach($mesNotes as $uneNote)
{
echo '<div class="une-note"><span class="note-de-bas-de-page" id="note-bas-page-'.$i.'">'.$uneNote[3].'</span><span class="nom-note-de-bas-de-page">'.$uneNote[2].'</span><span class="description-note-de-bas-de-page">'.$uneNote[1].'</span></div>';
$i++;
}
echo "</fieldset>";mod_footnotes.xml
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="1.0.0" client="site" method="upgrade">
<name>Notes de pieds de pages</name>
<author>sebastien lhuillier</author>
<version>1.0.0</version>
<description>Module affichant les notes en bas de pages.</description>
<files>
<filename>mod_footnotes.xml</filename>
<filename module = "mod_footnotes">mod_footnotes.php</filename>
<filename>index.html</filename>
<filename>helper.php</filename>
<filename>tmpl/default.php</filename>
</files>
<config>
</config>
</extension>
style.css
.notes-de-bas-de-page {
text-align: left;
}
.notes-de-bas-de-page .numero-note-de-bas-de-page{
font-variant-position: super;
color:red;
margin-right: 0.5%;
}
.notes-de-bas-de-page .une-note .note-de-bas-de-page {
color: red;
font-variant-position: super;
margin-right: 0.3%;
}
.notes-de-bas-de-page .une-note .nom-note-de-bas-de-page {
font-style: italic;
margin-right: 5px;
}
.notes-de-bas-de-page .une-note .nom-note-de-bas-de-page::after {
content: " : ";
}Apportez votre patte
J'ai fait les choses relativement simplement mais vous pouvez bien entendu une fois ces deux éléments installé, apporter votre touche personnelle ou CSS du module affiche en grignote en bas de page. J'ai fait simple, mais si vous avez d'un artiste n'hésitez pas à modifier le CSS en question et par la même occasion de me retourner ça sera avec plaisir que je le partagerai en complément à cet article.