Accueil du site > Squelettes > Outils pour squelettes > Zpip > Le Squelette Zpip-dist

Le Squelette Zpip-dist

11 novembre 2009 – par Cedric Morin, Matthieu Marcillaud – 263 <blink style='color:red;'>public|spip|ecrire:commentaires</blink>

Toutes les versions de cet article : [Español] [français]

110 votes

Zpip [1] est un modèle de squelette réutilisable, modulaire et disposant d’une galerie de thèmes. [2] Ce modèle de squelette rend l’installation d’un site avec son thème plus facile, et la personnalisation plus efficace.

Zpip-dist est la version de base de ce modèle de squelette, que vous pouvez utiliser telle quelle ou personnaliser et enrichir selon vos besoins.

Vous pouvez tester les thèmes disponibles sans installer Zpip ni spip, en vous rendant sur http://zpip.spip.org. Vous pourrez ensuite les personnaliser, ou définir vous même les thèmes de votre site, sur la base de l’architecture de Zpip.

Installer Zpip-dist

Zpip-dist se charge et s’installe comme un plugin. Pour installer Zpip-dist et jouer avec sans plus attendre, il suffit de suivre le guide d’installation pas à pas.

Une fois installé, vous pourrez vous faire plaisir en téléchargeant des thèmes déjà existants, et revenir lire la suite de cet article au moment de mettre un peu les mains dedans pour le personnaliser !

Le projet Zpip

Plus qu’un squelette, Zpip est un exemple d’un système de squelette qui met en application les idées exposées dans Modèle de squelette réutilisable. Il propose une organisation des squelettes visant à le rendre :

habillable par des thèmes indépendants du squelette
maintenable dans le temps, par une duplication minimale du code
rapidement déployable, au prix d’un petit apprentissage initial sur son organisation

Zpip s’adresse aussi bien aux débutants qui veulent profiter d’une galerie de thèmes prêts à l’emploi, qu’aux webmestres avancés pour qui il propose un fonctionnement et des mécanismes productifs.

Toute l’organisation et le fonctionnement de Zpip peuvent être réutilisés pour construire de nouveaux squelettes qui bénéficieront des mêmes avantages.

Organisation des fichiers

Zpip-dist redéfinit tous les squelettes par défaut de la dist de SPIP, à la racine de son dossier : 404.html, article.html, auteur.html, backend.html, breve.html, forum.html, login.html, mot.html, page.html, plan.html, recherche.html, rubrique.html, site.html, sommaire.html, et spip_pass.html.

À l’exception du flux RSS (backend.html), tous ces squelettes sont réécrits de façon minimale pour inclure structure.html qui produira toutes les pages. Vous pouvez donc oublier tous ces squelettes issus de la dist : vous n’aurez plus besoin de les manipuler, sauf cas exceptionnel.

Nous voici donc avec deux squelettes supplémentaires à la racine : structure.html et body.html. Le premier, structure.html, pose la structure minimale de la page HTML, inclut les squelettes chargés de produire le head, puis le body.html qui définit le layout unique et sur lequel nous revenons ci-dessous plus en détail.

Zpip contient de plus six sous dossiers.
Deux sont génériques :

img/ qui contient toutes les images de décoration
inclure/ qui contient les squelettes communs et partagés entre les différentes pages du site.

Les quatre autres dossiers déclinent des morceaux de la page html en fonction de la page du site sur laquelle on se trouve :

head/ qui contient les squelettes de la section <head> personnalisée pour chaque page, lorsque c’est nécessaire, qui s’ajoute à un <head> commun situé dans inclure/
contenu/ dans lesquels seront mis tous les squelettes produisant le contenu principal de chaque page
extra/ dans lesquels seront mis tous les squelettes produisant les informations extra contextuelles pour chaque page
navigation/ dans lesquels seront mis tous les squelettes produisant les informations de navigation propres à chaque page

Layout Unique

Zpip est donc organisé autour d’un layout unique décrit par body.html qui intègre 6 entités logiques de contenu et les structure à sa guise dans le HTML.

Les 6 entités sont nommées selon la convention ci-dessous, eu égard à leur contenu informationnel et sans préjuger de la dénomination et de la structure englobante définie par le thème :

