Squelettes SPIP



Mise en page du site public avec SPIP


Pour gérer la mise en forme des contenus dans SPIP, un langage spécifique permet de créer la mise en page depuis zéro.
  • Avantages : la mise en page est totalement libre
  • Inconvénients : besoin d'une phase d'apprentissage pour apprendre à utiliser le langage

SPIP ne permet de modifier que la présentation du site public. L'espace privé de SPIP (espace de rédaction et de gestion du site) ne peut pas être personnalisé.


Outils nécessaires


  • Un éditeur de texte, pour éditer le HTML

  • Un outil de transfert FTP, ou un serveur Web "en local" (par exemple  EasyPHP).


Afficher un article


On veut décrire de façon générique la façon dont sera affiché un article sur le site public (habillage graphique, éléments affichés, navigation...). On veut :
- pouvoir le décrire en HTML (comme pour une page normale)
- que la description s'adapte automatiquement à tous les articles de la base de données

Par exemple on aimerait le code HTML suivant :


<html>
<head><title>Le titre de l'article</title></head>
<body>
Le texte de l'article ...
</body>
</html>


Afficher un article


Il faut tout d'abord créer le fichier article.html dans le répertoire principal du site SPIP. Ce fichier décrit la mise en page de tous les articles sur le site public.

Il faut indiquer à SPIP quels éléments il doit afficher dans la page :


<html>
<head><title>#TITRE</title></head>
<body>
#TEXTE
</body>
</html>


Les "champs" de type #TITRE (le dièse et les majuscules sont obligatoires) indiquent à SPIP qu'il faut tirer un contenu de la base de données et l'insérer dans la page HTML, à l'endroit donné.

Afficher un article

Il reste un problème : notre description doit être générique, or rien ne dit à SPIP de quel article on veut afficher le "#TITRE" et le "#TEXTE"... Il faut une structure supplémentaire :


<BOUCLE_une(ARTICLES) {id_article}>
<html>
<head><title>#TITRE</title></head>
<body>
#TEXTE
</body>
</html>
</BOUCLE_une>


Décomposition :
  • Pour indiquer quel(s) article(s) on va chercher dans la base de données, il faut une "boucle".
  • Cette boucle est constituée d'un tag ouvrant et d'un tag fermant : <BOUCLE_une ...> ... </BOUCLE_une>
  • Le tag ouvrant contient deux informations : le type de la boucle entre parenthèses (ici une boucle ARTICLES), et le critère de sélection (ici "id_article")
  • La boucle porte un nom choisi librement, mais commençant par "BOUCLE_" : ici c'est "BOUCLE_une".

Afficher un article


Une fois que la boucle a été recopiée et sauvegardée dans le fichier article.html, on peut afficher un article dans le site public et constater que notre mise en page est effectivement appliquée.

l'URL appelée est de la forme article.php3?id_article=12
"article.php3" va chercher notre fichier article.html
"id_article=12" fait coïncider le critère "id_article" de la BOUCLE_une avec l'article portant le numéro 12 : alors #TITRE et #TEXTE sont remplacés, respectivement, par le titre et le texte de cet article

Le fichier article.html ainsi créé est le squelette de mise en page correspondant aux articles.

