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

  • 4

    Bonjour,

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

    Merci.

    Reply to this message

  • Achille

    Bonjour. Je débute avec Zpip et je suis en panne. Je voudrais insérer une image en arrière-plan de toutes les pages de mon site et je n’y arrive pas. Exemple avec le thème Keepitsimple: j’ai notamment essayé de remplacer l’image “header-image” par la même image modifiée...pas de changement. Pourrait-on m’aider à démarrer? Merci !

    Reply to this message

  • Nicolas

    Salut,

    J’ai un souci avec mon site :
    Les balises #URL_SITE_SPIP renvoient vers http://urlmonsite.org/urlmonsite.org, le “http;//” est correct, mais le reste de l’URL est doublé !

    Dans les squelettes Zpip, j’ai viré #URL_SITE_SPIP, mais ça ne fonctionne mieux pour autant. En effet, sur la page “http://urlmonsite.org/spip.php?page=contact”, le lien “Accueil du site renvoie vers”la même URL...

    Les liens vers les pages spécifiques du site sont pourtant valides, le problème ne se pose que pour les liens amenant à la racine du site. (L’URL du site est correcte dans la configuration du site).

    C’est louche...

    -  Zpip-dist v1 (v1.7.17), Rév. 58172
    -  SPIP 2.1.12 [18732]
    -  Portail Web pour PMB (v1.0.4), Rév. 55588

    Reply to this message

  • 1

    Bonjour.

    J’aimerai faire des sites multilingues avec spip. J’utilise zpip depuis quelques temps, et j’apprécie bien la démarche et j’arrive assez bien à le personnaliser.

    Pour les sites multilingues, j’ai en gros toujours besoin du même fonctionnement:

    • En arrivant sur le site avec un paramètrage de langue donné sur mon navigateur j’aimerai que le site s’affiche dans cette langue si elle est disponible et qu’elle s’affiche dans la langue par défaut si tel n’est pas le cas.
    • J’aimerai que l’utilisateur puisse modifier ce comportement par défaut en précisant la langue qu’il souhaite afficher pour le site, et ce, pour la durée entière de sa session.
    • De même, en naviguant, arriver toujours sur la version traduite si elle est disponible, et sinon, sur la version d’origine.

    Pour faire un site multilingue de ce type avec zpip, quelles pistes creuser?

    Reply to this message

  • 3

    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.

    • 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.

    • Rasta vient de me dire que c’est
      body-page-sommaire.html (Pour le Zpip de SPIP 2)

    • FrancoisA

      Je souhaite personnaliser l’image du bandeau du site selon les rubriques (tout en gardant une architecture commune définie dans le thème), avec une image de bandeau spécifique à certaines rubriques. Compositions ne permet de modifier que la structure, pas l’aspect d’une partie qui se trouve en amont (dans entete).

      Comment surcharger mon thème pour indiquer dans habillage.css que le header de telle rubrique utilise telle image ? Est-ce possible ?

      Actuellement mon thème contient une classe header qui permet de signaler à quel endroit inclure une image en background, mais ceci n’est pas adaptable à chaque rubrique.

      #header {
              background: url(img/header-photo.jpg);
      }

      J’ai lu qu’on pouvait surcharger habillage.css selon des classes déjà définies comme body avec par exemple page_sommaire.
      Ne peut-on sinon ajouter un fichier particulier dans squelettes/inclure/entete-XX.html ?

      Sinon, comment m’en sortir proprement pour résoudre mon problème ?

      Merci de votre aide.

    Reply to this message

  • 4

    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

    • 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.

    • OK. Je ne connaissais pas.

      Testé et adopté.

      Merci.

    • Salut,

      Perso, j’utilise supprime les numéros, une des lames du couteau suisse, c’est plus graphique ;)

    • 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.

      ;-)

    Reply to this message

  • 1

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

    Reply to this message

  • 1
    Polaroïd

    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

    • Polaroïd

      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 !

    Reply to this message

  • 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...

    Reply to this message

  • 2

    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

    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