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.
No discussion
Add a comment
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.
Follow the comments: |