Dans le manuel : la syntaxe des boucles (http://www.spip.net/fr_article898.html)

Les champs d'un article


Tous les champs d'un article sont récupérables dans un squelette, par exemple :

#SURTITRE
#TITRE
#SOUSTITRE
#CHAPO
#TEXTE
#PS (pour le post-scriptum)
#NOTES (affiche automatiquement les notes de bas de page !)


Exemple :

<BOUCLE_une(ARTICLES) {id_article}>
<html>
<head><title>#TITRE</title></head>
<body>
<h2>#SURTITRE</h2>
<h1>#TITRE</h1>
<h2>#SOUSTITRE</h2>
<strong>#CHAPO</strong>
<div align="justify">#TEXTE</div>
<blockquote>Post-scriptum: #PS</blockquote>
<small>#NOTES</small>
</body>
</html>
</BOUCLE_une>

Dans le manuel : la boucle ARTICLES (http://www.spip.net/fr_article902.html)


Un sommaire : les dix derniers articles publiés


Pour modifier l'apparence de la page d'accueil du site public, il faut créer le fichier sommaire.html.

On veut afficher les derniers articles publiés, sur le modèle :

<html>
<body>
<h2>"#TITRE" du dernier article publié</h2>

<h2>"#TITRE" de l'avant-dernier article publié</h2>

...
</body>
</html>


Un sommaire : les dix derniers articles publiés


Pour dire à SPIP d'afficher ces articles, il faut :
  • une boucle ARTICLES
  • un critère pour récupérer tous les articles publiés
  • un critère pour classer par ordre inverse de date de publication


<html>
<body>
<BOUCLE_sommaire(ARTICLES) {tout} {par date} {inverse}>
<h2>#TITRE</h2>
<a href="#URL_ARTICLE">Lire l'article</a>
</BOUCLE_sommaire>
</body>
</html>


Décomposition :
  • {par date} signifie qu'il faut trier par ordre chronologique
  • {inverse} inverse l'ordre de tri, afin d'aller du plus récent au plus ancien
  • la boucle est affichée autant de fois qu'il y a d'articles (d'où le terme de "boucle")

Un sommaire : les dix derniers articles publiés


Pour se restreindre aux dix derniers articles publiés, il faut ajouter un critère supplémentaire disant au système de s'arrêter après les dix premiers résultats :

[...]
<BOUCLE_sommaire(ARTICLES) {tout} {par date} {inverse} {0,10}>
[...]

Décomposition :
dans "{0,10}", le deuxième nombre est le nombre de résultats à afficher, le premier nombre est le numéro du premier résultat à afficher (dans l'ordre de tri).

Les critères de classement


Les critères de classement sont nombreux.

Par exemple on peut classer les articles :
{par titre}
{par date}
{par visites}
{par hasard}
etc.

Auteurs d'un article : des boucles imbriquées


On veut afficher les auteurs de chaque article. On utilise pour cela une boucle de type "AUTEURS" à l'intérieur de la boucle "ARTICLES".

Si on se contente d'une boucle sans critère, on affiche... tous les auteurs du site.

<html>
<body>
<BOUCLE_sommaire(ARTICLES) {tout} {par date} {inverse}>
<h2>#TITRE</h2>
<p>Article écrit par :
<BOUCLE_auteurs(AUTEURS)>#NOM - </BOUCLE_auteurs>
</p>
</BOUCLE_sommaire>
</body>
</html>


Auteurs d'un article : des boucles imbriquées


Pour n'afficher que les auteurs de l'article, on ajoute un critère {id_article} à la boucle AUTEURS, pour indiquer que l'on affiche bien les auteurs de l'article en question.

<html>
<body>
<BOUCLE_sommaire(ARTICLES) {tout} {par date} {inverse}>
<h2>#TITRE</h2>
<p>Article écrit par :
<BOUCLE_auteurs(AUTEURS) {id_article}>#NOM - </BOUCLE_auteurs>
</p>
</BOUCLE_sommaire>
</body>
</html>

Décomposition : la boucle AUTEURS sélectionne les auteurs de l'article courant, c'est-à-dire l'article affiché par la boucle ARTICLES englobante

Dans le manuel : la boucle AUTEURS (http://www.spip.net/fr_article907.html)

Afficher les brèves


On utilise ici la boucle BREVES. Elle sélectionne automatiquement les brèves publiées.

Par exemple pour afficher les dix dernières brèves publiées sur tout le site :
<BOUCLE_breves(BREVES) {par date} {inverse} {0,10}>

Les dix dernières brèves publiées dans une rubrique particulière :
<BOUCLE_breves(BREVES) {id_rubrique} {par date} {inverse} {0,10}>

Afficher les brèves


Le squelette d'une brève peut être modifié en créant le fichier breve.html

<BOUCLE_une(BREVES) {id_breve}>
<html>
<head><title>#TITRE</title></head>
<body>
<h1>#TITRE</h1>
<div align="justify">#TEXTE</div>
[<div align="right>Voir en ligne : <a href="(#URL_SITE)">#NOM_SITE</a></div>]
</body>
</html>
</BOUCLE_une>

Dans le manuel : la boucle BREVES (http://www.spip.net/fr_article906.html)

Un squelette, deux fichiers


Un squelette est en réalité constitué de deux fichiers :
  • le fichier .html contenant la mise en page (par exemple article.html)
  • le fichier .php3 qui lance SPIP pour calculer la mise en page (par exemple article.php3)

Le fichier .php3 est constitué de la façon suivante :

<?php

$fond = "article";
$delais = 2 * 3600;

include "inc-public.php3";

?>


Décomposition :
  • $fond est le nom du fichier .html à utiliser : ici article.html (l'extension .html doit être omise).
  • $delais est le délai d'expiration avant lequel la page est automatiquement recalculée, en secondes. 3600 secondes font une heure, donc ici la page dure deux heures (2 * 3600).
  • La ligne "include" fait appel à SPIP pour calculer la page, il ne faut pas la modifier.

Un squelette, deux fichiers


Le squelette par défaut :

  • Les fichiers article.php3, breve.php3, sommaire.php3, etc. sont livrés par défaut pour plus de commodité, mais on peut les modifier ou en créer d'autres.

  • Si le fichier .html n'existe pas, SPIP cherche un fichier par défaut, qui se termine en "-dist.html". Par exemple si article.html n'existe pas, SPIP va chercher article-dist.html. Là aussi, SPIP fournit un certains nombre de fichiers par défaut : article-dist.html, breve-dist.html, sommaire-dist.html...


Un squelette, deux fichiers


On peut créer un squelette spécifique pour une rubrique.

Par exemple :si le fichier article-15.html existe, il sera utilisé pour tous les articles de la rubrique numéro 15 et de ses descendantes (à la place du fichier article.html) ; de même pour les fichiers breve-15.html, rubrique-15.html...


Formulaire et résultats de recherche


Pour afficher le formulaire de recherche, il faut insérer #FORMULAIRE_RECHERCHE à l'endroit désiré (par exemple dans sommaire.html). Le formulaire ne s'affichera réellement que si le moteur de recherche est activé dans la configuration du site (dans l'espace privé).

Le #FORMULAIRE_RECHERCHE affiche une case où l'on peut entrer un ou plusieurs termes de recherche, et lancer la recherche en appuyant sur la touche entrée. Lorsque la recherche est lancée, elle conduit à la page recherche.php3 qui est elle-même un squelette (recherche.php3, recherche.html).

Dans recherche.html, plusieurs critères peuvent être ajoutés dans les boucles pour se limiter aux résultats de recherche :

<BOUCLE_articles(ARTICLES) {recherche} {par points} {inverse} {0,15}> ... </BOUCLE_articles>
<BOUCLE_breves(BREVES) {recherche} {par points} {inverse} {0,15}> ... </BOUCLE_breves>


Dans le manuel : les boucles de recherche (http://www.spip.net/fr_article903.html)

D'autres formulaires


SPIP fournit un certain nombre de formulaires prédéfinis, à insérer dans vos squelettes afin de :

  • répondre à un forum (#FORMULAIRE_FORUM),

  • s'inscrire en tant que rédacteur (#FORMULAIRE_INSCRIPTION),

  • signer une pétition (#FORMULAIRE_SIGNATURE), etc.

Dans le manuel : les formulaires (http://www.spip.net/fr_article1827.html)


Navigation par mots-clés


La boucle MOTS permet d'afficher des mots-clés.

<BOUCLE_mots(MOTS) {par titre}>
<strong>#TITRE</strong>[ : #DESCRIPTIF]<br>
</BOUCLE_mots>


L'usage le plus intéressant est d'afficher les mots-clés associés à un article :

<BOUCLE_mots(MOTS) {id_article} {par titre}>


Réciproquement, on peut aussi afficher les articles associés à un mot :

<BOUCLE_articles(ARTICLES) {id_mot} {par titre}>


En combinant les deux, on peut obtenir les articles liés à un autre via une thématique commune :

<BOUCLE_mots(MOTS) {id_article} {par titre}>
<B_articles_lies>
<h3>#TITRE</h3>
<ul>
<BOUCLE_articles_lies(ARTICLES) {id_mot} {par titre}>
<li><a href="#URL_ARTICLE">#TITRE</a></li>
</BOUCLE_articles_lies>
</ul>
</B_articles_lies>
</BOUCLE_mots>


Dans le manuel : la boucle MOTS (http://www.spip.net/fr_article909.html)


Les feuilles de style


SPIP permet de modifier facilement l'apparence des textes affichés grâce aux feuilles de style (CSS).

p.spip {
  • font-family: Georgia, "Times New Roman", serif;
  • text-align: justify;
}
h3.spip {
  • font-family: Verdana, Tahoma, sans-serif;
  • font-weight: bold;
  • font-size: 160%;
}

Une feuille de style par défaut est livrée dans "spip_style.css".

Dans le manuel : utiliser les feuilles de style avec SPIP (http://www.spip.net/fr_rubrique269.html)

D'autres boucles


La boucle HIERARCHIE permet d'afficher la liste des rubriques menant à l'élément courant (article ou rubrique), depuis la racine du site.

Par exemple :

Accueil<BOUCLE_hierarchie(HIERARCHIE)> - #TITRE</BOUCLE_hierarchie>.

Affichera :

Accueil - Première rubrique - Sous-rubrique - Rubrique courante.

D'autres boucles


La boucle SITES affiche les sites référencés ou syndiqués

La boucle SYNDIC_ARTICLES affiche les articles syndiqués (d'un site particulier, ou de tous les sites).

La boucle FORUMS affiche les messages d'un forum (par exemple celui d'un article). C'est une structure potentiellement arborescente, comme les rubriques : on peut donc utiliser une boucle récursive. Mais on peut aussi forcer les forums à s'afficher "à plat".

La boucle DOCUMENTS affiche les documents attachés à une rubrique ou un article.

D'autres champs et balises


#URL_SITE_SPIP est l'adresse absolue du site public (telle que configurée dans l'espace privé).

<a href="#URL_SITE_SPIP">Retour à l'accueil</a>

#NOM_SITE_SPIP est le nom du site tel que configuré dans l'espace privé.

<head>
<title>#NOM_SITE_SPIP : accueil</title>
</head>

#URL_ARTICLE, #URL_BREVE, #URL_RUBRIQUE, #URL_MOT permettent de gérer facilement la navigation.

Installer puis personnaliser un squelette SPIP


Sur Spip-contrib.net : des squelettes sous licence libre, à télécharger.

Par exemple, pour le site de l'APRA, reprise et personnalisation du squelette de a-brest.net.

--> modifier images, bannière, logos et les styles dans la feuille de style.

Quelques exemples




Pour aller plus loin


Documentation sur le système des squelettes de mise en page :
Squelettes et plugins SPIP
Documentation SPIP à télécharger :
VINCENT)
 Produire et gérer du contenu support de cours