Pour cela nous allons vraiment contruire la première page de notre squelette SPIP : la page sommaire du site (sommaire.html).

Nous ne nous occuperons pas de la mise en page fine pour l’instant. Nous ne nous soucierons ici que de faire apparaître les informations que l’on souhaite à l’endroit que l’on veux.

Toutes les étapes du tutoriel ci-après sous-entendent que vous ayiez du contenu dans votre site sinon les boucles n’afficheront rien et ce sera normal.

La documentation officielle sur les boucles et balises de SPIP

À ce point de notre tutoriel, la consultation régulière de la documentation officielle de SPIP est inévitable : http://www.spip.net/fr_rubrique143.html. il est conseillé d’avoir en permanence un onglet de notre navigateur ouvert sur cette même documentation officielle.

Épurer le squelette sommaire de la distribution SPIP

D’accord, nous créons de squelettes de toutes pièces, mais la seule référence à la documentation officielle ne va pas nous donner toutes les astuces pour afficher rapidement et sûrement les informations que l’on veut voir apparaître sur nos pages du site.

Tutoriel fully compatible avec SPIP X.X.X

Les squelettes de la distribution ont le mérite de toujours être à jour des dernières nouveautés de SPIP (en ce qui concerne les boucles et les balises). Nous allons donc réutiliser les morceaux de code fournis avec les squelettes par défaut afin de ne pas perdre de temps et, surtout, d’avoir un squelette 100% compatible avec la dernière version de SPIP que l’on utilise.

Ce tutoriel est basé initiallement sur la version 1.9.2b de SPIP mais le respect des quelques consignes qui suivent permettent à ce tutoriel d’être compatible avec toutes les versions futures de SPIP.

Nous allons donc récupérer le fichier /dist/sommaire.html que nous allons copier et le renommer : /squelettes/sommaire-dist.html afin de l’avoir à portée de main et ne pas le confondre avec notre /squelettes/sommaire.html déjà présent dans ce répertoire.

Ensuite, nous allons effacer toutes les DIV et les ID, CLASS du fichier /squelettes/sommaire-dist.html afin de ne garder que les boucles et les balises de SPIP intégrée au code XHTML de la page.

Exemple :

• Le code suivant :

  [(#REM) Les deux derniers articles ]
  <B_articles_recents>
  <div class="liste-articles">
  <h2 class="invisible"><:derniers_articles:></h2>
  <ul>
  <BOUCLE_articles_recents(ARTICLES) {par date}{inverse} {0,2} {doublons}>
  <li>
  [(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{150,100})]
  [<p class="surtitre">(#SURTITRE)</p>]
  <h3 class="titre"><a href="#URL_ARTICLE">#TITRE</a></h3>
  [<p class="soustitre">(#SOUSTITRE)</p>]
  <small>[(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]</small>
  [<div class="#EDIT{intro} texte">(#INTRODUCTION)</div>]
  <br class="nettoyeur" />
  </li>
  </BOUCLE_articles_recents>
  </ul>
  </div>
  </B_articles_recents>

• devient :

  [(#REM) Les deux derniers articles ]
  <B_articles_recents>
  <h2><:derniers_articles:></h2>
  <ul>
  <BOUCLE_articles_recents(ARTICLES) {par date}{inverse} {0,2} {doublons}>
  <li>
  [(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{150,100})]
  [<p>(#SURTITRE)</p>]
  <h3><a href="#URL_ARTICLE">#TITRE</a></h3>
  [<p>(#SOUSTITRE)</p>]
  [(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]
  [<div>(#INTRODUCTION)</div>]
  </li>
  </BOUCLE_articles_recents>
  </ul>
  </B_articles_recents>

Des fichiers supplémentaires

Lors de la lecture du code du fichier sommaire-dist.html on peut noter la présence de plusieurs <INCLURE{fond=xxx}>. Ces codes permettent d’insérer tout un paquet de code présent dans un autre fichier (fichier répondant au nom xxx.html).

Nous allons donc rapatrier les 4 fichiers appelés par des INCLURE dans le fichier sommaire-dist.html.

Nous aurons donc, dorénavant, les fichiers supplémentaires suivants (après renomage par l’ajout, ici, du suffixe "bio") :

• /squelettes/inc_biorubriques.html
• /squelettes/inc_biohead.html
• /squelettes/inc_bioentete.html
• /squelettes/inc_biopied.html

Adaptation de l’en-tête XHTML

On va simplement recopier l’en-tête du fichier sommaire-dist.html vers le fichier sommaire.html en remplaçant la fonction INCLURE (<INCLURE{fond=inc-head}>) par <INCLURE{fond=inc-biohead}>

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

Puis, dans le fichier inc_biohead.html, nous allons rajouter le préfixe "bio_" à tous les noms des feuilles de style, même pour les feuilles de style que nous n’avons pas encore créées ([(#CHEMIN{css/bio_habillage.css}|direction_css)]). Nous ne devons pas oublier le "css" au début de l’adresse afin de bien préciser que nos feuilles de style sont dans le sous-répertoire du même nom.

Mais cette dernière manipulation ne donne pas de résultats visibles. Pour voir un effet sur le site, il faut procéder à des modifications entre les deux balises XHTML <body> et </body>.

Adaptation du menu des rubriques

Pour cela, rien de plus simple. Nous insérons juste un <INCLURE{fond=inc-biorubriques}> dans la <div id="droite"> de notre page sommaire.html :

<div id="droite">
[(#REM) Menu de navigation par rubriques ]
<INCLURE{fond=inc-biorubriques}>
</div><!-- fin div id="droite" -->

Nous avons perdu l’affichage prévu du moteur de recherche.
Pour corriger cela, nous ajoutons la balise [(#FORMULAIRE_RECHERCHE)] tout au début de notre fichier inc-biorubriques.html.

Les boucles manquantes

Dans le fichier sommaire.html ci-joint, nous avons remplacé toute les boucles manquantes de manière à faire apparaître les informations que nous souhaitons faire figurer sur la première page du site.

Je vous invites à lire le code pour voir quels ajouts ont été faits pour obtenir le résultat suivant :

L’image qui est visible sur la capture d’écran est celle qui a été chargée directement depuis l’espace privé de SPIP, dans la partie Configuration (image du site).