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 :
<B_articles>
<div class="liste articles" id="rub-#ID_RUBRIQUE">
#ANCRE_PAGINATION
<h2 class="h2"><:articles_rubrique:></h2>
[<noscript><p class="pagination">(#PAGINATION{page})</p></noscript>]
<div class="nb_com"><BOUCLE_totarticles(ARTICLES){id_rubrique}> </BOUCLE_totarticles>#TOTAL_BOUCLE</B_totarticles></div>
<ul class="liste-items">
<BOUCLE_articles(ARTICLES){id_rubrique} {!par date} {pagination 5}>
#INCLURE{fond=inclure/article-resume,id_article,compteur=#COMPTEUR_BOUCLE}
</BOUCLE_articles>
<li class="loadmore">Chargement en cours...</li>
</ul>
</div>
</B_articles>
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 :
<BOUCLE_articles(ARTICLES) {id_article} {statut?}>
<li class="item hentry[ num-(#ENV{compteur})]"[ id="art-(#ENV{compteur})"] >
<h3 class="h3 entry-title"><a href="#URL_ARTICLE" rel="bookmark">[(#LOGO_ARTICLE_RUBRIQUE||image_reduire{150,100})]#TITRE</a></h3>
<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>
[<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
<div class="meta-publi">
<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>
<BOUCLE_nb_commentaires(FORUMS) {id_article}{plat} /> [(#TOTAL_BOUCLE|oui)
<span class="sep">|</span>
<a[ href="(#URL_ARTICLE|ancre_url{forum})"] class="nb_commentaires">[(#TOTAL_BOUCLE)] [(#TOTAL_BOUCLE|=={1}|?{<:zpip:commentaire:>,<:zpip:commentaires:>})]</a>
]
<//B_nb_commentaires>
</div>
</li>
</BOUCLE_articles>
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.
Discussions par date d’activité
8 discussions
Bonjour,
Une version SPIP3 en cours ?
J’ai essayé de l’adapter avec la version actuelle - en suivant scrupuleusement les consignes de la discussion - mais le défilement infini ne fonctionne pas, il s’arrête à 5 articles...
Répondre à ce message
Bonjour,
Est-ce qu’une version pour spip 3 est prévue ?
Je n’ai rien trouvé d’équivalent pour spip 3.
Merci.
Cela m’intéresse également.
Up !
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.
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
Mais j sais pas comment faire... :-/
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
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
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/
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.
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
Comme j’ai eu un peu de mal à faire fonctionner le plugin sur un SPIP non ZPIP, voici comment j’ai fait :
il faut modifier l’inclure :
#INCLURE{fond=article-resume,id_article,compteur=#COMPTEUR_BOUCLE}
[(#INCLURE{fond=article-resume,id_article})]
Et sinon, bravo pour le plugin !
Jacques
Répondre à ce message
Bonjour, est-ce qu’une version pour SPIP 3 serait en préparation ? Ça me serait vraiment utile :) Merciiii
Répondre à ce message
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 ?
Salut,
Ce plugin avait été fait vite fait et ne l’utilisant pas je ne m’étais pas rendu compte de ce problème de doublons :\
Je viens de commiter une correction du script JS. Ce n’est plus nécessaire d’ajouter le balisage sur les li ([ num-(#ENVcompteur)]« [ id= »art-(#ENVcompteur)"] ) et le plugin devrait maintenant fonctionner out-of-the-box :)
A tester sur un zpip tout neuf, avis aux amateurs !
Ok j’attend ton commit et je fais un test.
Ne l’attend pas il est là : http://zone.spip.org/trac/spip-zone/changeset/60127 ^^
oups il manquait une portion de code... Prendre la dernière version du fichier JS et ça ira :)
Effectivement c’est maintenant fonctionnel. Merci.
Heu presque... Ca me génère plein d’erreur de js quand j’arrive en pied de page.
Salut
J’ai integré tes codes dans http://www.art-logic.info/Notre-actualite-nos-News et j’ai quelques soucis :
Je vais effectuer quelques corrections pour que l’xhtml passe à 100% w3c mais je ne pense pas que le problème vienne de là.
Merci de tes réponses.
Bonjour,
Je n’ai pas ce problème sur http://aternatik.org/articles-et-ressources/logiciels/ :\
A tester dans ton squelette, déplaces le div ’grande_boite’ hors du bloc qui contient la liste des articles.
Répondre à ce message
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.
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
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.
Impossible à faire fonctionner. Est-il possible de le voir fonctionner quelque part ?
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |