Squelettes "Z-core" sous SPIP 3 - astuces

Il n’est plus nécessaire, je pense, de présenter l’architecture des squelettes sous la nomenclature "Z". Beaucoup l’utilise aujourd’hui, moi le premier.

Préambule

Le plugin Z-core est l’héritage du plugin Zpip développé par Matthieu Marcillaud, Cédric Morin, Romy Têtue et un collectif SPIP. Z-core est le moteur offrant le découpage des squelettes. Il ne fournit pas de squelettes. C’est à nous ou au plugin choisi de fournir les pages qui vont bien.
C’est rapide et efficace. Il faut savoir aussi que les noms de blocs/zones ont changé par rapport à Zpip. Presque que chaque zone correspond à un répertoire.
C’est un peu complexe à appréhender au départ. Mais c’est un aspect "vite oublié" au profit de son efficacité.

Remarque

L’un des premiers jeux de squelettes offerts à la communauté SPIP utilisant cette mécanique zcore est le plugin "SPIP-r" développé par Cédric.
Toute la doc sur ce site : http://spipr.nursit.com/

Problématique

Il arrive parfois que l’on désire que la page sommaire ait sa propre architecture, différente du reste des pages classiques.
On pourrait ajouter des balises conditionnelles si on se trouve sur un #ENV{type-page}|=={sommaire} mais ça risque de faire lourd si votre mise en page est complexe.

Voici le code initial de structure.html fournit par Zcore :

