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

  • Apparement, la balise #SI_PAGE -introduite par le plugin Zpip- n’est pas documentée,
    sauf en http://zone.spip.org/trac/spip-zone/changeset/35805

    La balise #SI_PAGE permet de tester facilement dans les squelettes
    internes que l’on est sur une page donnee (sans tester type et composition).
    Ex :
    [(#SI_PAGE{sommaire}) Hop ! ]

    Il n’est pas (pas encore?) possible de tester une liste de noms, ou un radical avec termes génériques, ou l’appel de cette page (ou noisette?) dans un dossier d’un plugin.......

    d’après cerdic, b_b, JMG...

    Reply to this message

  • Bonjour,
    j’utilise zpip qui m’a permis d’avoir une présentation générale du site de mon assoc qui convient bien au travail mené (www.malem-auder.org).

    Je bricole pas mal mais sans réelle maîtrise ...

    La page d’accueil devrait être modifiée assez fondamentalement. Si je suis la logique du paragraphe “Pages automatiques”, je pourrais créer ce nouveau modèle “page d’accueil”?

    Comment la nommer et surtout comme en faire la page équivalent au bon vieux “index.htm”?

    Merci pour tout éclairage...
    André

    Reply to this message

  • 3

    Bonjour bonjour :)

    Petite question :

    • je créé une zone logique supplémentaire (déclarée comme telle dans mes_fonctions.php - en l’occurence chez moi c’est extra3)
    • je place dedans mes fichiers
    • Tous les fichiers fonctionnent bien (extra3/article.html, ...) SAUF extra3/dist.html qui n’est semble t’il pas pris en compte ?
    • Pareillement, les fichiers correspondant à des compos spécifiques ne fonctionnent pas non plus ( ex: extra3/article-truc.html) bien que les fichiers xml soient présents et que les différences sur /content/article-truc.html soient elles, bien prises en compte)

    Quelqu’un a déjà eu ça ? Je suis sûr que ca diot être un truc tout con qui m’échappe mais là je ne vois vraiment pas :-X

    MErci d’avance à qui pourra éclairer ma lanterne ;)

    Reply to this message

  • Bonjour,

    J’ai le plugin zpip d’installer sur mon site et depuis que ce dernier est mise en place j’ai de grosse lenteur, est ce normal ?
    Je suis chez ovh en mutualisé.
    Les autres plugin installé sont, couteau suisse, et les plugins nécessaire au bon fonctionnement de zpip.
    Avez vous une idée de là ou cela peut venir ? Que dois je fournir pour pouvoir avoir un peu d’aide : le site se trouve sur www.showhat.fr

    Merci d’avance pour votre aide

    ++
    Fongus

    Reply to this message

  • 2

    A propos du fichier structure.html, quelle est la raison pour laquelle l’inclusion
    <INCLURE{fond=inclure/head}> ne comporte pas nativement le passage de env
    <INCLURE{fond=inclure/head,env}> ?
    Tel que, par exemple, composition n’est pas transmis et c’est assez limitant si l’on veut insérer des scripts ou des css à des endroits précis et pour des compositions précises.
    Mais il y a peut-être des choses qui m’échappent (ça ne serait pas la première - ni la dernière - fois !)

    • Question de performance : cela permet d’avoir un seul inclure/head en cache pour toutes les pages du site, d’autant plus que celui-ci fait en général l’objet de la concatenation/minification des JS et CSS qui peut être un peu couteuse. Avec un {env} sur l’inclusion il faudrait calculer ce squelette pour chaque page, et c’est contre-productif.

      Le parti-pris est que tout ce qui dans le <head> est dépendant des pages, compositions ou autre est mis dans les squelettes head/xxx qui eux reçoivent bien le {env}

    • OK, cela dit, j’ai l’impression qu’il y a une situation qui peut être gênante : l’ordre de la déclaration des .js est importante. Enfin, j’ai cru comprendre ça. En particulier, des scripts qui sont basés sur jquery. Si on met leur appel dans head/page-sommaire.html pour bénéficier de l’environnement, ils vont être appelés en premier et jquery après. (C’est ça ?) et ça va poser problème. (je dis des bêtises peut-être sans doute ?)

    Reply to this message

  • 1

    Bonjour,

    Je recherche une documentation pour l’écriture des Thèmes, et en particulier sur la partie concernant le formulaire de recherche et son placement dans le bandeau.

    Une piste ?

    Merci

    Reply to this message

  • Bonjour,

    Je n’arrive pas à utiliser le critère exclus depuis les extra d’un thème Zpip :

    Le résultat que je veux obtenir :
    je suis sur la page d’un article qui est affichée par le squelette article.html situé, comme dans tout squelette Zpip, dans le sous-dossier Nom_du_theme/contenu.

    Il y a une liste des articles de la rubrique affichée par le squelette Nom_du_theme/extra/article.htm et je voudrais en exclure l’article courant en utilisant le critère exclus.

    Mais ça ne fonctionne pas !

    Je pense pourtant avoir mis le critère exclus au bon endroit.

    Voici les codes des 2 squelettes :


    Nom_du_theme/contenu/article.html ----------------

    <BOUCLE_contenu_article(ARTICLES){id_article}>
    [(#REM) Fil d’Ariane ]
    <p id="hierarchie"><a href="#URL_SITE_SPIP/"><:accueil_site:></a><BOUCLE_ariane(HIERARCHIE){id_article}> &gt; <a href="#URL_RUBRIQUE">[(#TITRE|couper{80})]</a></BOUCLE_ariane>[ &gt; <strong class="on">(#TITRE|couper{80})</strong>]</p>
    
    <div class="contenu-principal">
            <div class="cartouche">
                    [(#LOGO_ARTICLE_RUBRIQUE||image_reduire{90,90})]
                    [<p class="#EDIT{surtitre} surtitre">(#SURTITRE)</p>]
                    <h1 class="h1 #EDIT{titre}">#TITRE</h1>
                    [<p class="#EDIT{soustitre} soustitre">(#SOUSTITRE)</p>]
    
                    
                    [(#REM) Inclure le modele des liens de traductions ]
                    #MODELE{article_traductions}
            </div>
    
            <div class="surlignable">
                    [<div class="#EDIT{chapo} chapo">(#CHAPO|image_reduire{500,0})</div>]
                    [<div class="#EDIT{texte} texte">(#TEXTE|image_reduire{500,0})</div>]
            </div>
    
            [<p class="#EDIT{hyperlien} hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)" class="spip_out">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
    
            [<div class="ps">
                    <h2 class="h2"><:info_ps:></h2>
                    <div class="#EDIT{ps} surlignable">(#PS|image_reduire{500,0})</div>
            </div>]
    
    [(#REM) Gestion du portfolio et des documents ]
    [(#INCLURE{fond=inclure/documents}{id_article})]
    
    </div>
    
    [(#REM) Petition :
    La petition ayant une PAGINATION il faut absolument {env}
    et pourquoi pas ajax
    ][(#PETITION|oui)<INCLURE{fond=inclure/petition}{id_article}{env}{ajax}>]
    
    [<div class="notes surlignable"><h2 class="h2 pas_surlignable"><:info_notes:></h2>(#NOTES)</div>]
    
    [(#REM) Forum de l’article ]
    <a href="#forum" name="forum" id="forum"></a>
    <INCLURE{fond=inclure/forum}{id_article} ></INCLURE>
    [<p class="repondre"><a href="(#PARAMETRES_FORUM|url_reponse_forum)" rel="noindex nofollow"><:repondre_article:></a></p>]
    
    </BOUCLE_contenu_article>

    et


    Nom_du_theme/extra/article.html ----------------

    <BOUCLE_extra_article(ARTICLES){id_article}>
    
    <B_articles1>
    <div class="liste articles extra_dtre">
            #ANCRE_PAGINATION
            <h2 class="h2"><:articles_rubrique:></h2>
            <ul class="liste-items">
                    <BOUCLE_articles1(ARTICLES){id_rubrique} {!par date} {pagination 5}  {exclus}>
                    #INCLURE{fond=inclure/article-resume_col_drte,id_article}
                    </BOUCLE_articles1>
            </ul>
            [<p class="pagination">(#PAGINATION)</p>] 
    </div>
    </B_articles1>
    
    </BOUCLE_extra_article>

    Une idée ?

    Merci d’avance,

    Hervé Le Dantec / Fennec72

    Reply to this message

  • Bonjour à tous,
    Je ne parviens pas à publier mon contenu sur deux colonnes.. Quelqu’un pourrait-il m’indiquer la marche à suivre ?
    Grand merci par avance !
    Anael

    Reply to this message

  • Bonjour

    J’utilise zSpip depuis pas mal de temps, mais il semble qu’il y ait un bug avec la médiathèque intégrée dans spip 3.
    Ma config :
    SPIP 3.0.10
    Zpip-dist v1 1.7.22

    Le bug a lieu quand je veux modifier une image dans le portfolio d’un article. La fenêtre de modification se lance, vide, puis disparaît.
    Ensuite la fenêtre du navigateur cherche un contenu, mais tourne dans le vide.

    J’ai désactivé tous les plugins, le bug n’apparaît plus.
    J’ai donc réactivé les plugins un par un, et c’est bien zspip qui provoque ce bug.
    Sans aucun plugin activé, sauf zSpip il y a bug.

    Quelqu’un sait d’où ça vient ??

    Merci

    Reply to this message

  • 2

    Bonjour,

    Je n’arrive pas afficher un squelette perso dans le “cadre” ZPIP. J’ai installé les plugins ZPIP et Zen Garden sur un SPIP 3 vierge. A priori tout s’est bien passé, j’arrive à installer des nouveaux thèmes et à les visualiser.

    Pour tester, je crée un fichier page-test.html qui contient seulement le texte suivant :

    < h1>Hello world !< /h1>

    (sans les espaces, of course).

    Ce que je veux, c’est évidemment voir mon Hello world intégré dans la zone contenu du squelette global, donc avec en plus l’entête du site, les menus etc.

    Mais concrètement, je le mets où mon fichier page-test.html ?
    J’ai essayé dans les emplacements suivants mais ça me donne une belle erreur 404 à chaque fois :
    -  spip/squelettes/contenu/page-test.html
    -  spip/plugins/auto/zpip/contenu/page-test.html
    -  spip/plugins/auto/monplugin/contenu/page-test.html
    -  spip/plugins/auto/monplugin/squelette/contenu/page-test.html

    Et aux emplacements suivants, je vois bien le Hello world, mais uniquement lui, avec la police de base et tout le reste de la page en blanc :
    -  spip/squelettes/page-test.html
    -  spip/plugins/auto/monplugin/page-test.html

    J’ai désactivé le cache et j’affiche ma page via l’url suivante : http://localhost/spip/spip.php?page=page-test&var_mode=recalcul

    Comme vous l’aurez peut-être constaté, j’aimerai dans l’idéal que mes squelettes soient inclus dans le plugin que je suis en train de faire, puisqu’ils servent à afficher des objets éditoriaux introduits par ce plugin.

    Pourriez-vous me dire où je dois mettre mes squelettes ???
    Merci !

    • je ne connais pas bien le système de Zpip mais il me semble que tu devrais pouvoir afficher ta page avec l’url suivante :

      spip.php?page=test et non pas page-test

      et mettre ton squelette dans tonplugin/contenu/page-test.html
      ou encore squelettes/contenu/page-test.html

    • Rhaaaa mais oui ! C’était juste ça. Je me doutais que c’était un truc tout con mais j’arrivais pas à trouver quoi.
      J’ai relu 15 fois le paragraphe “Pages automatiques” du tuto, mais trop vite à chaque fois... Pourtant c’est bien écrit « pour que la page complète spip.php?page=inscription soit disponible. »

      Et effectivement, dans monplugin/contenu/page-test.html ou squelettes/contenu/page-test.html, c’est bon.

      Bref, merci de m’avoir débloqué !

    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