Paginer automatiquement le blog

Quand on affiche sur une page tous les billets du blog, la page devient vite looooooongue et illisible. Pour éviter d'avoir une page "Blog" à rallonge, j'ai déjà expliqué dans ce tutoriel comment faire un archivage thématique ou mensuel des billets : on affiche ainsi sur une page uniquement les billets relatifs à un thème ou à un mois. Cela allège les pages. C'est simple à mettre en oeuvre, puisqu'il suffit de "tagger" les billets au moment où on les écrit avec des mots-clefs ou des marqueurs temporels (voir le tutoriel pour de plus amples informations). Grâce à cet archivage, le blog est bien rangé, plus accessible et il gagne en lisibilité.

 

Mais même si on opère cet archivage, il arrive un moment où une page thématique se retrouve à afficher 25 billets... J'étais donc très contente d'arriver sur cet article d'un Jimdonaute chinois, puisqu'il y donne un code qui permet de paginer virtuellement les billets du blog. J'ai modifié le code à ma sauce.

Au programme de ce tutoriel :

Démonstration et aperçu du résultat

Vous pouvez voir un aperçu du résultat obtenu sur la page d'accueil de mon blog, celle où je liste tous les billets sans rien filtrer. La pagination apparaît en haut et en bas de page :

Screenshot : pagination du haut
Pagination automatique en haut de page
Screenshot : pagination en bas de page
Pagination automatique en bas de page
Flèche vers le haut

Mise en garde liminaire

Veuillez noter que cette méthode simule une pagination, mais ce n'est pas une "vraie" pagination. Elle est donc limitée. Ainsi, si votre page de blog est lourde car elle contient beaucoup de billets, elle sera toujours aussi longue à charger, même avec la pagination. En effet, la page est chargée intégralement en une fois, puis le script la découpe en plusieurs portions qui sont seulement cachées / révélées.

 

Autrement dit, le temps de chargement de votre blog ne sera pas accéléré. La pagination apporte une présentation plus aérée du blog en le découpant en pages, mais cette amélioration est seulement cosmétique. Elle ne règle pas le problème "de fond" d'un blog qui prend de "l'embonpoint". (Ce serait bien que Jimdo se penche sur le problème d'ailleurs... )

Flèche vers le haut

Où insérer les codes fournis ?

On colle les codes fournis sur une page de blog. Une page de blog est une page de Jimdo dans laquelle on a inséré un bloc Affichage du blog :

Screenshot : affichage du blog
Insertion de l'affichage du blog

On paramètre ensuite l'affichage du blog comme on veut, peu importe : filtrage par catégorie, filtrage par date ou affichage de tous les billets :

Screenshot : affichage des billets du blog
Affichage des billets du blog