[(#VAL{_Z_DOCTYPE}|defined|?{#VAL{_Z_DOCTYPE}|constant}|sinon{<!DOCTYPE HTML>})][
(#SET{class,[page_(#ENV{type-page,page})[ #ENV{type-page,page}_(#ENV{composition,''})]][ composition_(#ENV{composition})]})][
(#REM) http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/]
<!--[if lt IE 7 ]> <html class="[(#GET{class})][ (#LANG_DIR)][ (#LANG)] no-js ie ie6 lte9 lte8 lte7" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR"> <![endif]-->
<!--[if IE 7 ]>    <html class="[(#GET{class})][ (#LANG_DIR)][ (#LANG)] no-js ie ie7 lte9 lte8 lte7" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR"> <![endif]-->
<!--[if IE 8 ]>    <html class="[(#GET{class})][ (#LANG_DIR)][ (#LANG)] no-js ie ie8 lte9 lte8" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR"> <![endif]-->
<!--[if IE 9 ]>    <html class="[(#GET{class})][ (#LANG_DIR)][ (#LANG)] no-js ie ie9 lte9" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="[(#GET{class})][ (#LANG_DIR)][ (#LANG)] no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">
<!--<![endif]-->
	<head>
		<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>[

		(#REM) Debut du head particulier a chaque page
		pour inserer un title, des css particulieres(mais surchargees), ou des js *inline*
		]<INCLURE{fond=head/#ENV{type-page},env}>[

		(#REM) Partie commune a toutes les pages, sans env
		]<INCLURE{fond=inclure/head}>[

		(#REM) Fin du head particulier a chaque page, pour inserer des js specifiques par exemple
		pour inserer des js *externes*
		]<INCLURE{fond=head_js/#ENV{type-page},env}>
	</head>
	<INCLURE{fond=body,env}>
</html>

Zcore renvoie vers un body.html unique pour tout le monde.
Comment dire à Zcore/SPIP qu’on veut une mise en page particulière pour le sommaire ?

Astuce

Pour cela, on peut très facilement ajouter 2 ou 3 lignes de codes pour que SPIP sélectionne le body.html approprié pour le sommaire.
Comme dit plus haut et vu dans le code initial, Z-core envoie une variable d’environnement nommé type-page.
Une page sommaire.html aura pour variable type-page=sommaire. Pour un article, nous aurons type-page=article, rubrique type-page=rubrique, etc.

Le code magique

Pour se faire, on va remplacer <INCLURE{fond=body,env} /> par ceci :

#SET{body,body}
[(#CHEMIN{body_#ENV{type-page}.html}|?{#SET{body,body_#ENV{type-page}},#SET{body,#GET{body}}})]
[(#CHEMIN{body_#ENV{type-page}-#ENV{composition}.html}|?{#SET{body,body_#ENV{type-page}-#ENV{composition}},#SET{body,#GET{body}}})]
<INCLURE{fond=#GET{body},env} />

Explications

On initialise une variable body avec pour valeur par défaut "body".
Grâce à la première balise #CHEMIN [1], on va chercher l’existence d’un body_sommaire.html. Mais avec ce code, on va aussi regarder si body_article.html, body_rubrique.html ou autre existent. Sinon, on garde body.html par défaut.
La deuxième balise #CHEMIN va plus loin en regardant s’il existe une composition en plus de notre type de page. Soit pour une composition "ma_super_compo" pour mon article, Zcore/SPIP regardera l’existence de body_article-ma_super_compo.html. Si elle n’existe pas, on garde la valeur précédente de la variable "body".

Erratum du 17/01/2014

Attention
Il n’est pas nécessaire de faire tout cela. Rendons justice en pointant vers l’article de la doc expliquant cela : http://spipr.nursit.com/framework-z...

Grâce au message de Valéry dans le forum ci dessous, j’ai fouillé un peu plus dans le code de z-core et il s’avère qu’il n’est pas nécessaire d’utiliser le code ci-dessus pour le body.html
Z-core va détecter "naturellement" et sans artifice la présence de body-rubrique.html ou body-rubrique-ma_compo.html.

Mais le code ci-dessous est toujours d’actualité :

Aller plus loin

On pourrait étendre ce principe sur les zones de découpage dans notre body.html.
En effet, on pourrait avoir besoin pour un aside, d’une composition de rubrique particulière, un autre contenu que celui donner par aside/rubrique.html. Pour cela, ajouter en début de votre fichier body.html le code suivant :

[(#SET{html,#ENV{type-page}})]
[(#SET{html2,#ENV{type-page}-#ENV{composition}})]

On instancie 2 valeurs :

"html" qui contient le type de page ;
"html2" contient le type de page et la composition associée.

A la place de <INCLURE{fond=aside/#ENV{type-page},env} /> de body.html, mettre <INCLURE{fond=aside/#GET{aside},env} />.
Et la ligne juste au dessus, mettre ce code :

[(#CHEMIN{aside/#GET{html2}.html}|?{#SET{aside,#GET{html2}},#SET{aside,#GET{html}}})]

L’astuce est donc la même que plus haut. Pour une composition "ma_super_compo" pour une rubrique, on va chercher l’existence de aside/rubrique-ma_super_compo.html, sinon on prend aside/rubrique.html.

Et voilà !
A vous de tester si cette mécanique vous convient ou pas ! Pour ma part c’est testé et approuvé !

mardi 14 janvier 2014

par Teddy Payet

Langage et développement: Javascript, HTML
Frameworks: SPIP
Catégorie: Astuce, Notes de développement

Vos commentaires

# Le 16 janvier 2014 à 17:02, par Valéry

En réponse à : Squelettes "Z-core" sous SPIP 3 - astuces

Bonjour,

Merci pour ce billet toutefois je ne comprend pas la différence entre le comportement recherché et celui décrit ici :

http://spipr.nursit.com/framework-z#layoutsspecifiques

Valéry
# Le 16 janvier 2014 à 17:20, par Teddy Payet

En réponse à : Squelettes "Z-core" sous SPIP 3 - astuces

Hello,

Pour être tout a fait franc, je n’avais jamais fait attention a ce point sur la doc.
Par la suite, des tests que j’avais fait initialement, ce comportement (décris sur ton lien) ne s’est pas fait.

Pour le bout de code que j’ai fait, cela prend la composition en plus : body-rubrique-ma_compo.html. Ce que ne semble pas faire zcore nativement.
C’est la seule différence je pense.
# Le 17 janvier 2014 à 00:35, par Teddy Payet

En réponse à : Squelettes "Z-core" sous SPIP 3 - astuces

Bonsoir…

Alors, Valéry, ton message m’a mis la puce à l’oreille… J’ai poussé un peu plus l’investigation dans le code source de z-core. Et j’ai eu une belle surprise : le code que je viens de donner dans cet article pour body-rubrique-ma_compo.html ne "sert" à rien car z-core le fait nativement !.
Pour preuve, le code de Cédric ici et ici

Par contre, z-core ne prend pas en compte les fichiers aside/rubrique-ma_compo.html, extra/rubrique-ma_compo.html, breadcrumb/rubrique-ma_compo.html, etc.

Ce qui faire que mon astuce dans la partie "Aller plus loin" fonctionne parfaitement et répond, je pense à tes besoins exprimés ici : http://contrib.spip.net/Composition...
Comme on utilise z-core avec le plugin Compositions, le répertoire est "forcé" dans la page de configuration /?exec=configurer_compositions à la valeur "content".
# Le 5 janvier 2015 à 04:52, par Severo

En réponse à : Squelettes "Z-core" sous SPIP 3 - astuces
Bien utile, merci.

Pour gagner quelques caractères, mettre
[(#SET{aside,#CHEMIN{aside/#GET{html2}.html}|?{#GET{html2},#GET{html}}})]
au lieu de
[(#CHEMIN{aside/#GET{html2}.html}|?{#SET{aside,#GET{html2}},#SET{aside,#GET{html}}})]
# Le 14 avril 2018 à 14:09, par Loiseau2nuit

En réponse à : Squelettes "Z-core" sous SPIP 3 - astuces

pour aller plus loin ...

Et dire que j’ai cherché cette astuce pendant des années alors qu’elle était publiée ici depuis... 2014 !!! :o

Merci ^^
# Le 14 avril 2018 à 15:40, par Teddy Payet

En réponse à : Squelettes "Z-core" sous SPIP 3 - astuces

Salut l’ami !

Quelle version de Z tu utilises ?
Dans les dernières versions de Z-core, c’est totomatique ! Plus besoin de cette astuce. Tu peux la faire fonctionner sans problème. ;-)
C’est Valéry qui m’a mis la puce à l’oreille sur le sujet : http://www.teddypayet.com/Squelettes-Z-core-sous-SPIP-3#forum159
# Le 19 avril 2018 à 05:19, par Loiseau2nuit

En réponse à : Squelettes "Z-core" sous SPIP 3 - astuces

Hello. La dernière en général, mais j’ai un peu de retard dans ma veille techno depuis que j’ai arreté de bosser ds le web. ><

Répondre à cet article

Qui êtes-vous ?

Nom

Courriel (non publié)

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Texte de votre message

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Prévenez-moi de tous les nouveaux commentaires de cette discussion par email

Suivre les commentaires : |