Paginer automatiquement le blog - Aller plus loin avec Jimdo !

Menu
nike nike nike air max 270 hommes est tennis tennis plusieurs tailles entra?neur noir tachet 59b0d6

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 :

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... )

nike nike nike air max 270 hommes est tennis tennis plusieurs tailles entra?neur noir tachet 59b0d6

Où insérer les codes fournis ?

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

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

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 :

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

Paramétrer le nombre de billets à afficher par page

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


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...

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.

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 :

Acheter neuf Chaussures de saison Femme Katy Perry THE PERRY Mules,NIKE AIR MAX 90 97 ESSENTIAL Femme GRIS ROUGE CORAIL ABAISS,Adidas pour Hommes ÉquipeHommes t Soutien Adv Crème Baskets DB1550,nike air max 270 hommes w bo?te taille 10,Chaussures Hommes Adidas Originals Zx Flux De Course Synthétique,les hommes de new balance - new balance en ligne sur yoox royaume - uni - 11228354sw,Clarks Originals Femme Wallabee boots Maple daim D,converse all star filles filles rose taille 3,ac base adidas y hommes saikou blanc noir,Lyst Converse Chuck Taylor Tri Zip Hic Casual Chaussures in Rose,homme femme de short mod,Coréen Vans Iso Chaussures décontractées Hommes B102032 marine,Nike Air Zoom Pegasus Femme : Excellente Qualit,SCARPE UOMO ADIDAS MODELLO DB0471 BLU NUOVOnike zoom victoire 3 rio track field 835997-413 taille 12,5 bleu noir?,monsieur madame - prop,Adidas Originaux Cour Avantage Adidas Couleur Hommes Classique,VêteHommests femme chaussures Esprit comparez et achetez,havaianas haut photoprint noir livraison gratuite avec spartoo royaume - uni,fankou La Plage d' eacute;t eacute; pour Hommes Chaussons Chaussons Mar eacute;e de Mode Soft, antid eacute;rapants Pantoufles Cool,43, Marron - B07BRK5YS8 -,Baskets adidas Superstar femme Acheter en ligne pas chermessieurs et mesdames nike dame en saison tr aptitude chaussures de sport de qualit,femme libre tr flyknit nike taille 8,5 new box bright crimson 718785 600,Zapato mujer de piel de la marca Aga Shu modelo 1504,nike air max 95 wqs Femme chaux liquide vert satin sz 7 l',Puma TSUGI CAGE Trainers pomegranate puma Noir puma Blanc,Homme Nike Air Max Flair University Gold Baskets 942236 700,adidas PW Tennis Hu Homme: Chaussures et Sacs,Diesel Y01145 PR511 T5016 Homme Trainers,nike wmn est tanjun taille 6 noir blanc noir,

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

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... :/

nike nike nike air max 270 hommes est tennis tennis plusieurs tailles entra?neur noir tachet 59b0d6

  • 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 ?

Retour en haut de page Version standard