Accueil > About wyziwyg > Z architecture

Z architecture

industrialization of layouting for spip. That’s why we put a Z in wyziwyg ;-)

Le framework Z est conçu pour industrialiser la production des gabarits HTML sur les projets Web. Il est disponible sous forme de plugin pour SPIP ou en projet PHP standalone.

Organisation des blocs de page

Dans SPIPr il a été choisi de découper le corps de la page en 6 blocs déclinables page par page, nommés et organisés comme suit :

    • header est le bloc d’en-tête de la page ;
    • breadcrumb est le bloc de navigation fil d’Ariane de la page ;
    • content est le bloc de contenu principal de la page : cest lui qui pilote l’existence d’une page ;
    • aside est un bloc de contenu secondaire, plutôt dédié à ce qui est en relation avec le contenu principal de la page ;
    • extra est un autre bloc de contenu secondaire, pour ce qui n’a pas de rapport direct avec le contenu principal de la page ;
    • footer est le bloc de pied de la page ;

Par ailleurs, le plugin Z-core ajoute 2 blocs de meta-contenu supplémentaires, qui concernent la partie <head> de la page :

head est le contenu éditorial spécifique à la page (<title> et autres <meta> descriptions ;
head_js permet d’ajouter des scripts externes spécifiques à la page (ils ne seront pas concaténés avec les scripts communs à toutes les pages). Ces deux derniers blocs ne concernent pas du contenu visible de la page, mais fonctionnent de la même façon.

Ce découpage en blocs est une convention choisie et utilisée par SPIPr. Vous pouvez la modifier ou la personnaliser, mais alors il se peut que certains thèmes ou plugins ne fonctionnent plus automatiquement, et vous devrez adapter au cas par cas à votre convention de nommage des blocs.

Organisation des dossiers

Pour chaque bloc de la page, un dossier homonyme contient les squelettes de chaque page. On utilise donc 8 dossiers homonymes aux blocs :

    • header/
    • breadcrumb/
    • content/
    • aside/
    • extra/
    • footer/
    • head/
    • head_js/

En complément, on utilise le rangement dans les dossiers suivants :

inclure/ contient les squelettes inclus transverses, c’est à dire commun à plusieurs pages du site

    • img/ contient les images utilisées par les squelettes
    • css/ contient les feuilles de style au format CSS ou LESS
    • css/img/ contient les images décoratives utilisées par les feuilles de style

A la racine, subsistent certains squelettes utilies pour SPIP, comme 404.html, article.html, auteur.html, backend.html, breve.html, forum.html, mot.html, rubrique.html, site.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.

Z-core fournit le squelette structure.html qui sert à la fabrication de toutes les pages. Ce squelette 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.