Anatomie de SPIP : le squelette

  Presenter et habiller les pages de votre site.


Pour faire facilement son site Internet, un SPIP (logiciel libre, très utilisé par les médecins) de base est livré avec un ensemble de squelettes...Squelettes de la "dist" de base [1] : ce sont les fichiers .HTML de squelettes-type utilisés pour la génération de chaque type de page..

Pour avoir trace explicite de vos modifications(cf. Editeurs du WebMestre PC), vous travaillerez dans sur des fichiers squelettes copiés dans un répertoire à créer sous la racine du site, nommé ./squelettes [2].

Le squelette est donc au départ un fichier de type HTML, issu du dossier nommé "squelettes" qui contient des instructions en HTML et des boucles en langage SPIP, ce qui permet d’afficher les pages de contenu de votre site Internet. Notez que vous devrez créer ce dossier à la racine de SPIP sans oublier le "s" à la fin.

 
 
 
 
 
 
 
 

Avant de commencer, il est très important de savoir comment vous allez agencer votre site, en définissant ce qu’on appelle souvent son "layout" ou gabarit général.

Ce gabarit schématise la structure des pages de votre site, CSS dans une organisation de blocs restant aux mêmes emplacements dans toutes vos pages, ce qui donne une ’unité’ à votre site.

Par exemple si vous souhaitez Créer un blog, un bandeau supérieur, une colonne à droite et un cadre de contenu seront bien suffisants.

Chaque bloc du site sera implanté en HTML dans ce que l’on appelle des <div.. . Chaque bloc div doit être placé correctement sur l’écran de manière à obtenir une belle apparence. C’est le rôle de la feuille de style (en CSS).

Sur notre exemple , nous voyons que le site est constitué de 4 blocs différents. Le haut, le contenu, la colonne de droite et le pied du site. En fait il y a un bloc de plus, le bloc principal qui englobera tous les blocs comme sur l’image ci-après. Il y aura donc 5 <div>.

Nous verrons ensuite comment faire la feuille de style. Ce qu’il faut savoir pour l’instant c’est qu’avec SPIP la page d’accueil se trouvant dans le dossier squelettes, se nomme sommaire.html. C’est elle qui apparaitra en premier lorsque l’on visitera votre site.

Quand on regarde la page sommaire du squelette de distribution (de Squelettes de la "dist"), on peut voir ceci (au début d’une "dist" spip 2) :