Juste en-dessous (et pas ailleurs, c'est capital !), on ajoute un élément Widget/HTML :

Screenshot : élément widget/HTML
Ajout d'un élément Widget/HTML

C'est dans la fenêtre de saisie qui apparaît qu'on va installer la pagination.

Flèche vers le haut

Installer la pagination inférieure

Voici le code qui permet de paginer le blog : il contient le "moteur" de la pagination et permet d'afficher la pagination inférieure, celle qui apparaît en bas de page. Je rappelle que ce code doit être collé juste en-dessous l'élément Affichage du blog, dans la fenêtre de saisie de l'élément Widget/HTML :

<div id="PageNavigateBottom" align="center"></div>
<div id="bas"></div>

<script type="text/javascript">
//<![CDATA[ 
var m_nItemPerPage = 3, m_nCrtPage = 0; 
function GoPage(nPage) 
{ 
    m_nCrtPage = nPage; 
    var divBlogs = document.getElementsByClassName("n clearover j-blogarticle"); 
    var nTotalBlog = divBlogs.length; 
 
    //Hide Or Display Blog Item 
    for(var i = 0; i < m_nCrtPage * m_nItemPerPage; i++) 
    { 
        divBlogs[i].style.display = 'none'; 
    } 
    for(var i = m_nCrtPage * m_nItemPerPage;
            i < Math.min((m_nCrtPage + 1) * m_nItemPerPage, nTotalBlog); i++) 
    { 
        divBlogs[i].style.display = 'block'; 
    } 
    for(var i = (m_nCrtPage + 1) * m_nItemPerPage; i < nTotalBlog; i++) 
    { 
        divBlogs[i].style.display = 'none'; 
    } 
    //Reset PageNavigate 
    document.getElementById("PageNavigateBottom").innerHTML = "" ;
            for(var i = 0 ; i < Math.ceil(nTotalBlog / m_nItemPerPage) ; i++) 
    { 
        if(i != m_nCrtPage) 
        { 
            document.getElementById("PageNavigateBottom").innerHTML = 
                document.getElementById("PageNavigateBottom").innerHTML + 
                "<a href='#bas' style='font-weight:600; padding:1px 4px; border: 1px solid #ddd;' onclick='GoPage(" + i + ")' >" + (i + 1) + "<\/a>&nbsp;"; 
        } 
        else 
        { 
            document.getElementById("PageNavigateBottom").innerHTML = 
                document.getElementById("PageNavigateBottom").innerHTML +
                  "<span style='font-weight:600; padding:1px 4px; background-color: #efefef; border: 1px solid #efefef;'>" + (i + 1) + "<\/span>&nbsp;"; 
        } 
    } 
    //Reset PageNavigateTop
    document.getElementById("PageNavigateTop").innerHTML = "" ;
            for(var i = 0 ; i < Math.ceil(nTotalBlog / m_nItemPerPage) ; i++) 
    { 
        if(i != m_nCrtPage) 
        { 
            document.getElementById("PageNavigateTop").innerHTML = 
                document.getElementById("PageNavigateTop").innerHTML + 
                "<a href='#top' style='font-weight:600; padding:1px 4px; border: 1px solid #ddd;' onclick='GoPage(" + i + ")' >" + (i + 1) + "<\/a>&nbsp;"; 
        } 
        else 
        { 
            document.getElementById("PageNavigateTop").innerHTML = 
                document.getElementById("PageNavigateTop").innerHTML +
                "<span style='font-weight:600; padding:1px 4px; background-color: #efefef; border: 1px solid #efefef;'>" + (i + 1) + "<\/span>&nbsp;"; 
        } 
    } 
} 
GoPage(0); 
//  ]]> 
</script>

Validez les changements en appuyant sur le bouton Enregistrer. Repasser en mode Aperçu pour voir la pagination s'afficher sous le blog !

Flèche vers le haut

Paramétrer le nombre de billets à afficher par page

Au début du code fourni, répérez cette ligne :

var m_nItemPerPage = 3

Elle indique le nombre de billets à afficher par page. Par défaut, la valeur est de 3, mais vous pouvez la paramétrer sur 5, 8 ou 10...

Flèche vers le haut

Styler la barre de pagination

Dans le code, j'ai coloré en rouge les éléments que vous pouvez modifier à votre convenance. Cette personnalisation graphique s'adresse plutôt à des utilisateurs avancés. Si vous êtes novices, passez votre chemin et rendez-vous directement à l'étape suivante.

Styler la barre de pagination

style='font-weight:600; padding:1px 4px;border: 1px solid #ddd;'

Cette portion de code définit l'aspect de votre barre de pagination :

  • font-weight : c'est la "graisse" de la police. Mettez 800 pour une police plus grasse et 200 pour une police normale
  • padding : ne touchez pas à cette valeur, c'est inutile.
  • border : c'est l'aspect du cadre autour des numéros de page. Remplacez la valeur #ddd par une autre valeur pour changer la couleur (exemple : #aaa pour du gris foncé). Si vous ne voulez pas de cadre, remplacez 1px par 0px.

Styler le numéro de la page courante

style='font-weight:600; padding:1px 4px; background-color: #efefef; border: 1px solid #efefef;'

Cette portion de code définit l'aspect du numéro de la page actuellement affichée :

  • font-weight : c'est la "graisse" de la police. Mettez 800 pour une police plus grasse et200 pour une police normale
  • padding : ne touchez pas à cette valeur, c'est inutile.
  • border : c'est l'aspect du cadre autour du numéro de page. Remplacez la valeur #efefef par une autre valeur pour changer la couleur (exemple : #aaa pour du gris foncé). Si vous ne voulez pas de cadre, remplacez 1px par 0px.
  • background-color : c'est la couleur de fond du numéro de page. Remplacez la valeur#efefef par une autre valeur pour changer la couleur (exemple : #aaa pour du gris foncé). Si vous ne voulez pas de couleur de fond, remplacez #efefef par none.

 

Flèche vers le haut

Installer la pagination supérieure

Cette étape est facultative : si vous ne souhaitez disposer que d'une pagination inférieure, vous pouvez l'ignorer. En revanche, si vous voulez avoir une double pagination, copiez-collez le code juste avant l'élément Affichage du blog dans la fenêtre de saisie d'un élément Widget/HTML :

<div id="PageNavigateTop" align="center"></div>

N'oubliez pas de valider le changement en pressant sur le bouton Enregistrer. Repassez en mode Aperçu : la pagination supérieure apparaît !

Flèche vers le haut

D'autres tutoriels sur le sujet

Le problème de la pagination du blog est abordé sur plusieurs sites. Voici quelques liens :

  • l'article du site chinois sur lequel je me suis basée pour rédiger mon tutoriel. Il y a plein d'autres tutoriels sur Jimdo mais la traduction automatique de Google ne fonctionne pas de façon optimale... :/
  • http://jdm.jimdo.com/2011/12/06/js-page/ : ce site chinois propose une version améliorée du script que je vous ai proposé, car il ajoute des flèches de défilement qui coupe le bloc de pagination. Ce script est utile quand le nombre de pages devient trop grand. Il est opérationnel sur le blog du site.
  • Pour ceux qui ont un design personnel, il peut être utile d'utiliser le 3e niveau de navigation de Jimdo pour paginer automatiquement et "réellement" le blog. Serhiy Hembarevskyy utilise cette méthode sur son remarquable blog consacré à Jimdo et à Weebly (jetez-vous dessus si vous ne l'avez déjà fait !) Il a écrit un article expliquant comment créer une autopagination du blog et l'a assorti d'une démonstration. J'ai tenté d'appliquer sa méthode, mais le code est super super difficile à mettre en oeuvre donc j'ai abandonné... Peut-être serez-vous plus pugnace ? Le tutoriel est par ici :

