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.
defilement_infini.zip
Vos commentaires
# Le 14 février à 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 à 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.
# Le 14 février à 09:35, par ?
En réponse à : Défilement infini sur les articles
Impossible à faire fonctionner. Est-il possible de le voir fonctionner quelque part ?
Répondre à ce message