SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 204 visiteurs en ce moment

Accueil > Navigation > Défilement infini > Défilement infini sur les articles

Défilement infini sur les articles

6 septembre 2011 – par jfefe – 25 commentaires

14 votes

Basé sur le code d’Arnaud Bosquet voici la procédure pour mettre en place un défilement infini sur les listes d’articles.

Installer le plugin

Installer le plugin à l’aide de l’archive zip ci-joint.

Le plugin utilise le pipeline jquery_plugins pour insérer un script javascript dans l’entête des pages.

Modifications à faire sur les squelettes

Pour faire fonctionner le javascript fourni Il faut ajouter quelques élements (principalement des attributs) aux squelettes.

Voici en exemple une boucle qui liste les 5 derniers articles de la rubrique en cours de consultation, classés du plus récent au plus ancien :

  1. <B_articles>
  2. <div class="liste articles" id="rub-#ID_RUBRIQUE">
  3. #ANCRE_PAGINATION
  4. <h2 class="h2"><:articles_rubrique:></h2>
  5. [<noscript><p class="pagination">(#PAGINATION{page})</p></noscript>]
  6. <div class="nb_com"><BOUCLE_totarticles(ARTICLES){id_rubrique}> </BOUCLE_totarticles>#TOTAL_BOUCLE</B_totarticles></div>
  7. <ul class="liste-items">
  8. <BOUCLE_articles(ARTICLES){id_rubrique} {!par date} {pagination 5}>
  9. #INCLURE{fond=inclure/article-resume,id_article,compteur=#COMPTEUR_BOUCLE}
  10. </BOUCLE_articles>
  11. <li class="loadmore">Chargement en cours...</li>
  12. </ul>
  13.  
  14. </div>
  15. </B_articles>

Télécharger

Cette boucle est à placer dans le squelette rubrique.html (ou contenu/rubrique.html si vous utilisez le plugin zpip).

La boucle ci-dessus appelle un fichier inclure/article-resume.html (fourni avec zpip) qui contient :

  1. <BOUCLE_articles(ARTICLES) {id_article} {statut?}>
  2. <li class="item hentry[ num-(#ENV{compteur})]"[ id="art-(#ENV{compteur})"] >
  3. <h3 class="h3 entry-title"><a href="#URL_ARTICLE" rel="bookmark">[(#LOGO_ARTICLE_RUBRIQUE||image_reduire{150,100})]#TITRE</a></h3>
  4. <div class="info-publi">[<abbr class="published" title="[(#DATE|date_iso)]">(#DATE|affdate_jourcourt)</abbr>][<span class="sep">, </span><span class="auteurs"><:par_auteur:> (#LESAUTEURS)</span>]</div>
  5. [<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
  6. <div class="meta-publi">
  7. <a class="lire-la-suite" href="#URL_ARTICLE"><:zpip:lire_la_suite:><span class="lire-la-suite-titre"><:zpip:lire_la_suite_de:> <em>#TITRE</em></span></a>
  8. <BOUCLE_nb_commentaires(FORUMS) {id_article}{plat} /> [(#TOTAL_BOUCLE|oui)
  9. <span class="sep">|</span>
  10. <a[ href="(#URL_ARTICLE|ancre_url{forum})"] class="nb_commentaires">[(#TOTAL_BOUCLE)]&nbsp;[(#TOTAL_BOUCLE|=={1}|?{<:zpip:commentaire:>,<:zpip:commentaires:>})]</a>
  11. ]
  12. <//B_nb_commentaires>
  13. </div>
  14. </li>
  15. </BOUCLE_articles>

Télécharger

Et le SEO dans tout ça...

Le contenu de la liste d’article est chargé dynamiquement lorsque l’internaute défile la page. Au chargement de la page seuls 5 articles sont affichés, donc un robot d’indexation verra uniquement ces 5 articles. Pour leur donner du contenu à indexer, la balise noscript est utilisée. Si javascript n’est pas activé alors on affiche la pagination standard de Spip.

Voir en ligne : http://plugins.spip.net/defilement_...

Dernière modification de cette page le 11 juin 2012

Retour en haut de la page

Vos commentaires

  • Le 17 mai 2013 à 10:07, par edith En réponse à : Défilement infini sur les articles

    Bonjour,

    Est-ce qu’une version pour spip 3 est prévue ?
    Je n’ai rien trouvé d’équivalent pour spip 3.
    Merci.

    • Le 26 septembre 2013 à 16:38, par Julien En réponse à : Défilement infini sur les articles

      Cela m’intéresse également.

      Up !

    • Le 10 octobre 2013 à 15:05, par Julien En réponse à : Défilement infini sur les articles

      Le plugin est compatible SPIP 3

      Il suffit de changer la compatibilité SPIP dans : plugin.xml [2.1.0 ;3.0.99]

      Pour ceux qui n’utilise pas zspip comme moi, enlever le id #contenu dans le fichier .js du plugin.

      Pour le reste j’ai suivi la procédure de « Graine de Jardins » plus bas

      Merci au propriétaire du plugin de faire un update de compatibilité.

      Merci.

    • Le 10 octobre 2013 à 17:50, par jfefe En réponse à : Défilement infini sur les articles

      Propriétaire du plugin ?! Le code est sur la zone et donc appartient à tous tout autant qu’à moi :) Please RTLG * !

      Je n’ai pas utilisé ce code depuis un bon moment... Si quelqu’un a une solution, un commit sur le dépôt SVN n’est pas interdit, bien au contraire !

      Ceci dit, j’ai prévu de le remettre à jour ces prochains temps.

      * Read The Lovely GPL

    • Le 10 octobre 2013 à 19:54, par Julien En réponse à : Défilement infini sur les articles

      Mais j sais pas comment faire... :-/

    • Le 1er décembre 2015 à 11:22, par spg En réponse à : Défilement infini sur les articles

      Bonjour,

      je viens de tester à plat le code proposé et j’obtiens comme décompte de boucle 5 (sur 47 articles en tout). Et l’infinite scroll ne marche pas bien que le js soit chargé. Pourriez-vous donner un exemple complet du code ? Je crois qu’on est plusieurs à bloquer sur ce point.

    Répondre à ce message

  • Le 26 avril 2013 à 15:44, par Graine de Jardins En réponse à : Défilement infini sur les articles

    Bonjour,
    j’essaye maintenant de filtrer la liste des articles de la rubrique par des critères : id_mot et recherche.

    Ca fonctionne jusqu’au premier chargement ajax mais dès ce moment les
    critères sont oubliés et ne passent pas dans le squelette « defilement_infini_articles » du plugin (qui commence par #HTTP_HEADER).

    Techniquement je ne vois pas comment faire ! Help !
    Une idée ?
    Jacques

    • Le 18 mai 2015 à 19:48, par Bernt En réponse à : Défilement infini sur les articles

      Bonjour,
      Avez-vous trouvé une solution pour filtrer avec des critères : id_mot et recherche ?

      D’avance merci.

      PS : J’ai réussi sans problème à installer ce plugin sur un SPIP 3 et le rendre opérationnel sur la page d’accueil du site http://www.ruedesboulets.com/

    • Le 2 juillet 2015 à 16:46, par Patrick En réponse à : Défilement infini sur les articles

      Bonjour,
      Je cherche désespérément à faire marcher ce plugin, qui ne veut pas faire défiler mes articles...
      J’ai bien suivi la démarche de Graine de Jardin à la lettre et les instructions d’installation.
      J’ai une pagination à 5 articles qui s’affiche, sans plus.
      J’ai chargé cette archive ici.
      Je suis avec le dernier spip v2, un squelette perso, et en local.
      J’ai regardé les sites qui marchent.
      Pour toute réponse, merci.
      Bonne journée.

    • Le 31 juillet 2015 à 11:12, par Patrick En réponse à : Défilement infini sur les articles

      Bonjour,
      No news good news...
      J’obtiens la page sommaire voulue mais je ne vois que les 5 premiers articles souhaités du site.
      J’ai placé dans mon sommaire la liste des articles du site, mais elle est longue et s’affiche totalement sans infinite scroll, en fait comme si je n’avais pas installé le plugin...
      Merci par avance à qui donnerait la solution.

    Répondre à ce message

  • Le 4 septembre 2012 à 16:20, par Graine de Jardins En réponse à : Défilement infini sur les articles

    Comme j’ai eu un peu de mal à faire fonctionner le plugin sur un SPIP non ZPIP, voici comment j’ai fait :

    • Copier la première boucle dans le corps d’une page RUBRIQUE du dossier squelettes
      il faut modifier l’inclure :
      #INCLURE{fond=article-resume,id_article,compteur=#COMPTEUR_BOUCLE}
    • Créer un fichier article-resume.html dans le dossier squelettes. Y copier la seconde boucle
    • Copier le fichier defilement_infini_articles.html du plugin dans le dossier squelettes. Remplacer la ligne 4 par :
      [(#INCLURE{fond=article-resume,id_article})]

    Et sinon, bravo pour le plugin !
    Jacques

    Répondre à ce message

  • Le 26 août 2012 à 14:04, par enamilak En réponse à : Défilement infini sur les articles

    Bonjour, est-ce qu’une version pour SPIP 3 serait en préparation ? Ça me serait vraiment utile :) Merciiii

    Répondre à ce message

  • Le 4 avril 2012 à 18:24, par Artlogic En réponse à : Défilement infini sur les articles

    Salut,

    Cela pose un problème un problème sur ma rubrique : Si last est bien communiqué à "defilement_infini_articles.html en ajax pour le premier lot d’articles, il ne l’est plus pour les lots suivants. De sorte que l’on obtient rapidement des doublons dans les listes d’articles :

    Exemple avec 13 articles :

    1-2-3-4-5 (Boucle dans la rubrique.html : ok on obtient les 5 premiers articles)
    6-7-8-9-10 (Premier chargement en ajax : Envlast vaut bien 5, tout va bien.)
    11-12-13 (Second chargement en ajax : Envlast ne retourne rien
    11-12-13 (doublons)

    une idée de ce que ça peut être ?

    Répondre à ce message

  • Le 14 février 2012 à 11:47, par ? En réponse à : Défilement infini sur les articles

    Dans defilement_infini.js il y a #contenu qui est propre à zpip. En l’enlevant on résoud une première moitiée du problème. La seconde moitiée revient à ce que la page ’./ ?page=infiniscroll_articles ne semble pas exister dans le plugin.

    • Le 14 février 2012 à 14:08, par jfefe En réponse à : Défilement infini sur les articles

      Dans le fichier js/defilement_infini.js, l’appel était incorrect (suite au renommage du plugin). Il faut modifier ce fichier ou attendre un peu le temps que le zip soit regénéré.

    Répondre à ce message

  • Le 11 novembre 2011 à 18:13, par barbarie En réponse à : Défilement infini sur les articles

    Bonjour,

    J’ai installé le plugin et recopié la boucle exemple mais je n’arrive pas à faire fonctionner le plugin (j’utilise bien zpip). Y a-t’il des sites qui ont réussi à le faire fonctionner ?

    Merci.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mise à jour automatique des plugins

    5 octobre 2009 – 156 commentaires

    Une nouvelle lame du Couteau Suisse permet de visualiser les plugins nécessitant une mise à jour, tout comme SPIP lui-même ! Présentation Rendons à César ce qui est à César, voici un extrait de la présentation du Couteau Suisse pour sa lame « Mise (...)

  • Plugin Modèles media

    25 avril 2011 – 170 commentaires

    Les modèles , et produisent chacun un résultat différent et ce résultat, pour les images, dépend du fait qu’elle soit dans le portfolio ou non. Ce plugin propose une nouvelle série de modèles ayant un comportement unifié et indépendant du mode des (...)

  • Refonte de l’identité graphique

    10 juillet – 68 commentaires

    Lors de la SPIP Party 2017 à Toulouse, un nouveau contributeur est venu nous présenter son travail sur une refonte du logo. Au delà de la refonte du logo, c’est une toute nouvelle identité graphique pour SPIP que Jordan nous propose. Voici une (...)

  • Mailsubscribers

    16 janvier 2013 – 306 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • Saisies

    27 mars 2010 – 490 commentaires

    Introduction Créer un formulaire est une tâche toujours un peu répétitive : les champs ont souvent les mêmes propriétés, le même accompagnement (message d’erreur, explication, ...) et la même structure HTML. Ce plugin est un outil pour les développeurs (...)

Ça spipe par là