Bonne lecture !

Vous l'utilisez aussi ?

Écrire commentaire

Commentaires : 22
  • #1

    Happlay (vendredi, 25 janvier 2013 20:36)

    Merci beaucoup pour ce tuto Isa !

  • #2

    Happlay (mardi, 05 février 2013 19:23)

    Dis moi, c'est possible d'appliquer cela sur une boite <div> à la quelle on rajoute une "id" de sorte à faire défiler du contenu sur la page sans article de blog ?

  • #3

    aloeverasante (mercredi, 13 février 2013 23:39)

    a voir plus tard, merci en tous cas

  • #4

    Rigaud Mickael (dimanche, 31 mars 2013 19:25)

    Super pratique!!

  • #5

    nature-paysdesavoie (samedi, 18 mai 2013 21:40)

    Bonjour Isa,
    J'avais mis en place la pagination automatique sur mon site comme tu l'expliques dans ton tuto et ça fonctionnait bien. Depuis aujourd'hui, je n'ai plus la pagination. J'ai réinstallé le code dans un widget html, rien n'y fait... Je vois également que sur ton blog, la pagination n'y est plus non plus. Y aurait-il un problème du côté de Jimdo ? Je ne vois pas de solution et c'est embêtant car mon blog devient trop long pour une seule page. Merci d'avance.

  • #6

    Isabelle (dimanche, 19 mai 2013 00:02)

    Bonjour !
    Un coup d'oeil au code source de ta page et je vois que tu as mélangé le code pour la barre de navigation inférieure avec le code pour la pagination supérieure. C'est pour cela que ça ne marche plus.
    Mon conseil : efface tous les widgets HTML de ta page et recommence à zéro. Commence par installer le code de la pagination inférieure puis copie-colle le bon code pour la pagination supérieure. Et tout marchera à merveille ;)
    A bientôt !

  • #7

    nature-paysdesavoie (dimanche, 19 mai 2013 11:45)

    Bonjour Isa, Merci pour ta réponse.
    J'ai tout refait mais ça ne marche toujours pas...
    Odile

  • #8

    Isabelle (dimanche, 19 mai 2013 18:16)

    Bonjour Odile !
    Pourtant, je viens de visiter ton site et tout me semble en ordre. Il y a bien une double pagination en haut et en bas, et elle fonctionne. Vide peut-être le cache de ton navigateur ou visite ton site avec un autre navigateur ?
    A bientôt !

  • #9

    Odile (dimanche, 19 mai 2013 20:55)

    Bonsoir Isa,
    J'ai vidé complètement le cache, pas mieux... J'ai regardé mon site sur un ordinateur qui fonctionne avec Windows 8 et Chrome (moi, j'ai Windows 7 et IE 9) et ça marche. Peut-être que toi aussi tu as un autre navigateur que IE. Cela voudrait donc dire que le problème vient du navigateur et que tous les visiteurs qui ont IE n'auront pas la pagination ? (et pourtant, il y a quelques temps, la pagination fonctionnait bien sur mon ordinateur). Y a-t-il une solution ?
    Merci d'avance.
    Odile

  • #10

    Isabelle (jeudi, 04 juillet 2013 17:28)

    @Odile : je ne sais que dire. Etant sous Mac, je n'utilise pas IE ; mais déjà avant, j'évitais IE sur PC car c'est une poubelle (même Jimdo a annoncé qu'il arrêtait le support de IE8 dans 15 jours, c'est dire !) Vraiment, je ne vois pas ce qui peut empêcher IE d'afficher le code... mais je ne suis pas à même de corriger / amender le code fourni pour rectifier le tir... J'espère que je problème s'est réglé depuis ?

  • #11

    Odile (mardi, 16 juillet 2013 10:12)

    Bonjour Isa,
    Oui, maintenant ça marche sur IE, mais j'ai quand même installé Google Chrome en navigateur principal.
    Par contre, je pense qu'il va y avoir un souci si le nombre de pages est trop important, car il n'y a pas de flèches de défilement dans ton code. J'essaie d'installer le code du site chinois http://jdm.jimdo.com/2011/12/06/js-page/ mais il y a deux idéogrammes dans son code !!! Je ne désespère pas...
    A bientôt

  • #12

    Odile (mercredi, 17 juillet 2013 18:08)

    Bonjour Isa,
    Ca y est... J'ai pu installer la pagination avec flèches de défilement en utilisant le code fourni par le site chinois dont tu as parlé.
    Et ça marche très bien !
    Merci beaucoup Isa pour tes conseils
    A bientôt

  • #13

    Isabelle (vendredi, 19 juillet 2013 14:20)

    @Odile : bravo pour ta ténacité et pour le résultat, très fonctionnel en effet ! Tu es allée au bout des idéogrammes avec succès ;)

    Cela dit, je me permets une petite remarque : il faut que tu gardes à l'esprit qu'au final on ne charge qu'une seule trèèèèès longue page quand on arrive sur ton blog. Le code de la pagination ne fait que cacher/montrer des parties de cette page en simulant un découpage, mais en réalité le navigateur de ton visiteur doit charger tous les billets, les textes, les images... d'un seul coup. Autrement dit, à terme, si tu veux éviter que ta page mette 30 secondes à se charger, il va falloir sans doute renoncer à afficher tous les billets sur cette page et mettre en place un système d'archives. Déjà à l'heure actuelle, quand on clique sur la page 3 ou 4 de la pagination, les photos des billets ne s'affichent pas car la page est trop lourde et le navigateur peine à aller les "chercher"... ce qui est dommage :/

    Pour simuler des archives (mensuelles et catégorielles) sur un Jimdo blog, c'est facile. J'ai écrit un tuto ici : http://realia.jimdo.com/personnaliser-le-blog/archiver-les-billets-du-blog/)

  • #14

    nature-paysdesavoie (vendredi, 19 juillet 2013 21:55)

    Bonsoir Isa
    Merci pour ton message et tes remarques. Avec ton tuto, j'ai déjà créé des catégories (par région) et j'ai créé aussi "année 2012" et "année 2013". Je pense effectivement qu'il faut que j'archive par mois l'année 2013.
    Mais il y a quelque chose que je n'ai pas compris. Que devient la page initiale du blog ? (la première page dans le menu "accueil/blog") Faut-il que j'affecte à tous mes anciens billets la catégorie : mois-2013 afin qu'ils se rangent dans la page concernée et ensuite je supprime cette page principale ?
    Ensuite, les nouveaux billets iront directement dans la page du mois ?
    Je te remercie d'avance pour ta réponse. Bon Week-end. Odile

  • #15

    aloeverasante (vendredi, 30 août 2013 16:02)

    Je commence a avoir trop de billet dans mon blog et ma page est longue à charger, et je vois qu'avec ta solution ce sera pareil alors je vais certainement
    1 dupliquer la page de mon blog 3 ou 4 fois (vu que nous avons cette option de dupliquer une page) pour ensuite
    2 la divisé en 3 ou 4 pages en supprimant des lots d'articles par dates
    3 et ensuite les relier a des numéros de pages en bas de chaque pages

    peut etre que cela permettra d’accélérer le chargement
    et ensuite bien sur je cache les pages en sous-pages du blog

    qu'en penses tu Isabelle?
    je ne sais pas si j'ai été clair ;) c'est un peu comme archiver les billets mais par dates et les cacher
    j'essayerais

  • #16

    Isabelle (vendredi, 04 octobre 2013 21:22)

    Bonjour,
    J'arrive biiiiiien après la bataille et je vois sur vos deux blogs que vous avez trouvé des solutions l'un et l'autre ;) En tout cas, la page d'accueil se charge plus rapidement. Mais j'aimerais vraiment beaucoup que Jimdo se penche sur un système de pagination fonctionnelle et automatique des billets du blog. Les développements se focalisent sur l'eboutique au détriment du blog ces derniers temps...
    A bientôt !

  • #17

    adoptionchats92 (dimanche, 08 décembre 2013 10:46)

    Bonjour,

    J'ai bien lu votre article, que je trouve très intéressant, mais voila sur mon site cela n'apparaît pas comme chez vous. Peut-être est-ce du au fait que je n'ai pas l'onglet "affichage du blog", et j'ai pu seulement entrer le code de la pagination inférieure dans "widget/html".

    Du coup, j'ai 10 articles sur mon blog que je n'arrive pas à faire apparaître, en plus de ne pas avoir de pagination. Comment dois-je faire ?
    Voila l"adresse de la page en question : http://adoptionchats92.jimdo.com/adoption-de-nos-chats-et-chatons-d-antony/

    Au plaisir de vous lire et de votre patience.

    Bien cordialement.

    Vialade Laetitia.

  • #18

    adoptionchats92 (dimanche, 08 décembre 2013 11:06)

    Re-bonjour !

    Finalement j'y suis arrivé en paginant à partir de la première page de mon blog !

    Bien merci pour cet article !

    V.L

  • #19

    adoptionchats92 (dimanche, 08 décembre 2013 11:57)

    Bonjour ! Désolé, finalement je n'y suis pas arrivé.
    Vraiment désolé mais l'informatique je suis novice !
    En faite j'ai vraiment fait comme vous avez dit, sauf que c'est impossible d'avoir certains articles sur ma page (pas plus de cinq pour l'adoption des chats), donc pas de pagination non plus...
    Je ne sais vraiment pas comment faire.

    Au plaisir de vous lire !

  • #20

    Parendel (mardi, 10 décembre 2013 10:44)

    Merci ce code marche a la perfection !

  • #21

    Isabelle (lundi, 20 janvier 2014 15:17)

    @adoptionchats92 : peut-être que vous n'avez pas assez d'articles pour que la pagination s'affiche, tout simplement ?

  • #22

    joellecm (vendredi, 24 janvier 2014 11:32)

    Merci pour ce billet très intéressant et fonctionnel sur mon site.
    J'adore votre site plein d'astuces qui est accessible pour tout le monde et surtout pour les novices en informatique comme moi! :-)

Ruban