#CACHE{3600}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">
<head>
<title>[(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]
<INCLURE{fond=inc-head}>
</head>

En décomposant on peut lire #CACHE{3600}

Le cache permet de stocker l’ensemble des données de la page de manière à ne pas saturer le serveur de données de multitudes de requêtes. Ici 3600 correspond au temps d’activation du cache avant qu’il ne se mette à jour. Il est exprimé en secondes, soit 3600 secondes. On pourrait l’augmenter en faisant par exemple #CACHE{24*3600}

Ensuite on lit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">
<head>

Ces lignes sont indispensables dans toutes les pages html du site.
Ensuite :

<title>[(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]
<INCLURE{fond=inc-head}>
</head>

Sont également indispensables dans toutes les pages du squelette. Arrêtons-nous un instant sur deux points :

  • <title>[(#NOM_SITE_SPIP|textebrut)]</title> permettant de donner un titre à votre site et visible par les robots. Le titre sera également visible dans l’onglet de votre navigateur. C’est le titre que vous avez mis dans la configuration du site de l’espace privé.
  • <INCLURE{fond=inc-head}> SPIP permet des inclusions de code dans les pages principales des squelettes. Souvent appelées noisettes, ces inclusions sont de simples lignes de code SPIP. Dans ce cas précis , il s’agit d’appels aux feuilles de styles ainsi qu’à la balise #INSERT_HEAD, balise utile pour appeler des scripts JavaScript. Cette inclusion est donc nécessaire dans les squelettes.

Pour reprendre notre squelette et faire la page d’accueil du site , il suffit d’ouvrir un éditeur de textes basique (voir Editeurs du WebMestre PC ou Editeurs pour WebMestre Linux).

Nous commencerons par reproduire toutes les lignes de code (CSS et HTML, voir Html, php : qu’est-ce que c’est que ce charabia ?) que nous venons de voir, suivi des instructions de

<body>

</body>

</html>

Ensuite nous enregistrons cette page dans le dossier ./squelettes sous le nom sommaire.html ( html étant l’extension du fichier ). Puis nous ferons un copier/coller du dossier inc-head.html depuis Squelettes de la "dist", le squelette de la distribution SPIP dans notre dossier ./squelettes. Si nous regardons la page d’accueil du site, elle est tout blanche et c’est normal !

Intéressons-nous maintenant à la feuille de style propre au site. Nous souhaitons donc un header, un contenu, une colonne à droite un pied de page et le tout centré dans le navigateur.

Pour organiser ces éléments, créez un sous-dossier dans votre répertoire de squelettes : on va le nommer ./squelettes/css, et il servira à ranger vos feuilles de styles, voir par exemple la méthode Daisy pour Spip, ainsi qu’un sous dossier images.
Dezippez dans ce dossier images les images nécessaires au site, et qui se trouve ici :

Zip - 102.7 ko
Images de la feuille de style

Ouvrez votre éditeur de texte et écrivons la feuille de style :

  1. */ feuille de style de mon site (ceci est juste une remarque qui n'est pas prise en compte par le système)*/
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6.  
  7. /* body c'est l'ensemble du site contenu entre <body< et </body>*/
  8. body {
  9. margin: 0; /* marge à zéro*/
  10. background: url('../images/3.jpg'); /* image du fond de page! */
  11. color: #666; /* couleur des textes ici gris */
  12. text-align: left; /* les textes seront alignés à gauche */
  13. ;
  14. }
  15.  
  16. /*La propriété "clear" va être utilisée pour définir si un élément doit se trouver sur la même bande horizontale qu’un élément flottant. On peut donc écrire que cette propriété indique de quelle manière le texte va être placé par rapport à une boîte flottante précédente. Cette propriété ne bénéficie pas de l'héritage. both : ici la boîte générée va se déplacer sous chacune des boîtes flottantes qui précèdent dans le code source.*/
  17.  
  18. .nettoyeur {
  19. clear:both;
  20. }
  21.  
  22. /* le bloc principal englobant toutes les div*/
  23. #main{
  24. margin-left: auto;
  25. margin-right: auto;
  26. width: 980px; height:auto;
  27. text-align: center;
  28. background: #fff;
  29. }
  30.  
  31. /* le bandeau superieur*/
  32.  
  33. #header {
  34. background: url('../images/banniere.jpg'); /* on affiche l'image en fond*/
  35. width: 100%; /*la div prend la totalité de la place*/
  36. height:350px; /* la hauteur de l'image est de 350 pixels */
  37. text-align:left; /* le texte sera aligné à gauche*/
  38. color:#000; /* le texte sera noir*/
  39. }
  40. #header h1
  41. {
  42. padding:100px; /* Si on applique <h1> la marge interne dans le header sera de 100 pixels*/
  43. }
  44. /*Le contenu*/
  45. #contenu {
  46. float:left; /* on aligne la div à gauche */
  47. margin-left: auto;
  48. margin-right: auto;
  49. width:686px;
  50. padding: 5px;
  51. text-align: left;
  52. background:#fff; /* le fond est blanc*/
  53.  
  54. }#contenu ul {padding: 20px;}
  55.  
  56. #droite {
  57. float:right;/* on aligne la div à droite */
  58. margin-left: auto;
  59. margin-right: auto;
  60. width:274px;
  61. padding: 5px;
  62. text-align: left;
  63. background:#fff; /*le fond est blanc*/
  64. border-left:1px dotted #000;/* ligne verticale de 1px en pointillés sur la gauche*/
  65. }
  66. #droite ul {
  67. list-style-type:none;/* on supprime les puces des listes à puces dans la div de droite*/
  68. }
  69. /*le pied de page*/
  70.  
  71. #footer {
  72. margin-left: auto;
  73. margin-right: auto;
  74. width: 980px;
  75. text-align: center;
  76. border-top:1px dotted #000;
  77. border-bottom:1px dotted #000;

Télécharger

cette feuille de style ( très basique) dans le dossier "css" du répertoire "squelettes" sous le nom de : ma_feuille.css (.css étant l’extension)

Si vous maitrisez mal le CSS, je vous conseille de chercher des cours en ligne sur Google.

Reprenons notre page sommaire.html.

Nous allons maintenant déclarer les blocs dans la partie entre <body> et </body> comme ceci :

<body>[(#REM)body prend les attributs de la feuille de style]
<div id="main"> [(#REM) première div englobante]
<div id="header"><h1>#NOM_SITE_SPIP</h1></div>[(#REM)div de la bannière avec un <h1> décalé pour le titre donné par la balise # NOM_SITE_SPIP]

<div id="contenu">[(#REM)La partie de gauche]
<h2>LES ARTICLES</h2>[(#REM)Un titre statique]
<B_essai>
<ul>
<BOUCLE_essai(ARTICLES){tout}>
[<li><a href="#URL_ARTICLE" title="[(#TITRE)]" >(#TITRE)</a> </li>]
</BOUCLE_essai>
</ul>
</B_essai>
</div>[(#REM)on ferme la partie de gauche]
<div id="droite">[(#REM)La colonne de droite]
<h2>LES RUBRIQUES</h2>
<p>&nbsp;</p>[(#REM)On crée une ligne vide pour l'esthétique]
<B_rub>
<ul>
<BOUCLE_rub(RUBRIQUES){tout}{id_rubrique!=1}>
[<li><a href="#URL_RUBRIQUE" title="[(#TITRE)]" >(#TITRE)</a> </li>]
</BOUCLE_rub>
</ul>
</B_rub>
</div>[(#REM)On ferme à droite
<div class="nettoyeur"></div>[(#REM)Pour être sur que tout passera en dessous proprement]
<div id="footer">[(#REM)Le pied de page]
<p>#NOM_SITE_SPIP est propuls&eacute; par : SPIP #SPIP_VERSION</p>[ une balise qui sert à afficher la version  de SPIP]
<BOUCLE_moi(AUTEURS){id_auteur=1}>[cr&eacute;ation: (#NOM)]</BOUCLE_moi>[(#REM)Vous êtes bien le premier rédacteur du site, non?!]
</div>[(#REM)On ferme le footer]
</div>[(#REM)On ferme la div toute englobante main]
</body>

Sauvegardez votre travail. Maintenant ouvrez le fichier que vous avez copier/coller dans votre dossier ./squelettes, soit inc-head.html.

On lit ceci :

[(#REM)
        Head standard de toutes les pages ; les elements specifiques
        (title, description) figurent dans le squelette article.html
]
[(#REM) Preciser le charset ]
<meta http-equiv="Content-Type" content="text/html; charset=#CHARSET" />

[(#REM) Fierement fabrique avec SPIP ]
<meta name="generator" content="SPIP[ (#SPIP_VERSION)]" />

[(#REM) Lien vers le flux RSS du site ]
[<link rel="alternate" type="application/rss+xml" title="<:syndiquer_site:>" href="(#URL_PAGE{backend})" />]

[(#REM) Feuille de style par defaut pour le code genere par SPIP ]
[<link rel="stylesheet" href="(#CHEMIN{spip_style.css}|direction_css)" type="text/css" media="all" />]

[(#REM) Feuille de style par defaut pour les formulaires de SPIP ]
[<link rel="stylesheet" href="(#CHEMIN{spip_formulaires.css}|direction_css)" type="text/css" media="projection, screen, tv" />]

[(#REM) Balise permettant aux plugins d'inserer des CSS ]
#INSERT_HEAD_CSS

[(#REM) Feuille de style CSS pour l'affichage du site a l'ecran ]
[<link rel="stylesheet" href="(#CHEMIN{habillage.css}|direction_css)" type="text/css" media="projection, screen, tv" />]

[(#REM) Feuille de style CSS pour l'impression ]
[<link rel="stylesheet" href="(#CHEMIN{impression.css}|direction_css)" type="text/css" media="print" />]

[(#REM) Feuille de style personnalisée pour surcharger les précédentes
        A noter par defaut cette css n'existe pas
]
[<link rel="stylesheet" href="(#CHEMIN{perso.css}|direction_css)" type="text/css" media="all" />]

[(#REM) Balise permettant aux plugins d'inserer des appels javascript ;
        C'est ici que SPIP va inserer l'appel de la librairie jQuery
        Et appeler a la fin compacte_head pour agreger et compacter tout le head dans des fichiers statiques
        si l'option est cochee dans Configuration
]
#INSERT_HEAD

Après la remarque "feuille de style perso" vous devrez remplacer perso.css par css/mon_style.css et enregistrer votre travail.

Voici ce que vous obtenez une fois le cache vidé ou la page recalculée :

Vous venez de réaliser votre premier squelette.

N.B. : Bien sûr, la suite de cet exposé se trouvera sur l’explication pour écrire LES BOUCLES de vos squelettes


Merci de nous signaler les coquilles ou erreurs qui figureraient dans cette page.

[1Celui-ci est placé dans le dossier "squelettes-dist" , toujours disponible pour permettre une visualisation immédiate et basique du site, à condition que vous ayez du contenu au statut publié !

[2Les fichiers de squelettes présents dans ce répertoire sont automatiquement utilisés par SPIP en surcharge des squelettes prioritaires sur ceux de Squelettes de la "dist" !!

[3Celui-ci est placé dans le dossier "squelettes-dist" , toujours disponible pour permettre une visualisation immédiate et basique du site, à condition que vous ayez du contenu au statut publié !

[4Les fichiers de squelettes présents dans ce répertoire sont automatiquement utilisés par SPIP en surcharge des squelettes prioritaires sur ceux de Squelettes de la "dist" !!


Liens visibles seulement pour les inscrits.

Article publié le 15 août 2010, et actualisé en octobre 2014 .

Répondre à cet article