Plugin Notes en bas de page

belcikowski · 14 févr.

Bonjour,
J'aimerais beaucoup pouvoir disposer d'un plugin qui gère les notes en bas de page et assure le retour au texte. Quelqu'un parmi vous a-t-il déjà envisagé le création d'un tel plugin ?
Amitiés,
Christine Belcikowski

belcikowski · 21 févr.

Vous n'avez pas besoin de notes en bas de page ?

bazooka07 · 21 févr.

Tu crois qu'on voit passer ici beaucoup de littéraires ?

Cela dépend avec quel éditeur tu rédiges tes articles.
Si tu parles couramment le markdown, tu trouveras la solution avec le lien ci-dessous en cherchant "Les notes de bas de page" :
https://www.ionos.fr/digitalguide/sites-internet/developpement-web/markdown/
Sinon, il va falloir faire un peu de html en dur

fred.lavoine · 22 févr.

Bonjour,
Je ne pense pas qu'un plugin soit la solution pour les notes de bas de page. A mon avis, il faut te tourner vers les add-ons de ton éditeur de texte. Par exemple CK-Editor qui propose ce genre de fonctionnalité développée par sa communauté. Sinon si tu regardes les sorties HTML des logiciels de traitement de texte [i.e. Libre office], tu verras que ce sont de simples balises html. Sans développer quoi que ce soit, tu peux toujours copier-coller ton texte avec ces notes depuis ce genre de logiciel.

belcikowski · 23 févr.

Merci de ces partages d'idées.
Pour le moment, je me fais moi-même mes notes de bas de page en « html en dur »à la main. Mais c'est fastidieux, et il manque l'automatisme du retour au texte même...

bazooka07 · 1 mars

Bonjour,

J'ai la solution à ton problème pour les notes de bas de pages.
Actuellement tu fais comme cela dans ton article :

<span style="font-size: small;">(4)</span>

Et en bas de ton article :

<p style="text-align: justify;"><span style="font-size: small;">4. Cf. Irving Massey, « Alfred de Vigny. Notes for <em>Stello</em> », in the Musée de Condé, <a href="https://www.jstor.org/stable/436050"><em>Modern Philology</em></a>, volume 63, nº 3, 1966, p. 246-251.</span></p>

Pour simplifier et offrir une meilleure expérience utilisateur à tes visiteurs, remplacer la première partie HTML ci-dessus par :

<a data-fp="Cf. Irving Massey, « Alfred de Vigny. Notes for Stello », in the Musée de Condé, <a href='https://www.jstor.org/stable/436050'>Modern Philology</a>, volume 63, nº 3, 1966, p. 246-251"></a>

On utilise une balise <a> pour renvoyer vers la note de bas de page et l'attribut data-fp contient le contenu de la note à afficher en bas de page.
Inutile de rajouter la note en bas de page. Cela peut se faire automatiquement et avec la numérotation. Pour que la magie s'opère, il faut créer script en Javascript dans un fichier footnotes.js situé dans le dossier "themes/defaut" avec ce contenu :

(function() {
    'use strict';

    const article = document.querySelector('.article[id^="post-"]');
    if(article == null) {
        return;
    }

    const footnotes = article.querySelectorAll('a[data-fp]');
    if(footnotes.length == 0) {
        return;
    }

    const el = document.createElement('UL');
    el.className = 'footnotes';
    Array.from(footnotes).forEach(function(item, x) {
        const i = x+1;
        const idSrc = `footnote-${i}`;
        const idTarget = `note-${i}`;
        item.innerHTML = `<sup>(${i})</sup>`;
        item.id = idSrc
        item.href = `#${idTarget}`;
        const note = document.createElement('LI');
        note.innerHTML = `<a href="#${idSrc}">${i}. </a>${item.dataset.fp}`;
        note.id = idTarget;
        el.appendChild(note);
    });

    article.appendChild(el);
})();

Il faut également rajouter la ligne <script>.. dans le fichier themes/defaut/article.php comme ceci

    </main>
<script src="<?php $plxShow->template(); ?>/footnotes.js"></script>
<?php include __DIR__.'/footer.php'; ?>

Pour prendre les modifications en compte, fermer et réouvrir le navigateur ou appuyer sur la touche F5 pour recharger la page HTML.
S'il y a un lien dans la note de base de page, remplacer les guillemets par des apostrophes :

<a data-fp="<a href='https://gallica.bnf.fr/ark:/12148/btv1b8618473k/f11'>Les consultations du Docteur-Noir. Première consultation, Stello ou les Diables bleus</a>, édition originale / par le comte Alfred de Vigny (1797-1863), Paris, Charles Gosselin et E. Renduel, 1832, chapitre XX sqq"></a>

Eventuellement, tu peux rajouter ceci à la fin du fichier themes/defaut/css/theme.css :

.footnotes {
    font-size: smaller;
    list-style: none;
    padding-left: 0;
}

ou encore cela :

a[data-fp] {
    font-weight: bold;
    color: red;
}

Sans rapport avec le sujet de la discussion, mais cela peut aimer : plutôt que de mettre partout

style="text-align: justify;

Rajouter dans theme.css :

.article[id^="post-"] {
    text-align: justify;
    text-indent: 2rem;
}

Pour mettre une légende à une image, plutôt faire ceci :

<figure>
    <a href="data/medias/2021-02/robespierre_8juillet.jpg">
        <img src="data/medias/2021-02/robespierre_8juillet.jpg" alt="robespierre_8juillet.jpg" width="800" height="592" />
    </a><figcaption>Robespierre à la Convention le 8&nbsp;thermidor an&nbsp;II,<br />Gravure d'Auguste Dutillois d'après un dessin d'Auguste Raffet (Paris, 1804-1860, Gênes), Musée Carnavalet.</figcaption>

Et rajouter dans theme.css :

figure {
    margin: 0;
    text-align: center;
}
figcaption {
        font-size: smaller;
}

belcikowski · 1 mars

Merci, Grand Chef !
Je essayer cette solution. Mais j'ai un peu peur de faire des bêtises en intervenant sur les fichiers que tu indiques. Je ne sais jamais à quel endroit des fichiers doivent venir ces ajouts. Je vais me munir d'une sauvegarde d'abord...

bazooka07 · 1 mars

Il te suffit juste de faire une sauvegarde du dossier themes/defaut.

Si tu as un souci, je te donnerai un lien pour télécharger le thème modifié.

Plugin Notes en bas de page

Réponses