Le Squelette Zpip

Publié le : 11 novembre 2009 – Dernière modification le 21 décembre 2021 – par Cerdic, Matthieu Marcillaud – 364 commentaires

Español, français
1
2
3
4
5
140 votes

Ce squelette n’est plus maintenu, il est remplacé par SPIPr-dist

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.

Installer Zpip

Zpip se charge et s’installe comme un plugin. Pour installer Zpip 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 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 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.

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.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

168 discussions

  • 1
    Okoweb

    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)]

    et je souhaite remplacer la ligne

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

    par

    <!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="#LANG_DIR #LANG no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="#LANG_DIR #LANG no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="#LANG_DIR #LANG no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="#LANG_DIR #LANG no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="#LANG_DIR #LANG no-js"> <!--<![endif]-->

    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.

    • Okoweb

      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/
]<!--[if lt IE 7 ]> <html 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="[(#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="[(#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="[(#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="[(#LANG_DIR)][ (#LANG)] no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR"> <!--<![endif]-->
<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>

      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

  • Okoweb
    #SPIP_CRON

    Répondre à ce message

  • poupougnac

    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

  • 1
    Yffic

    Bonjour

    La chaine de langue <:lien:connecter :> de contenu/page_login.html n’est pas traduite dans mon cas. Cette chaine a été introduite a priori dans la révision 35826...

    SPIP 2.1.10 SVN [18110]
    zpip 1.9.9 SVN 48780

    Répondre à ce message

  • josé

    Salut,

    Je viens de mettre en place un spip2.1.10 avec Zpip-dist v1 1.7.14 & Zen-Garden1.1.3 & SPIP Bonux
    2.2.21 & Menus0.8.20 & cfg : moteur de configuration
    1.16.0 & Compositions2.1.2

    C’est avec ce dernier que j’ai un probleme. Après avoir créer un article ou une rubrique.
    je n’ai aucune proposition de compositions pour les rubriques et le bloc composition n’est pas visible pour les articles. Alors qu’il est pour les rubriques.
    Ai-je oublié de faire quelques chose ?
    J’ai pourtant bien cherché....

    Répondre à ce message

  • 1
    florent

    Alors, que je comprenne bien cette histoire, moi qui étais habitué aux rubrique-xx.html ou article-xx.html :

    dans le dossier du plugin zpip : le squelette pur, à proprement parler, c’est à dire dans lequel on écrit ce qu’on veut que le site affiche, avec deux niveaux : Tout d’abord, ce qui se trouve à la racine du répertoire du plugin, qui correspondent en fait à des include et ont donc une portée très générale (que je ne comprends pas très bien d’ailleurs). Puis, dans les répertoires, les éléments de squelette un peu plus costauds (avec moulte fonction en boucles), qui sont définis en fonction de leur position dans un bloc (Par exemple, on suppose en effet qu’une boucle auteur dans le bloc « extra » ne renverra pas la même chose qu’une boucle auteur dans le bloc « contenu »). Le fichier body définit une mise en page par défaut qui est appliquée en l’absence de theme, tout comme habillage.css (ca peut d’ailleurs prêter un peu à confusion, puisque les éléments du thème par défaut se retouvent dans le même dossier que le squelette...)

    Dans le dossier thème : le thème à proprement parler, c’est à dire l’habillage (couleurs, polices) du site et l’organisation des blocs les uns par rapport aux autres...

    Donc, si on veut que le site renvoit un résultat précis sur une boucle, on va voir du côté du répertoire plugin/ZPIP, et si on veut modifier l’apparence du site, on regarde dans les thèmes. Dites moi si je me trompe (ou pas)...

    Ce que je ne vois pas bien dans tout ça c’est : le rôle d’un plugin comme composition, et surtout où se trouvent, dans ce cas les fichiers html que l’on doit faire ? Dans l’ancien (si l’on peut dire) répertoire /squelettes dans lequel on plaçait nos squelettes personnalisés ? Dans le répertoire contenu du plugin ? Les deux ?

    Autre question : si je veux changer quelque peu les boucles spip (par exemple, je veux afficher une liste d’article sur la page d’accueil qui ont un mot clé « une »), je fais les changements dans les fichiers placés dans le répertoire contenu du plugin ZPIP ? Je modifie alors la « dist » ?

    Merci pour vos réponses

    • tetue

      Pour les partager je comprends tes interrogations. Après avoir bien pataugé, j’ai réuni mes bidouilles dans un tuto : « Bien démarrer avec Z » dont la 4e partie, « Découpe de la page standard », devrait répondre à tes questions.

    Répondre à ce message

  • YannX

    Un bug « rare » chez OVH

    Ouf, j’ai enfin trouvé !!

    car depuis environ 6 mois, j’avais une impossibilité de me connecter sur mes SPIP 2.1.x sans renommer le répertoire plugins, et vider le cache à la mano, dès que je passai 48h sans etre allé sur le site (avec cookies..),
    et ce quelque soit le navigateur (IE, FF, Opera....)

    J’ai fini par identifier le responsable : il doit s’agir d’un cas tres particulier d’appels, car en fait je n’avais pas encore défini de pages de ZPIP bien que j’ai activé le plugin !

    Du coup, il m’a suffit de recopier /prive/login.html (du SPIP d’origine),
    dans /squelettes, et j’ai pu me reconnecter sans soucis.

    En esperant que cela puisse aider...
    YannX

    Répondre à ce message

  • 1
    dom

    Bonjour.
    Il semble que l’archive zip de zpip-dist ne soit plus disponible ... Une raison à cela ?
    Merci.

    Répondre à ce message

  • Cécile

    Bonjour

    J’ai un problème de cache avec Zpip que je n’arrive pas à résoudre : j’ai un squelette rubrique-evenements.html dans le dossier contenu de mon répertoire squelettes, je lui ai mis #CACHE0 et j’ai bien vérifié que ma page body contient bien le bon inclure

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

    Quand je regarde les Response Headers avec WebPagetest il me note X-Spip-Cache : 2592000 (j’ai le plugin couteau kiss mais même en le désactivant cela ne marche pas), donc a priori le cache zéro n’est pas pris en compte... je ne sais plus vraiment où chercher...
    Merci

    Répondre à ce message

  • 1
    ManuDevil

    Bonjour,

    Je suis en train de composer un site basé sur un thème Zpip, que je modifie afin qu’il réponde à un cahier des charges assez complexe.

    J’essaie notamment de créer des articles qui ne semblent appartenir à aucune rubrique. Pour cela, je crée une rubrique Administration avec un mot-clé invisible. Je voudrais que dans les différentes barres de navigation (en haut, barre-nav, et sur le côté) n’apparaissent pas les rubriques possédant le mot-clé invisible.

    Mais je ne trouve pas les fichiers à modifier... Où sont-ils ?

    Merci d’avance.

    • ManuDevil

      Après avoir vaillamment cherché, je me réponds à moi-même, ça peut toujours servir.

      L’idée est d’aller copier le fichier plugins/auto/menus/menus/rubriques.html et de le copier dans squelettes/menus/. De cette façon, on peut surcharger sans risquer de briser le plugin d’origine.

      Dans ce fichier nouvellement créé, on cherche la ligne suivante :

      <BOUCLE_rubriques(RUBRIQUES){id_parent=#GET{id_rubrique}}{par num #GET{tri_num}}{par #GET{tri_alpha}}>

      Et on remplace tout ça par :

      <BOUCLE_rubriques(RUBRIQUES){id_parent=#GET{id_rubrique}}{doublons rubInvisiblesMenus}{par num #GET{tri_num}}{par #GET{tri_alpha}}>

      Deux lignes au-dessus, on va créer alors une boucle qui va exclure toutes les rubriques possédant le mot-clé avec identifiant xxx :

      <BOUCLE_rubInvisiblesMenus(RUBRIQUES){tout}{id_mot=xxx}{doublons rubInvisiblesMenus}></BOUCLE_rubInvisiblesMenus>

      Et le tour est joué !

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

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

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.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom