Arborescence de l’intégration

Arborescence des fichiers statiques d’intégration

Demo statique
Kit statique (HTML/CSS/JS) de démarrage pour l’intégrateur

Rien n’est imposé, mais voici comment organiser au mieux votre intégration statique afin de bénéficier de tous les automatismes :

  • /theme
    • layout.html
    • typo.html
    • article.html
    • rubrique.html
    • ...
    • favicon.ico
    • /css
      • reset.css [*]
      • typo.css [*]
      • form.css [*]
      • spip.css [*]
      • clear.css [*]
      • grid.css
      • layout.css
      • style.css
      • /img : contient les images appelées dans les feuilles de style (réparties au besoin en sous-répertoires bg, border, sprite, etc.)
      • /font : contient, si nécessaire, les polices appelées dans les feuilles de style (avec @font-face)
    • /img : contient les images appelées directement dans le HTML (réparties au besoin en sous-répertoires buttons, tools, etc.)
    • /js
      • jquery.js [**]
      • jquery.form.js [**]
      • ajaxCallback.js [**]
      • jquery.cookie.js [**]
      • script1.js
      • script2.js
      • ...
    • /polices : contient, si nécessaire, les polices à utiliser dans les squelettes pour la génération auto d’images typo
      • stencil.ttf
    • /masque : contient, si nécessaire, les découpes PNG prêtes à être utilisées par SPIP dans les traitements automatisés d’images, en passe-partout, texture, etc.
      • masque1.png
      • masque2.png
      • ...
    • /toto : contient les illustrations et autres faux contenus, et tout ce qu’on ne sait pas où ranger, qui sera vraisemblablement supprimé une fois le site en fonctionnement
      • ...

Arborescence finale dans SPIP

Si l’intégration est bien rangée, elle peut être déposée telle quelle dans SPIP, dans votre dossier « squelettes », qui ressemblera à ça sur le site final :

  • /squelettes
    • sommaire.html
    • rubrique.html
    • article.html
    • ...
    • favicon.ico
    • /css
      • style.css
      • /img
      • /font
    • /js
      • script1.js
      • script2.js
    • /img
    • /masque
    • /polices
    • /modeles
    • /formulaires
    • /lang
    • ...

D’autres fichiers (scripts, feuilles et images) sont appelés dans les pages finales du site, depuis les plugins, structurés selon la même arborescence. Pour surcharger, il suffit de glisser un fichier homonyme, au même emplacement de l’arborescence, dans ce dossier « squelettes ». SPIP, c’est simple !

Arborescence possible dans SPIP+Z

Si vous utilisez SPIP+Z, c’est davantage morcelé. Par exemple :

  • /squelettes
    • body.html : gabarit principal, à partir duquel seront généré toutes les pages, ce fichier ne contient que la balise <body> et les quelques div des blocs principaux
    • /content : contient uniquement les cœurs de vos pages
      • dist.html
      • page.html
      • page_sommaire.html
      • rubrique.html
      • article.html
      • page_login.html
      • ...
    • /aside
      • dist.html
      • page.html
    • /inclure
      • head.html
      • header.html
      • nav.html
      • footer.html
      • ...
    • /modeles
    • /formulaires
    • /lang
    • favicon.ico
    • /css
      • style.css
      • /img
      • /font
    • /js
      • script1.js
      • script2.js
    • /img
    • /masque
    • /polices
    • ...

Notes

[*Il est inutile de les personnaliser ces feuilles de styles : elles ne seront pas déposées sur le site final où elles sont insérées de façon automatisée par ce plugin. Elles sont alors paramétrables depuis l’espace privé de SPIP.

[**Ces fichiers, indispensables au moment de l’intégration, ne doivent pas être personnalisés, car ils ne seront pas déposés sur le site final où ils sont systématiquement insérés par SPIP.

Discussion

Aucune discussion

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 11 janvier 2012