entête fournit la présentation de la page et d’identité du site
barre-nav constitue la navigation principale du site ; peut être vide
contenu contient l’information principale de la page, déclinée par type de page
navigation fournit des éléments de navigation secondaire, déclinés par type de page
extra fournit des éléments d’information connexes contextuels, déclinés par type de page
pied fournit des éléments de repérages et de rappels secondaires

Le layout par défaut de Zpip-dist est simple :

<div id="page">
	<div id="entete">
		<INCLURE{fond=inclure/entete,env}>
	</div>
	<div id="nav">
		<INCLURE{fond=inclure/barre-nav,env}>
	</div>
	
	<div id="conteneur">	
		<div id="contenu">
			<INCLURE{fond=contenu/#ENV{type},env}>
		</div>

		<div id="navigation">
			<INCLURE{fond=navigation/#ENV{type},env}>
			<INCLURE{fond=extra/#ENV{type},env}>
		</div>
	</div>

	<div id="pied">
		<INCLURE{fond=inclure/pied,env}>
	</div>
</div>

Nous voyons que ce layout ne gère qu’une unique colonne #navigation, laquelle intègre le contenu des blocs de navigation et extra.

Pages automatiques

Zpip intègre un mécanisme de génération automatique des pages complètes à partir d’un seul squelette de contenu.

Par exemple, il suffit d’écrire un squelette minimal contenu/page-inscription.html contenant seulement :

#FORMULAIRE_INSCRIPTION

pour que la page complète spip.php?page=inscription soit disponible.

Pour réaliser cela Zpip utilise les éléments communs inclure/entete.html, inclure/barre-nav.html et inclure/pied.html. Pour les éléments de navigation et d’extra, Zpip utilise par défaut les squelettes navigation/dist.html et extra/dist.html si aucun squelette navigation/page-inscription.html ou extra/page-inscription.html n’est défini.

Ce mécanisme de pages automatiques permet d’ajouter, aussi rapidement que facilement, des pages spécifiques, en cohérence immédiate avec le reste du site. De même, il permet à des plugins de fournir des pages dédiées, utilisables sur tous les sites quelle qu’en soit leur structure, laquelle sera automatiquement fournie par Zpip.

Par exemple, un plugin de newsletter peut facilement fournir un squelette contenu/page-abonnement.html (permettant à l’abonné de gérer son abonnement), qui pourra être utilisé tel quel par tous les sites reposant sur Zpip.

Menu de navigation principale

Zpip permet de gérer votre navigation principale directement dans l’espace privé à l’aide du plugin Menus. Il suffit de créer un menu avec l’identifiant barrenav pour qu’il soit automatiquement inséré à la place de la navigation principale, sans modifications de fichiers.

Compositions

Zpip est naturellement conçu pour fonctionner avec le plugin Compositions qui permet d’utiliser plusieurs types de composition par objet, et de décliner les cœurs de page en fonction des besoins.

Thèmes

Grâce à sa structure, Zpip est utilisable directement avec une galerie de thèmes interchangeables.

Pour faciliter l’écriture de nouveaux thèmes pour Zpip, un certain nombre de conventions ont été documentées qui permettent de définir un socle commun.

Les thèmes qui respectent ces conventions pourront être utilisés indifféremment avec Zpip ou tout autre squelette reposant sur la même structure et les mêmes conventions.

Notes

[1] Le nom de ce squelette ne doit rien à l’infâme Zorglub, mais plutôt à une comédie musicale futuriste imaginant le futur de SPIP en 2050

[2] Concrètement, Zpip est issu d’une fusion des projets Zesty et SPIP-Zen.

Vos commentaires

0 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | ... | 120

# Le 10 octobre 2011 à 12:27, par ? En réponse à : Le Squelette Zpip-dist

Bonjour,

Est-ce que ce plugin Zpip sera porté pour Spip 3 ?

Merci.
- # ^ Le 3 février à 12:21, par Béat En réponse à : Le Squelette Zpip-dist
  
  Ah ouais, ça c’est une bonne question !
  
  Parce que, si on met en place tout un binz avec cette nouvelle approche et qu’on est largué avec l’arrivée de la version 3... ce serait assez désolant.
  
  Quelqu’un est-il en mesure de répondre ?
Répondre à ce message
# Le 29 décembre 2011 à 15:21, par LudoRA En réponse à : Le Squelette Zpip-dist

Salut !

Question peut-être un peu con :
Pourquoi ne pas intégrer le filtre « supprimer_numero » dans ce squelette par défaut ?

J’ai modifié zpip pour ma convenance dans ce sens. À part surcharger chaque fichier qui le devrait par sa copie, ou modifier les fichiers concernés à chaque mise à jour de zpip, y’aurait une façon « intelligente » de le faire ?

A plus.

Ludo
- # ^ Le 29 décembre 2011 à 18:22, par Teddy Payet En réponse à : Le Squelette Zpip-dist
  
  Bonjour,
  
  Il suffit pour cela de mettre dans le fichier config/mes_options.php ceci :
  $table_des_traitements['TITRE'][]= 'typo(supprimer_numero(%s))';
  
  Ainsi, pas de fichiers à modifier à chaque mise à jour de Zpip (ou de squelettes). Les numéros seront supprimés automatiquement.
  Si pour un besoin précis, vous avez besoin de connaître le numéro attribué, vous pouvez utiliser la balise #RANG.
- # ^ Le 30 décembre 2011 à 00:22, par LudoRA En réponse à : Le Squelette Zpip-dist
  
  OK. Je ne connaissais pas.
  
  Testé et adopté.
  
  Merci.
- # ^ Le 18 janvier à 14:42, par Ben En réponse à : Le Squelette Zpip-dist
  
  Salut,
  
  Perso, j’utilise supprime les numéros, une des lames du couteau suisse, c’est plus graphique ;)
- # ^ Le 18 janvier à 14:58, par Teddy Payet En réponse à : Le Squelette Zpip-dist
  
  Bonjour,
  
  Il est dommage d’installer un plugin aux multiples fonctions pour le besoin d’une seule fonction…
  De ce fait, les quelques lignes de codes dans le fichier config/mes_options.php est meilleure.
  
  Bien sûr, si on utilise déjà le Couteau Suisse pour d’autres besoins, (d’autres lames), rien n’empêche d’activer cette fameuse lame « supprimer les numéros » en lieu et place du fichier mes_options.php.
  
  ;-)
Répondre à ce message
# Le 2 décembre 2011 à 14:33, par vincentm En réponse à : Le Squelette Zpip-dist

Bonjour,
Le plugin Compositions renvoie à la version 1.
Il existe la version 2 et on m’a précisé qu’elle était à utiliser par rapport à la version 1.

Pourriez vous me confirmer que Composition 2 est bon pour Zpip ?

Si la réponse est oui, n’oubliez pas de modifier le lien de « plugin Compositions » dans la partie « Compositions » ce cette page. C’est pour les prochains qui n’y connaissent rien comme moi ;)
- # ^ Le 7 décembre 2011 à 14:39, par vincentm En réponse à : Le Squelette Zpip-dist
  
  La réponse est oui pour ceux que ca intéresse.
