Le principe
Voici une représentation de ce que l’on veut obtenir
Cette page est décomposée comme suit
- Un titre
- un bloc Contrôleur composé d’une liste d’items
- un bloc Vue qui va recevoir le contenu sélectionné
La structure de la page HTML
Dans le répertoire squelettes/, on crée une page actualites.html
<html>
<head>
<title>#NOM_SITE_SPIP</title>
#INSERT_HEAD
</head>
<body>
<h1>Journal Blabla</h1>
<div class="container">
<INCLURE{fond=inclure/liste_actus, env} />
<INCLURE{fond=inclure/vue_actu, env, ajax=vue_actu} />
</div>
</body>
</html>
Explication :
- Le HTML reprend la découpe en blocs :
- Chaque bloc correspond à un INCLURE.
- Le point vraiment remarquable ici est la présence de l’attribut
ajax=vue_actu
dans le deuxième INCLURE. Explications dans la documentation officielle https://www.spip.net/fr_article3753.html
- Dans le partie
<head>
du HTML, on ajoute la balise#INSERT_HEAD
pour que SPIP charge les scripts nécessaires à l’Ajax
Le bloc Contrôleur : inclure/liste_actus.html
Il s’agit juste d’une simple boucle SPIP ARTICLES
.
<div class="liste_actus">
<h2>Derniers numéros</h2>
<B_actu_controleur>
<div class="liste_actus_inner">
<BOUCLE_actu_controleur(ARTICLES){0,10}{!par date}>
<a href="#URL_ARTICLE" class="liste_actus_item" data-id="#ID_ARTICLE">
<h3>#TITRE</h3>
[<div class="liste_actus_intro">
(#INTRODUCTION|couper{25})
</div>]
</a>
</BOUCLE_actu_controleur>
</div>
</B_actu_controleur>
</div>
Dans cet exemple, nous listons les 10 derniers articles.
Pour nous faciliter la programmation javascript, sur le lien vers des articles, on ajoute un attribut data-id
qui contient l’id_article
Le bloc Vue : inclure/vue_actu.html
Le bloc Vue doit afficher un seul article.
Le critère de la boucle ARTICLES à utiliser est donc {id_article}
<BOUCLE_actu_vue(ARTICLES){id_article}>
<div class="vue_actu">
[<div class="vue_actu_surtitre">(#SURTITRE)</div>]
[<h1 class="vue_actu_titre">(#TITRE)</h1>]
#LOGO_ARTICLE
[<div class="vue_actu_texte">(#TEXTE)</div>]
</div>
</BOUCLE_actu_vue>
Ajouter l’habillage et l’interactivité
La structure HTML est en place !
Nous pouvons l’appeler par l’adresse
http://monsite.org/spip.php?page=actualites
Nous allons maintenant ajouter une feuille de style pour habiller la page et un javascript pour gérer l’appel des blocs.
Complétons le <head>
de la page squelettes/actualites.html
<head>
<title>#NOM_SITE_SPIP</title>
[<link href="(#CHEMIN{css/actu.css})" rel="stylesheet" type="text/css">]
#INSERT_HEAD
<script src="#CHEMIN{js/actu.js}" type='text/javascript'></script>
</head>>
Le javascript
Voici le javascript, js/actu.js
// lancer le js quand le DOM est prêt
$(document).ready(function(){
// detecter les clics sur les articles
$('.liste_actus_item').on('click', function(event){
// ne pas propager l'evenement javascript
event.preventDefault();
// on recupere l'id de l'article grace à l'attribut data-id
var id_article_current = $(this).attr("data-id");
// on ajoute une classe "active" sur le bloc en cours
$('.liste_actus_item.active').removeClass('active');
$(this).toggleClass('active');
// on appelle le fonction ajaxReload
// pour rafraichir le bloc "vue actu" avec comme argument id_article
$(".debug").html("Appel de l'article: " + id_article_current);
ajaxReload('vue_actu', {
args:{id_article:id_article_current},
callback:function(){
$(".debug").html("Article " + id_article_current + " chargé !");
},
});
});
});
Tester chez soi
Voici un zip avec l’exemple complet.
Placer ses fichiers dans le répertoire squelettes/ de votre site SPIP et appelez la page démo :
http://monsite.org/spip.php?page=actualites
Aucune discussion
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 : |