spipzine

Accueil > Ateliers > spipOpedia > Squelettes

Squelettes

mercredi 5 juillet 2006, par spipOpède

Dans SPIP, les squelettes ne sont pas seulement l’infrastructure, mais aussi la peau d’un site. Ce sont en effet les modèles des pages qui seront affichées, une fois remplies par le contenu tiré de la base de données.

Un squelette est donc l’ensemble des pages HTML [1] qui serviront de matrice à celles qui seront vues dans le navigateur. Elles sont composées, outre de HTML, de boucles et de balises qui ont pour rôle d’indiquer ce qu’il faut aller chercher dans la base puis comment l’afficher. Le code HTML et les styles qu’il utilise feront la mise en page de ce contenu avant de l’envoyer composé du serveur au navigateur client.

Chacun peut donc créer ses propres squelettes pour un site au style original, si les squelettes par défaut, contenus dans le répertoire dist ne conviennent pas. Certains, une fois ce travail achevé, le mettent à la disposition des autres sur spip-contrib ou sur leur propre site.

On peut donc imaginer une page HTML classique, dans laquelle des zones sont réservées à un contenu dynamique. Par exemple l’encart ci contre "Dans la même rubrique" est appelé par la boucle :

[(#REM) Articles dans la meme rubrique ]
<B_articles_rubrique>
        <div class="breves">
                #ANCRE_PAGINATION
                <h2 class="menu-titre"><a href="#URL_RUBRIQUE"><:meme_rubrique:></a></h2>
                [<p class="pagination">(#PAGINATION)</p>]
                <ul>
<BOUCLE_articles_rubrique(ARTICLES) {id_rubrique} {par date}{inverse} {pagination 20}>
                <li><a href="#URL_ARTICLE>#TITRE</a></li>
</BOUCLE_articles_rubrique>
                </ul>
        </div>
</B_articles_rubrique>

On reconnaît bien les balises HTML <div>, <h2>, <p>, <ul>, <li>, <a>, ainsi que leurs styles css <class="menu-titre">. Mais on voit également le code spécifique à SPIP : une boucle <BOUCLE_articles_rubrique(ARTICLES) {id_rubrique} {par date}{inverse} {pagination 20}> avec ses critères, et les balises qu’on lui demande d’afficher : #TITRE, par exemple.

Le HTML et le code SPIP sont parfois plus étroitement imbriqués encore : ainsi, dans <a href="#URL_ARTICLE">#TITRE</a>, on voit bien que le lien est une balise SPIP, #URL_ARTICLE , qui affichera finalement l’url adéquate, de même que son affichage #TITRE (en l’occurence le titre de l’article qui mènera à sa page).

La conception de squelettes demande donc, outre une connaissance du HTML, l’acquisition de la syntaxe SPIP. Celle-ci, par contre, permet d’éviter d’avoir à se plonger dans les arcanes de MySQL ou de PHP pour obtenir un site parfaitement dynamique.

Faire ses squelettes

Pour commencer à se familiariser avec les squelettes, deux tutoriels sont disponibles sur spip.net :
- SPIP pas à pas, comme introduction ;
- Tutoriel : utilisation avancée des boucles et des mots-clé, qui présente la conception et la création d’un site entier.

Pour mieux comprendre l’utilisation des css, on se reportera avec profit à la rubrique dédiée de spip.net :
- Utiliser les feuilles de style avec SPIP.

Ensuite, l’étude des différents squelettes disponibles est une très bonne source d’apprentissage.

Où trouver des squelettes ?

SPIP est fourni avec un squelette de base : /dist, clair et pédagogique, mais il est simple de lui substituer des alternatives. Le plugin switcher de squelettes permet même de tester différents squelettes en les changeant à la volée à partir du site public. Certains squelettes offrent des variations de leur propre style grâce aux thèmes.

C’est sur Spip-contrib que se regroupent les squelettes que leurs auteurs partagent. Si vous souhaitez en faire autant avec les vôtres, vous trouverez quelques consignes. Vous pourrez en trouver d’autres au fil des sites. Une piste : le tag squelette de del.icio.us.

La zone abrite bien sûr les squelettes développés en commun.

Pour trouver des idées, un petit tour sur spip-herbier vous offrira un bel aperçu de ce qu’il est possible de faire.

Une liste de squelettes compatibles SPIP 1.9.x sur le site de la SEM.


[1On peut également appeler squelette chacune de ces pages.