Défilement infini sur les articles

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)]&nbsp;[(#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.

updated on 13 February 2019

Discussion

Aucune discussion

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom