Comprendre la structure des squelettes

La modification de squelettes est pratiquement la première étape obligée de personnalisation dès l’installation d’un site, au-delà des configurations initiales : et ce n’est pas une étape évidente, même quand on connait le HTML.... à moins de passer par un thème, à commencer par utiliser ZPIP !

Ci-dessous, c’est une récapitulation rapide de l’Anatomie de SPIP : le squelette, qui vous est résumée pour comprendre comment cela peut fonctionner, avant de l’appliquer :
- aux squelettes de Squelettes de la "dist"
- à l’introduction des conventions et des formes de création des blocs des squelettes ZPIP,

ou à MODIFIER un JEU de SQUELETTES de toutes origines.... pour Reprendre un design d’un site !

Article publié le 26 janvier 2012, et actualisé en décembre 2021

 
 
 
 
 
 
 
 
 
 
 
 
 
 

 Présenter une page-squelette

Pour proposer une page à l’affichage Web, le serveur doit récupérer les informations d’un squelette HTML pour y insérer les données textuelles d’un objet de la base de données, par exemple un article : le squelette principal correspondant est extrait du fichier article.html de même nom (et il sera automatiquement relié par la balise #URL_ARTICLE depuis d’autres pages).

 Des blocs communs

On se rend rapidement compte que la plupart des pages et des squelettes du site proposeront des éléments communs, en particulier un bandeau d’entête, un menu de navigation et un pied de page : naturellement, il est souhaitable d’écrire une seule fois ces parties, ce que l’on fait dans des noisettes ; il suffit ensuite d’avoir un #INCLURE pour y faire appel dans le squelette principal de page.

 Un design de structuration des gabarits

En prenant un peu de recul sur sa création des pages, les squelettes principaux qui constituent ensemble le squelette [1] le Webmestre doit vite définir une certaine structure des zones des blocs dans les pages, qui assure une continuité graphique et de lecture-navigation entre les pages du site ;
on traduit en général cette disposition commune (Layout en anglais) dans une structure type (voir par exemple la typologie traditionnelle pour Les Gabarits/Layout de pages ou Layouts Gala).

 L’approche SPIP-dist

La démarche des squelettes fournis en standard dans Squelettes de la "dist" reste d’abord dans une perspective pédagogique de personnalisation : chaque page-type est directement définie par un squelette éponyme, fichier HTML de même nom fourni dans le répertoire spécifique ./squelettes-dist.

- Vous pourrez donc facilement personnaliser une page en recopiant ce fichier dans le dossier ./squelettes-dist : voyez MODIFIER un JEU de SQUELETTES.

- En revanche une personnalisation plus complète de vos squelettes, en particulier du design des pages et surtout des titres, risque de devoir être reportée dans l’ensemble des squelettes, obligeant à modifier la totalité des fichiers HTML du dossier d’origine ./squelettes-dist..

 L’approche ZPIP

L’approche ZPIP (Zpip ou Z, Zcore et Thèmes) repart de ce constat, et vise aussi à faciliter la construction ultérieure de nouvelles pages homogènes ; pour cela, on s’appuye désormais sur un modèle-gabarit commun de "layout", fourni de façon standard par un plugin ZPIP, qui propose trois facilités principales :

  1. la structure générale de disposition est définie, et donc modifiable, uniquement dans une feuille de style
  2. tous les éléments constants génériques sont automatiquement inlus par le gabarit, personnalisables simplement en créant uen nouvelle noisette nommée dans l’emplacement idoine
  3. pour créer n’importe quelle page nouvelle, il suffit de définir un fichier squelette HTML de contenu qui comprendra juste la boucle d’affichage du contenu !
    que par rajout de plugins de thèmes graphiques.

Quelques principes d’architecture permettent de mieux s’orienter dans cet univers, apparemment caractérisé par un nombre plus important de fichiers à connaître avant de créer une page de squelette :
- une page-type correspond à un contenu principal
- assemblage des blocs des divers sous-dossiers par le même nom commun identifiant la page-type
- une structure de gabarit générique body s’installant automatiquement autour de la création de la page du contenu de toute nouvelle page, les <div> contenant les blocs issus des divers sous-dossiers définissent le dimensionnement du gabarit grâce aux div.{id-bloc donnés en CSS.
- ZPIP propose déjà les blocs pour les objets natifs (article, rubrique...)
- vous pouvez très facilement créer une nouvelle page, en choisissant un nom (exemple new), en créant le simple bloc (ou noisette) de contenu dans un fichier ./squelettes/contenu/page-new.html, que vous appellerez d’un autre page par un lien

<a href="#URL_PAGE{new,env}">Appel à la page-new</a>

SPIP/ZPIP se chargeant de compléter automatiquement le squelette général en utilisant par défaut les blocs dist.html trouvés dans les autres sous-dossiers de squelette...

Pour compléter les possibilités de SPIP, on peut aussi s’intéresser aux variantes natives en SPIP, ou aux possibilités de Composition (un plugin complémentaire).


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1Entendre : le dossier ./squelettes des squelettes principaux.HTML, des feuilles de style .CSS (Voir CSS.), des images incluses et des noisettes du site..


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 26 janvier 2012, et actualisé en décembre 2021 .

Répondre à cet article