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é dansinclure/
-
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.
Menu de navigation principale
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.
Discussions by date of activity
168 discussions
Bonjour,
tout d’abord bravo pour le boulot effectué. J’ai installé Aveline + ZSpip (avec la collec de plugins qui vont bien, du noiZetier à Compositions... que de boulot fourni !), c’est vraiment chouette. Par contre, j’ai un soucis, je n’arrive pas à comprendre comment faire apparaitre le contenu tout simple d’un article ou d’une rubrique. Avec le noiZetier j’arrive à faire des listes d’articles, des listes de rubriques, faire apparaitre tout un tas de trucs qui demandaient des plombes à coder, mais un simple contenu d’article, non, impossible. Ya un truc que j’ai dû zapper dans les explications...
De même, comment personnaliser l’allure du portfolio? Intégrer dans le sommaire des éléments qui ne sont pas dans le noiZetier (un lecteur mp3, un ticker en ajax, une zone “achat paypal”, que sais-je..) ? J’avoue qu’avec ces plugins et la structure toute chamboulée que celà provoque, je suis un peu perdu...
Merci
Reply to this message
Salut,
merci pour ce beau travail.
Je n’arrive pas à voir s’afficher les brèves. J’ai loupé un truc?
Reply to this message
Salut,
La venu de thème dans un squelettes pour SPIP va permettre de créer un habillage graphique bien plus rapidement que dans sa forme intiale. Zpip est un squelettes vraiment prometteur ! Bravo ! Je pense qu’il faudrait regrouper les plugins nécéssaires en un seul plugin. L’utilisateur lambda peut être freiné par la multitude de plugins à installer (6) et il se posera ligitimement la question :
“Pourquoi installer autant de plugin, moi je veux juste installer le super nouveau squelettes Zpip !?”
Question : Est il possible de regrouper toutes les dépendances du plugin Zpip en un seul plugin ou au moins diminuer le nombre de celui-ci ?
Je trouve dommage que Zpip soit aussi dépendant, malgré que cela ne me dérange pas plus que çà ! Mais c’est plus fort que moi, je pense à l’utilisateur qui devra affronter son installation.
Spipement Squirrel :)
Je réponds à une demande un peu ancienne mais je pense qu’elle peut être récurrente, notamment par rapport au développement du plugin Zpip-Aveline.
La solution demandée ici par Squirrel (fusionner les plugins qui fonctionnent avec zpip) semble aller à l’encontre des orientations des développeurs de ces plugins (logique d’interaction sans interdépendance : chaque plugin doit pouvoir évoluer de son côté sans que son absence d’évolution n’ait d’impact sur les autres). En revanche, peut-être qu’une distrib spécialisée pourrait être pas mal. Si quelqu’un peut m’expliquer comment on fait une distrib, je suis preneur !
Reply to this message
Bonjour,
Je suis en train de tester Zpip et tout va bien c’est très bien !
J’ai néanmoins une question...Je cherche à faire une page d’aperçu pour l’impression dans une boite modale avec un bouton en bas de page imprimer (window.print();).
Ma question est la suivante : Comment forcer cette fenêtre modale à utiliser la feuille impression.css et éventuellement comment créer un squelette particulier pour l’impression dans Zpip.
Merci d’avance.
Reply to this message
Bonjour.
Serai-t-il possible de seleccionner un theme independent pour chaque rubrique? où pour chaque “squelette”, par exemple pour recherche.html où plan.html un theme independent du general du site?
Merçi.
Reply to this message
Je débute...
je veux modifier le thème arclite_red: je l’ai renommé, j’ai déposé le contenu dans squelettes et modifié le graphisme, c’est OK.
Maintenant je veux modifier le contenu de la page d’accueil: j’ai installé une copie de sommaire.html dans le dossier squelettes, sans rien changer, et la page d’accueil n’a plus le même aspect ni les modifications graphiques que j’avais réalisées. Y a-t-il un chemin à modifier?
Que faire?
Reply to this message
Bonjour,
tout d’abord merci pour ce squelette. J’aurais besoin d’inclure un formulaire dans l’un de mes articles. Selon la documentation officielle de SPIP (http://www.spip.net/fr_article3796.html), les formulaires (fichiers .html et .php correspondants) doivent être mis dans le dossier squelettes/formulaire/. Quand est-il avec le plugin ZPIP ? Faut-il créer ces fichiers dans le sous-dossier zpip/contenu/ ?
Merci pour votre aide.
Bonjour
Tu places les formulaires dans squelettes/formulaires comme d’habitude.
Reply to this message
Bonjour,
Je suis à ma toute première expérimentation de Zpip. J’ai créé 2 squelettes navigation/dist.html et extra/dist.html avec du html pour mes tests.
Quand je lance la page d’accueil (sommaire), je n’ai que le contenu de navigation/dist.html. Là ou devrait être celui de extra, il y a le formulaire d’inscription du site. C’est contraire à la description de cette page (section:Pages automatiques). En revanche il m’affiche bien le contenu si je renomme extra/dist.html en extra/page-sommaire.html
Est-ce une erreur de ma part? Le squelette par défaut n’est apparement pas dist.html pour le répertoire extra.
Pour info, SPIP et ZPIP sont à jour.
Merci de vos conseils.
Je me répond. Le squelette page-sommaire.html est définit dans le plugin zpip. N’est-ce pas une erreur? Cela “force” l’utilisateur à faire un squelette spécifique pour la page sommaire...
Bin, en même temps, la page sommaire (et articles, et rubriques ..) sont vraiment des pages à contenu spécifique.
Une page sans contenu spécifique ... heu , je vois pas ce qu’elle affiche en fait /
J’ai une zone dans mes pages qui est extra-contextuelle et je voulais qu’elle soit visible partout (je pense que extra/ est bien le répertoire approprié). Je pensais mettre l’info dans extra/dist.html et aller me coucher!
J’ai du retarder ma sieste en dupliquant le contenu dans extra/page.html et extra/page-sommaire.html... C’est pas bien grave, je retarderais mon réveil...
Reply to this message
Ce message concerne le forum sur zspip (avec le thème welsh) Je l’ai pposté là mais je me demande si le bon post n’est pas ici.
Il y a un mauvais affichage de la page forum comme sur l’image
Désolé si je fais du bruit dans le forum...
J’oubliais de dire que le site est en ligne après les essais habituel en local : www.malem-auder.org
André
Salut,
reproductible sur le zpip.spip.org et le thème welsh , c’est bien su au thème uniquement.
Il faut corriger le thème, ce n’est pas zpip en cause.
Ok désolé d’avoir douté de Zspip :-)
André
Reply to this message
Bonjour
je découvre ce nouveau concept. Habitué à spip je bidouillais mes squellettes. Ici, dans l’hypothèse de mises à jour futures, quelle est la meilleure procédure lorsqu’on veut persnnaliser zspip? Où placer les fichiers modifiés? Tant les fichiers squelettes que les fichiers css des thèmes?
Merci
Salut,
Dans le répertoire squelettes/, avec les mêmes sous répertoire que zpip. Comme d’habitude quoi ;)
Par exemple pour modifier le contenu des rubriques : squelettes/contenu/rubriques.html.
Pour les css : petites correction en conservant le changement de thèmes : perso.css.
Tu peut aussi utiliser le dossier squelettes pour y placer un thème. (http://www.spip-contrib.net/Ecrire-un-theme)
Merci
j’ai essayé en mettant les fichier modifiés dans le répertoire du thème. Ca marche mais ce n’est sans doute pas la bonne façon de procéder. Ok je modifie. Merci
Reply to this message
Add a comment
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
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.
Follow the comments: |