Le Squelette Zpip

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.

Footnotes

[1Le 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

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

updated on 2 October 2019

Discussion

168 discussions

  • 6

    Bonjour,

    Sur la page Sommaire, je voudrais réaliser une page d’accueil «à l’ancienne» ne comportant ni en-tête, ni menu de navigation. Ça a l’air idiot, mais en fait, je n’y arrive pas. Sur Spip c’est facile mais avec Zpip?

    Merci de vos lumières
    Béat

    • La solution est de créer un squelette variante body-sommaire.html qui ne sera utilisé que pour la page d’accueil, et dans lequel tu n’inclues pas les blocs que tu ne veux pas sur ta home.

    • Merci. J’avais trouvé le truc tard hier soir et n’avais pas encore pris le temps de «me répondre à moi-même»!

      En fait, ce sont 3 fichiers qui sont concernés. Voilà ce que j’ai fait:

      dans theme:
      -  dupliqué body.html
      -  renommé bodyAlt.html (laissé au même endroit)
      - supprimé les inclure concernés

      dans plugin zpip_v1:
      -  dupliqué structure.html
      -  renommé structureAlt.html
      -  placé dans squelette (pour surcharger)
      - modifié <INCLURE{fond=bodyAlt,env}>

      dans plugin zpip_v1:
      -  dupliqué sommaire.html
      -  placé dans squelette (pour surcharger)
      - modifié <INCLURE{fond=structureAlt}……

      Je trouve que c’est un peu compliqué (tout ça pour ça!) mais je crois que c’est propre. Merci encore.

    • C’est moins propre car tu as du forker structure et le nommage “xxxAlt” n’est pas très clair. Comme je l’indiquais il suffit d’un body-sommaire.html qui sera automatiquement pris en compte dans la page sommaire sans autre modification.

    • Ah, j’ignorais que cette convention de nomage marchait dans ce cas. Mais en fait ça ne marche pas ;-\ J’ai mis ce body-sommaire.html dans mon thème et comme ça ne marchait pas je l’ai déplacé dans le dossier squelettes, puis dans le dossier du plugin zpip sans plus de résultats...

    • Tu n’as pas laissé tes squelettes modifiés sommaire.html et structureAlt.html ? (Parce que ça ne peut pas marcher avec)

    • Non non, bien sûr ;-)

    Reply to this message

  • 1

    salut mes potes...just je suis pas fort en spip mais je peux comprendre un peu ce language. J’ai un web site qui utilise spip 3 et zpip mais j’arrive pas a ajouter des element sur la partie droite du site (extra). Ou pourait-je passer pour y arriver? Merci

    • j crois qu’il y a une façon de créer de colonnes, mais j ne sais pas exactement comment

    Reply to this message

  • bonjour
    J’ai le problème suivant
    quand j’appelle une page nommée xyz (fichier squelettes/contenu/page-xyz.html)
    je trouve dans le spip.log l’erreur suivant:

    Jun 15 19:27:40 ::1 (pid 6548) :Pub:ERREUR: Erreur mysql 1146
    Jun 15 19:27:40 ::1 (pid 6548) :Pub:ERREUR: Table ’spip3010.spip_xyzs’ doesn’t exist - SHOW CREATE TABLE `spip_xyzs`
    Jun 15 19:27:40 ::1 (pid 6548) :Pub:!INFO: trouver_table: table inconnue ’’ ’spip_xyzs’

    nouvelle installation spip3.010

    Reply to this message

  • Bonjour,
    Tout va bien avec Zpip, je fais un body-mapage.html pour afficher /contenu/mapage.html avec les spécifications différentes de body.html

    je souhaiterais savoir si il est possible de faire une page générique pour toutes les mapage-1.html mapage-2.html mapage-3.html de type body-mapage-*.html afin de ne pas avoir à faire body-mapage-1.html, body-mapage-2.html ...

    Bon travail et encore merci.

    Reply to this message

  • Bonjour,

    depuis quelques semaines je développe un thème Zpip sous spip 3

    je constate que 2, au moins, des lames (sommaire automatique et glossaire) du Couteau Suisse ne fonctionnent pas avec les thèmes zpip (j’ai fait le test avec plusieurs thèmes).

    Auriez-vous une idée de comment résoudre ce problème ?

    Par contre, sur des sites spip 3, non-zpip, tout marche impeccablement.

    Merci d’avance.

    Hervé

    Reply to this message

  • Bonjour,
    Retour d’expérience sur l’utilisation de Zpip avec la 3.0.5.
    J’ai constaté un comportement anormal dans le cas d’un squelette article spécifique à une rubrique:
    Pour personnaliser mes squelettes, j’ai créé un répertoire squelettes avec sous-répertoires (contenu, formulaires, img, inclure, head ...)
    Pour le squelette spécifique, cration d’ article-xx.html dans squelettes et dans squelettes/contenu.
    Tout marche bien.
    J’ai voulu rajouter une feuille de style dans le head.
    Donc article-xx.html dans sqelettes/head.
    Cette surcharge n’est pas prise en compte. J’ai du mettre article-xx.html dans z/head et là c’est bon.

    A part cela, venant de 1.9, quels progrès dans la 3 ! Et que de choses à réapprendre ...

    Reply to this message

  • Bonjour,

    dans cette version du plugin, le fichier inclure/documents.html n’a pas été mis à jour pour prendre en compte les changements de chaînes de langue de SPIP. En effet, dans le chaînes de langue du squelette par défaut de SPIP, ce qui concerne les documents est maintenant précédé de “:medias”.

    Si comme moi sur votre site les chaînes de langues ne sont pas remplacées par leur traduction (par exemple le titre du Portfolio s’affiche en “info portfolio” au lieu de “Portfolio” ou les titres des docs s’affichent en “infos documents” au lieu du titre de votre document), il suffit de copier le fichier plugins/auto/z/v.x.x.x/inclure/documents.html dans squelettes/inclure/documents.html et de faire précéder toutes les chaînes qui concernent les docs par “:medias” (sans les guillemets). Par exemple : “:info_portfolio:” deviendra “:medias:info_portfolio:”.

    Bonne journée à touTEs

    Reply to this message

  • 1
    marjolaine

    Bonjour, je réitère ma question du 11/11/2012 vis-à-vis de la mediabox avec zpip :

    sous SPIP 3.0 sans plugins additionnels, quand on visionne un portfolio avec mediabox (fourni en standard) on a la possibilité de lancer un diaporama. Dés qu’on installe ZPIP-V1 (avec Zen Garden, Spip-bonux, saisies, menus comme recommandé) , le diaporama de la mediabox n’est plus proposé. Que faut-il modifier dans zpip pour que cela fonctionne à nouveau ?

    merci d’avance pour le dépannage....

    Reply to this message

  • 7

    Bonsoir,

    Zspip s’installe comme un plug-in et ça fonctionne comme cela.

    Question toute simple : est-il préférable de transférer ses fichiers dans le répertoire “squelettes” ou doit-on le laisser en tant que plug-in et faire les modification dans le répertoire plug-in ?

    Pourquoi l’avoir proposé en plug-in ? et pourquoi doit-il être installé comme tel ?

    Merci pour vos réponses.

    P.

    • Bonsoir

      Si tu mets tes modifications dans le plugins, elles seront écrasé lords d’une mise à jour.
      Skeleditor évite cela justement en copiant dans squelettes/

    • Merci.

      Skeleditor est très pratique.
      J’aurai peut-être d’autres questions par la suite, pour l’instant, j’avance.
      Bonne journée

    • marjolaine

      Bonjour,
      Je débute moi aussi sous SPIP et Zpip. Je réagis aux réponses précédentes , car étant sous SPIP3.05, ZPIP-V1, j’ai essayé de placer un squelette de rubrique sous un dossier /squlettes. Dans ce cas , je perds toute la mise en forme zpip. Si je déplace l’ensemble du contenu de /plugins/zpip-v1 sous /squelettes , même topo...
      J’ai essayé d’utiliser skeleditor comme proposé par Pierre Kuhn , celui-ci sauvegarde mes squelettes modifiés dans /plugins-dist/medias/contenu. Pourquoi ? Et bien sûr ça ne donne rien de bon !
      La seule solution que j’ai trouvée pour personnaliser les squelettes fournis ou en ajouter est de les recopier sous zpip-v1/contenus. Ce n’est pas très satisfaisant pour les évolutions futures. Pouvez-vous m’éclairer ?

      Autre question : sous SPIP 3.0 sans plugins additionnels, quand on visionne un portfolio avec mediabox (fourni en standard) on a la possibilité de lancer un diaporama. Dés qu’on installe ZPIP-V1 (avec Zen Garden, Spip-bonux, saisies, menus comme recommandé) , on ne peut plus lancer le diaporama de la mediabox. Que faut-il modifier dans zpip pour que cela fonctionne à nouveau ?

    • Bonsoir

      tu as un mes options ? dans config/

    • marjolaine

      non, je n’ai pas encore défini de fichiers mes_options

    • c’est pas logique /plugins-dist/medias/contenu en tous cas

    • marjolaine

      Bon, j’ai refait d’autres essais, toujours sans fichiers mes_options.php.
      Si je crée le répertoire squelettes à la racine du site, alors skeleditor va bien sauvegarder les squelettes sous ce répertoire, et ensuite, cela fonctionne correctement. Désolée pour mes erreurs de débutante! Quand le répertoire squelettes n’existe pas au préalable, skeleditor sauvegarde sous plugins-dist/medias/...??

    Reply to this message

  • Salut les amis!

    on commence à utiliser le Zpip ( http://mexico.indymedia.org ) mais je ne trouve la facon de mettre en place un agenda

    pourriez-vous nous indiquer un facon de le faire SVP ?

    merci

    indymex

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom