Zpip est structuré en blocs de contenu organisés entre eux par un squelette ossature, body.html. Cette architecture peut être étendue et mise à profit pour mettre en place des fonctionnalités avancées.
Définir ses propres blocs
Le squelette Zpip propose un découpage par défaut en 6 blocs de contenu : 3 blocs communs (en-tête, barre de navigation, pied) et 3 blocs déclinés par page (contenu, navigation, extra). A cela s’ajoute le head
qui est partiellement décliné par page.
Cette ossature commune qui fait partie du référentiel utilisé pour la construction des thèmes a été pensée pour couvrir la plupart des besoins.
Néanmoins, dans certains projets, il peut être nécessaire de mettre en place un autre découpage logique des blocs dans la page.
Zpip permet cela au moyen de la déclaration d’une variable globale. Dans votre fichier mes_options.php
, il suffit de lister les blocs que vous voulez utiliser sur votre projet.
Par exemple, pour ajouter un bloc fonctionnel appelé « more » qui présentera des informations complémentaires, il suffit d’écrire :
// ajouter un bloc more/ qui contient les forums
$GLOBALS['z_blocs'] =
array('contenu', 'navigation', 'extra', 'head', 'more');
On retrouve les 4 blocs par défaut ayant une déclinaison par page dans Zpip, et le bloc more
ajouté dans notre cas.
La seule obligation sur l’ordre de figuration des blocs est de placer en premier celui qui affiche le contenu principal (ici contenu
) et qui sera utilisé comme bloc maître.
Les squelettes de chaque bloc sont rangés dans un dossier de même nom (on aura dans notre cas un dossier more/
dans le dossier squelettes
). A l’exception du bloc de contenu principal, tous les autres blocs doivent proposer un squelette dist.html
qui affiche le contenu par défaut pour les pages n’ayant rien défini pour ces blocs.
var_zajax
Le découpage existant de la page en blocs logiques permet de faciliter le chargement partiel de page en ajax.
Ainsi, Zpip permet, sans aucune modification des squelettes, de ne charger qu’un morceau de page. Pour cela, il suffit d’ajouter le paramètre var_zajax=nomdubloc
à l’url de la page concernée.
Par exemple, pour ne charger que le contenu de la page de login, il suffira d’écrire l’url spip.php?page=login&var_zajax=contenu
Cette facilité peut être mise à profit pour réaliser des popin qui se dégradent proprement en l’absence d’ajax.
Par exemple, si l’on veut ajouter un lien vers la page de login, pour s’identifier, on écrira habituellement dans le squelette :
<a href="[(#URL_PAGE{login}|parametre_url{url,#SELF})]">Se connecter</a>
Ce lien fonctionne dans tous les cas. Le paramètre url
permet d’indiquer de revenir sur la même page après l’identification.
On peut ensuite enrichir ce lien d’une directive javascript, pour ne charger que le formulaire de connexion, dans une popin :
<a href="#URL_PAGE{login}" onclick="jQuery.modalbox('[(#URL_PAGE{login}|parametre_url{url,#SELF}|parametre_url{var_zajax,contenu})]');return false;" >Se connecter</a>
Dans ce cas, si on dispose de javascript, seul le contenu de la page de login sera affiché dans une boite modale, sans quitter la page en cours. Mais si on ne dispose pas de javascript, le lien se comportera normalement, en nous envoyant sur la page de login complète.
Le point fort de cette technique est qu’on ne met en place et maintient qu’une seule page de login. Si on vient à faire une modification sur le contenu de cette page, les deux scenarii seront automatiquement mis à jour. On peut donc très facilement et rapidement enrichir l’expérience utilisateur à l’aide de javascript et d’ajax sans devoir compliquer la charge de développement !
Ajax Parallel Loading
Le chargement parallèle de blocs de contenu en ajax est une technique proposée pour améliorer le ressenti utilisateur. Elle consiste à construite la page dans des processus parallèles au lieu d’un seul bloc.
La technique est détaillée dans cet article sur le blog.
Pour activer le chargement séparés de certains blocs, il suffit de les déclarer dans un define dans votre fichier mes_options
:
// activer le chargement parallele sur les blocs contenu et more
define('_Z_AJAX_PARALLEL_LOAD','contenu,more');
Aucune autre modification du squelette n’est nécessaire. Pour les blocs ajoutés à Zpip (comme ici le bloc more
) il est simplement nécessaire de placer dans le dossier correspondant (ici more/
) le squelette z_apl.html
recopié depuis le dossier contenu/
de Zpip (sans aucune autre modification).
Lors de la construction des pages, Zpip envoie à la place de ces blocs un morceau de javascript qui va déclencher le chargement ajax du bloc et le charger dans la page du navigateur.
Comme le basculement entre chargement ajax parallèle et chargement complet peut se faire dynamiquement, Zpip peut prendre en charge
- les robots d’indexation en leur servant la page complète,
- les utilisateurs sans javascript, qui sont détectés au premier coup par une redirection dans un
<noscript>
, et ensuite repérés par un cookie pour recevoir toujours la page complète.
Ainsi, APL ne dégrade pas le référencement du site, et n’est pas une barrière à l’accessibilité aux utilisateurs dépourvus de javascript !
La mise en œuvre simple et rapide de cette fonctionnalité innovante, dans le respect de tous les utilisateurs, montre comment l’architecture et l’organisation de Zpip et son découpage des pages en blocs fonctionnels est pertinent. Par la rationalisation qu’il amène, il ouvre la porte vers de nouvelles possibilités plus compliquées à mettre en place auparavant.
Discussions par date d’activité
10 discussions
vraissemblablement il faut que mes_options.php soit dans le dossier /config , et non dans /squeletes pour que la definition des blocs prennent par défaut le squelette dist.html
Répondre à ce message
J’utilise cette fonctionnalité pour afficher un formulaire d’edition d’article depuis l’espace public.
J’utilise aussi le plugin Ckeditor.
Le problème que je rencontre, c’est que lorsque le popin s’affiche, j’ai bien le formulaire mais Ckeditor n’apparait pas.
Par contre quand je me rend sur la page du formulaire, Ckeditor est bien présent.
Je suppose que le problème vient du chargement qui ne s’effectue uniquement sur le contenu.
Y’a t’il une solution pour pouvoir charger en même temps Ckeditor ??
Merci
Répondre à ce message
Ce code est-il nécessaire pour la gestion des INCLURE de ZPIP ou bien seulement pour que ZAJAX fonctionne ?
Autrement dit, si je n’utilise pas ZAJAX, faut-il vraiment déclarer les nouveaux blocs ? Il semble que ça marche sans, mais y aura-t-il un problème par ailleurs ?
je pense qu’il faut les déclarer...
Répondre à ce message
Bonjour,
Très intéressante fonctionnalité.
Je voudrais savoir si dans un lien de type
[(#URL_ARTICLE|parametre_url{var_zajax,contenu})] class="boxIframe boxWidth-800px boxHeight-600px"
Il serait possible de profiter de la fonctionnalité JQuery de load, qui permet de ne charger que le div demandé.
$('#result').load('ajax/test.html #container');
On pourrait ainsi avoir
Ce serait carrèment bien
merci
Répondre à ce message
Bonjour,
Quelques soucis avec parallele loading. (sur les colonnes ’navigation’ et ’extra’ du site en dev
Lorsque je l’active, autocomplete du plugin messagerie ne fonctionne pas.
Lorsque je le désactive, le dependent_select de recherche avancée ne fonctionne plus et grosse surprise.... je n’ai plus de bloc « extra » dans la page « mon atelier » - tout est dans le bloc « navigation » !?
Je me réponds,
J’avais une balise javascript mal fermée.
Toujours un souci avec le dependent_select, mais la solution ne doit pas être loin....
Répondre à ce message
Bonjour,
j’ai un petit problème avec le parallèle load.
Lorsque celui-ci est activé, j’ai des erreurs HTML.
C’est pareil chez vous ?
Cordialement
ju
Mon rapport :
Suis-je le seul à avoir un code invalide à cause de cette option ?
Répondre à ce message
Bonjour,
j’utilise le code suivant :
mais j’aimerais contrôler les dimensions de la fenêtre ?
merçi par avance
Répondre à ce message
Concernant le nouveau/futur modèle de box, est ce que ca veut dire qu’il faut que les thèmes prennent en compte ce modèle ?
En regardant dans la source de la page d’exemple, on trouve 2 nouveaux lien css, donc pour le thème : 2 choix : soit création de 2 fichiers box.css et box_skin.css remplaçant les css par défaut, soit surcharge dans habillage.css .
Dans le 2e cas, on ajoute 2 nouveaux fichiers inutile, c’est dommage (déjà que pour certain style.css est inutile) Serait il possible d’avoir une option dans les thèmes pour ne pas ajouter les 2 css ? Envisage tu une autre solution ?
Merci
ce genre de question qui concerne un développement en cours est plutôt à poser sur la liste spip-zone@rezo.net
Oups :)
Désolé, je fais un retour via spip-zone, mais comme la doc est à jour sur les box ici. :rougedehonte :
Répondre à ce message
A l’adresse http://files.spip.org/spip-zone/ où l’APL est installé.
Lorsque je clique sur la lettre B dans la liste des liens en haut à gauche, je devrais tomber sur http://files.spip.org/spip-zone/#balise_session.
Au lieu de quoi, de temps en temps (j’ai l’impression que c’est si tu charge deux fois la page mais pas sûr) je tombe sur http://files.spip.org/#balise_session.
En désactivant JS, pas de souci.
Répondre à ce message
Bonjour,
Je teste ce varzajax sur une page article ou s’affichent les titres de ses évènements.
Le but est de cliquer sur le titre de l’évènement et d’en voir les détails dans une popin
Je ne sais pas si c’est possible ou alors si c’est moi qui merdouille mais la popin s’ouvre toute noire et la roue tourne inexorablement.
Dans l’article j’ai :
(je coupe les lignes exprès)
J’ai une page page-agenda dans /contenu
qui contient seulement un appel au modèle
#MODELE{evenement_vevent}
si j’ai bien compris je n’ai pas besoin de redéclarer de bloc puisque page-agenda existe ?
merci
dd
J’ai trouvé : je n’avais pas mis le
|parametre_url
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 : |