C’est l’occasion d’utiliser le critère {ajax}
qui permet exactement ceci lors de l’appel d’une inclusion.
La doc de SPIP est comme d’habitude très claire et très précise.
Lien
- ajax pour les inclure sur spip.net
Prenons l’exemple d’une page d’accueil où sont affichés les 5 derniers billets. Nous allons ajouter un lien « Billets plus anciens » au dessous du 5e billet, qui déclenchera l’affichage de 5 billets supplémentaires.
Sur le squelette sommaire.html
, la boucle qui affiche les 5 derniers articles se présente ainsi :
<BOUCLE_recents(ARTICLES){!par date}{0,5}>
<h1><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></h1>
...
</BOUCLE_recents>
Tout d’abord déplaçons cette boucle sur un squelette inclus inc-recentposts.html
Sur sommaire.html
, le squelette est inclus avec
<INCLURE{fond=inc-recentposts}{env}{nb=#ENV{nb,5}}{ajax}>
La variable nb
sert à donner le nombre d’articles à afficher [1], par défaut égal à 5, le critère {ajax}
indique que seul le fichier inclus devra être rafraîchi lorsqu’on clique un lien portant la classe ajax
.
Dans le fichier inclus, le critère d’itération de la boucle principale doit donc être modifié pour afficher les nb
premiers articles et non les 5 premiers.
<BOUCLE_recents(ARTICLES){!par date}{0,#ENV{nb}}>
<h1><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></h1>
...
</BOUCLE_recents>
Au bas de la boucle, ajoutons un lien ajaxé qui déclenche le rafraîchissement du squelette inclus en incrémentant nb de 5.
<p><a class="ajax" href="[(#SELF|parametre_url{nb,[(#ENV{nb}|plus{5})]})]">Billets plus anciens</a><p>
A ce stade ça fonctionne, mais au moment du rafraichissement le focus revient sur le haut du fichier inclus, la page remonte au premier billet. Pour plus de lisibilité, il vaut mieux que la page reste où elle est.
Utilisons une ancre, nommée #more
, placée sur le dernier élément affiché avant ajout, soit le nb-5e post.
Pour ajouter cette ancre, l’affichage du détail des posts devient :
<BOUCLE_recents(ARTICLES){!par date}{0,#ENV{nb}}>
<h1[ (#COMPTEUR_BOUCLE|plus{5}|=={#ENV{nb}}|?{id,""})="more"]><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></h1>
...
</BOUCLE_recents>
L’appel ajaxé des billets supplémentaires devient donc :
<p><a class="ajax" href="[(#SELF|parametre_url{nb,[(#ENV{nb}|plus{5})]})#more]">Billets plus anciens</a><p>
Et voilà !
Exemple sur cette page : http://another.teacher.free.fr/
Discussions par date d’activité
13 discussions
Excellent.
Petites critiques constructives :
- on recharge la partie déjà chargée, ça paraît inutile (mais c’est peut-être plus difficile à faire)
- à partir du moment où on clique c’est qu’on veut en voir plus, il faudrait en donner tout de suite pas mal plus (c’est idiot de cliquer pour 5 liens, puis 5 autres, puis 5 autres)
pour le nombre de billets à afficher au départ et à chaque voyage, c’est bien sûr adaptable aux besoins et aux envies de chacun, au besoin par CFG. chez moi de 5 en 5 ça me convient bien pour l’instant ^^
Répondre à ce message
Yes bravo !!! !
Répondre à ce message
C’est top !
Il semble que sur le lien qui sert de démo il te manque le #more sur le h1 (il est bien indiqué sur le lien en revanche).
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 : |