Répondre à ce message
# Le 23 novembre 2011 à 13:21, par Polaroïd En réponse à : Le Squelette Zpip-dist

Bonjour, je découvre la dist de ce plugin, concernant par exemple une personnalisation de page-sommaire.html situé dans /contenu est-il possible de faire en sorte que ce fichier ne soit pas supprimé lors d’une mise à jour du plugin ? faut-il stoker ce fichier dans un répertoire comme /squelettes ou bien ailleurs à la racine ?

Merci d’avance les amis
- # ^ Le 23 novembre 2011 à 14:25, par Polaroïd En réponse à : Le Squelette Zpip-dist
  
  Auto-réponse à ma question :
  
  Dans le répertoire squelettes/, avec le même sous répertoire que zpip à savoir : /squelettes/contenu/page-sommaire.html dans mon cas.
  
  Ça roule !
Répondre à ce message
# Le 3 novembre 2011 à 13:30, par Manu En réponse à : Le Squelette Zpip-dist

Passer des variables d’un bloc à un autre dans ZPIP
Je ne sais pas si je suis fatigué ou quoi, mais je butte sur un problème que je n’arrive pas à régler. Dans ZPIP, la structure de base est définie à coup d’inclusion de grands blocs logiques du style

... <div id="contenu"> <INCLURE{fond=contenu/#ENV{type},env}> </div> <div id="navigation"> <INCLURE{fond=navigation/#ENV{type},env}> <INCLURE{fond=extra/#ENV{type},env}> </div>....

Très bien... Cependant, si par exemple on veut récupérer dans le squelette inclus « extra » une variable (un id_truc) calculée quelque part dans l’inclusion"contenu", comment peut-on faire ?
En effet, {env} ne fait suivre que les arguments passés dans l’url ou issus du squelette appelant or, dans un cas comme celui là, le id_truc n’est ni un argument de l’url, ni dans le contexte de body.html....
Y a-t-il un truc que j’ai zappé ?

En espérant avoir clair dans ma question...

Répondre à ce message
# Le 29 septembre 2011 à 11:37, par elm31rugby En réponse à : Le Squelette Zpip-dist

Bonjour,

Dans mon thème Zpip « Grany », je cherche à supprimer les numéros de mes rubriques et sous-rubriques, avec le filtre supprimer_numero.

Quels sont les fichiers à modifier pour introduire ce filtre partout où il est nécessaire, c’est à dire :

- dans la balise Title
- dans la barre de navigation (à droite du thème)
- dans le titre de la rubrique (pour cela, j’ai trouvé, dans le dossier "contenu’ du plugin)

Désolé, je suis un peu perdu dans cette imbrication de fichiers pour Zpip. Merci pour votre aide.

Eric LM
- # ^ Le 10 octobre 2011 à 12:30, par Pierre KUHN En réponse à : Le Squelette Zpip-dist
  
  Bonjour
  
  Si tu veux allez plus vite, une lame du couteau suisse te fais ça ;)
- # ^ Le 10 octobre 2011 à 17:35, par elm31rugby En réponse à : Le Squelette Zpip-dist
  
  Excellent ! Merci Pierre, je vais mettre cela en place
  
  Eric LM
Répondre à ce message
# Le 13 août 2011 à 11:55, par Okoweb En réponse à : Le Squelette Zpip-dist
Bonjour à tous,
Ci-dessous le code source de structure.html de zpip :

[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">

<head>

<INCLURE{fond=head/#ENV{type},env}>

<INCLURE{fond=inclure/head}>

</head>

<body class="page_#ENV{type,page}[ #ENV{type,page}_(#ENV{composition,''})]">

<INCLURE{fond=body,env}>

#SPIP_CRON

</body>

</html>

(#EVAL{#VAL{var_zajax}|_request}|non)][

<INCLURE{fond=#VAL{var_zajax}|_request|concat{'/',#ENV{type}},env}>

(#EVAL{#VAL{var_zajax}|_request}|oui)]

Télécharger

et je souhaite remplacer la ligne

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">

par









 <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="#LANG_DIR #LANG no-js"> 

Télécharger

Du coup en visualisant n’importe quelle page depuis un navigateur j’ai un crochet [ tout au début de ma page. Et ce crochet n’est que celui avant le doctype.
Comment faire pour supprimer ce crochet sur la page depuis le navigateur ?

Merci d’avance...

Sincères salutations.
- # ^ Le 15 août 2011 à 12:38, par Okoweb En réponse à : Le Squelette Zpip-dist
  En regardant structure.html de l’espace privé de Spip 3,
  
  #HTTP_HEADER{Cache-Control: no-cache,must-revalidate}
  
  #HTTP_HEADER{Pragma: no-cache}
  
  #EVAL{_DOCTYPE_ECRIRE}
  
  [(#REM) http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
  
  ]
  
  
  
  
  
  
  
   <html class="[(#LANG_DIR)][ (#LANG)] no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR"> 
  
  <head>
  
  <INCLURE{fond=prive/squelettes/head/#ENV{type},env}>
  
  </head>
  
  <body class="#ENV{type,page}[(#ENV{type,page}|match{_edit$}|oui)edition][ #ENV{type,page}_(#ENV{composition,''})] [(#REM|init_body_class)]">
  
  <INCLURE{fond=prive/squelettes/body,env}>
  
  </body>
  
  </html>
  
  Télécharger
  
  en fait une intégration similaire de ce que je souhaite faire, mais je me demande si structure.html de spip 3 peut remplacer celui zpip-dist de spip 2 ?
  
  Merci d’avance...
Répondre à ce message
# Le 13 août 2011 à 11:50, par Okoweb En réponse à : Le Squelette Zpip-dist

Ci-dessous le code source de structure.html de zpip :

[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
#ENV{type},env}> head}> #SPIP_CRON
(#EVAL#VALvar_zajax|_request|non)][
',#ENV{type}},env}>
(#EVAL#VALvar_zajax|_request|oui)]

et je souhaite remplacer la ligne

par

Du coup en visualisant n’importe quelle page depuis un navigateur j’ai un crochet ([) tout au début de ma page. Et ce crochet n’est que celui avant le doctype.
Comment faire pour supprimer ce crochet sur la page depuis le navigateur ?

Merci d’avance...

Sincères salutations.

Répondre à ce message
# Le 10 août 2011 à 09:13, par poupougnac En réponse à : Le Squelette Zpip-dist

Bonjour,

Est-ce que Zpip empêche d’une manière ou d’une autre le fonctionnement de la balise #CACHE. J’affiche l’heure avec ce code. #DATE|affdate{"H:i:s"} dans l’en-tête (entete.html) en prenant soin en haut de mettre #CACHE{0}.

Pourtant seule une désactivation du cache me permet d’afficher systématiquement la bonne heure. Je n’ai pas d’autre choix que de me priver du cache partout...

Répondre à ce message
# Le 4 avril 2011 à 17:38, par Cécile En réponse à : Le Squelette Zpip-dist

Bonjour
Problématique : je dois construire un site ayant un en-tête différent selon les pages (un bandeau image).
J’ai lu plus bas qu’il est possible de prévoir des layout différents sur certaines pages en rajoutant par exemple pour la page sommaire un « body-sommaire.html » (si il existe, sera automatiquement utilisé pour la page sommaire).
Je viens de tester avec un body-sommaire.html à la racine de mon dossier squelettes où j’ai mis : entete-sommaire,env}>
A priori, il n’est pas pris en compte.. il y a t’il autre chose à faire ?
Comme je commence juste le développement, il y a peut être aussi une solution plus simple pour changer uniquement ce bandeau image selon les rubriques ?
Merci d’avance.
- # ^ Le 6 avril 2011 à 03:42, par Cécile En réponse à : Le Squelette Zpip-dist
  
  Bonsoir
  
  Une solution de Maieul sur IRC pour afficher une bannière différente par rubrique (rubrique + ses articles)
  
  Dans son dossier squelettes créer un répertoire IMG et y placer ses images (banniere-1.jpg, banniere-2.jpg etc...). Les numéros correspondent aux numéros de rubriques.
  
  Dans squelettes/inclure créer un fichier entete.html et y inclure ce code
  [(#REM) Bannière par défaut ] #SET{image,IMG/banniere-dist} [(#REM) Appel bannière s'affichant dans les articles d'une rubrique donnée ] <BOUCLE_articles(ARTICLES){id_article}> [(#CHEMIN{IMG/banniere-#ID_RUBRIQUE.jpg}|oui)#SET{image,IMG/banniere-#ID_RUBRIQUE}] </BOUCLE_articles> [(#REM) Appel bannière s'affichant dans les rubriques ] <BOUCLE_rubriques(RUBRIQUES){id_rubrique}> [(#CHEMIN{IMG/banniere-#ID_RUBRIQUE.jpg}|oui)#SET{image,IMG/banniere-#ID_RUBRIQUE}#SET{remplir_alt, Bannière de #TITRE}] </BOUCLE_rubriques> [(#REM) Affichage bannière ] <img src="#CHEMIN{#GET{image}.jpg}" alt="#GET{remplir_alt}" width="750" height="211" />
  J’ai rajouté
  #SET{remplir_alt, Bannière de #TITRE} dans la boucle rubrique et alt="#GET{remplir_alt}"
  pour renseigner le alt de l’image avec le titre de la rubrique.
- # ^ Le 12 juillet 2011 à 11:01, par Matthieu Marcillaud En réponse à : Le Squelette Zpip-dist
  
  Rasta vient de me dire que c’est
  body-page-sommaire.html (Pour le Zpip de SPIP 2)
Répondre à ce message

0 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | ... | 120

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )

Texte de votre message

Ajouter un document

gif, jpg, png

SPIP-Contrib

Le Squelette Zpip-dist

Installer Zpip-dist

Le projet Zpip

Organisation des fichiers

Layout Unique

Pages automatiques

Menu de navigation principale

Compositions

Thèmes

Notes

Rubriques

Derniers commentaires

Compatibilité

Téléchargement(s)

Zpip

Sur le Web

Vos commentaires

Répondre à cet article

Ça discute par ici

Transaction : créer des formulaires avec paiement en ligne

Formulaire de contact avancé

Squelette Multi-Saisons

JQuery Masonry

Thélia

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN