IV) Edition du squelette et des boucles SPIP

dimanche 1er avril 2012 (), par Vader[FR]

Si le squelette fourni par défaut ne vous convient pas et qu’aucun squelette disponible sur le web ne vous plaît, vous devrez éditer vous-même le squelette et les feuilles de style de SPIP, à moins que vous ne préfériez reprendre tout depuis le début et construire votre propre squelette.

Les pages HTML utilisées par le squelette par défaut sont dans le répertoire squelettes-dist, à la racine de spip.

Outre la syntaxe du langage HTML et le fonctionnement des feuilles de style CSS (lequel est abordé ici), vous devrez apprendre à maîtriser, ou du moins comprendre, la syntaxe et le fonctionnement des boucles SPIP, instructions qui indiquent à SPIP quelles données (champs) aller chercher dans la base et afficher.

Ces boucles sont fort heureusement dans un langage simple, ce qui évite de faire soi-même des requêtes SQL complexes.

Les commentaires sont indiqués par la balise REM [(#REM) Inclusion de la page de garde, qui correspond a la rubrique 1 ]

Fonctionnement général des boucles

Prenons comme exemple la boucle affichant les derniers articles, en page de garde de ce site :

<B_articles_recents>
		<div id="derniers_articles" class="menu articles">
			[(#ANCRE_PAGINATION)]
			<h2><:derniers_articles:></h2>
			<ul>
				<BOUCLE_articles_recents(ARTICLES) {par date}{inverse} {pagination 10}>
				<li class="hentry">
					[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{75,45})]
					<h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a> - <small>[(#DATE|affdate_jourcourt)]<!-- [, <:par_auteur:> (#LESAUTEURS)] --></small></h3>
				<!--	[<div class="#EDIT{intro} introduction entry-content">(#DESCRIPTIF)</div>] -->
				</li>
				</BOUCLE_articles_recents>
			</ul>
			[<p class="pagination">(#PAGINATION{page_precedent_suivant_garde})</p>]
		</div>
		</B_articles_recents>

On peut voir :

Ouverture et fermeture de la boucle générale <B_articles_recents> </B_articles_recents> C’est une simple déclaration
Ouverture et fermeture de la boucle de données <BOUCLE_articles_recents(ARTICLES) {par date}{inverse} {pagination 10}></BOUCLE_articles_recents>. Ici, on donne des paramètres à la boucle.

utilisation des champs, ici dans une item (balise li) de liste (balise ul)

<li class="hentry">
					[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{75,45})]
					<h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a> - <small>[(#DATE|affdate_jourcourt)]<!-- [, <:par_auteur:> (#LESAUTEURS)] --></small></h3>
				<!--	[<div class="#EDIT{intro} introduction entry-content">(#DESCRIPTIF)</div>] -->
				</li>

On affiche :

le logo #LOGO_ARTICLE_RUBRIQUE de l’article ou de sa rubrique, si l’article n’a pas de logo. on filtre celui-ci par image_reduire{75,45} afin de réduire sa largeur maximale à 75 et hauteur maximale à 45 pixels.
le titre #TITRE sous forme d’un lien menant à la page de l’article #URL_ARTICLE, et on indique la date #DATE au format court via le filtre affdate_jourcourt (jour et mois, +année si pas année en cours).
Les auteurs et le descriptif rapide ne sont pas affichés, car mis en commentaires entre .

Ouverture d’une boucle de données et déclaration des paramètres

exemple : <BOUCLE_articles_recents(ARTICLES) {par date}{inverse} {pagination 10}>

la boucle est identifiée sous le nom BOUCLE_articles_recents
le type de données recherché concerne des articles, et non des rubriques. on indique donc entre ( ) d’interroger la table ARTICLES (on aurait pu interroger la table RUBRIQUES).
on indique entre { } plusieurs critères de filtre ou tri : {par date}{inverse} pour trier par ordre chronologique, en partant du plus récent, {pagination 10} pour ne prendre que les 10 premiers.

Ce qui permet d’utiliser le système de pagination de SPIP un peu plus loin dans la boucle, après la fermeture de la boucle de données mais avant celle de la boucle générale :
[(#PAGINATION{page_precedent_suivant_garde})] ici, on affiche la pagination, en utilisant un modèle particulier (que j’ai spécialement créé, mais je détaillerais plus loin).

Les paramètres possibles sont, entre autres pour les ARTICLES :

Filtre par rubrique : {id_rubrique}
Tri :
{par date}{inverse} comme vu plus haut, tri chronologique inverse.
{par titre} par ordre alphabétique
{par num titre] alphanumérique (nombres romains et arabes)
{par hasard} au hasard
{par num titre, titre} avec plusieurs critères de tri

Pagination {pagination}en précisant éventuellement le nombre (par défaut, c’est 5) {pagination 10}

Les paramètres possibles sont, entre autres pour les RUBRIQUES :

Filtre par rubrique parente : {id_parent}
Tri : même principe que pour les articles

Affichage des champs

Les champs possibles sont, entre autres pour les ARTICLES :

#URL_ARTICLE : l’adresse du lien menant à la page de l’article.
#SURTITRE
#TITRE
#SOUSTITRE
#CHAPO : une description courte
#DATE, la date de mise en ligne de l’article, que l’on peut filtrer avec affdate_jourcourt
#DATE_REDAC, la date de rédaction antérieure, parfois utilisée.
#LOGO_ARTICLE, le logo que l’on peut filtrer par image_reduire{largeur_max_en_pixels,hauteur_max_en_pixels}
#LOGO_ARTICLE_RUBRIQUE le logo de l’article ou de sa rubrique, si l’article n’a pas de logo propre. même filtre.
#TEXTE
#NOM_SITE : le nom du site externe référencé avec l’article ("Voir en ligne :", très utilisé dans cette rubrique)
#URL_SITE : l’adresse du site externe référencé avec l’article. Si on indique dans le squelette <a href="#URL_SITE" target="_blank">#NOM_SITE</a>, le lien s’ouvrira dans une nouvelle fenêtre ou un nouvel onglet.
#PS
#PETITION

Les champs possibles sont, entre autres pour les RUBRIQUES :

#INTRODUCTION
#URL_RUBRIQUE : l’adresse du lien menant à la page de la rubrique
#TITRE
#LOGO_RUBRIQUE
#TEXTE

Pour filtrer un champ, on indique #NOM_CHAMP|filtre (pour faire le "|", barre verticale plus communément nommée "pipe", c’est alt gr + 6 sur les claviers azerty)

la liste des champs et de leurs filtres étant assez conséquente, je vous invite à consulter la documentation de SPIP pour plus de détails.

Imbrication de boucles

Il est possible d’imbriquer des boucles, par exemple pour avoir les articles ou sous rubriques d’une rubrique.
La règle d’imbrication des balises SPIP est la même que pour les balises HTML : pas de chevauchement, mais garder une structure hiérarchique.
Concrètement, si on ouvre gras puis souligné  il faudra fermer souligné, puis gras, car la balise souligné est à l’intérieur du bloc gras .
C’est la même chose pour les balise d’ouverture <BOUCLE_nom(TABLE){parametre}>et de fermeture </BOUCLE_nom> des boucles générales et de données.

Squelette par article ou rubrique

On peut créer des fichiers de squelette pour certaines rubriques et certains articles en particuliers :

pour une rubrique précise : rubrique=numero_rubrique.html
pour les sous-rubriques d’une rubrique : rubrique-numero_rubrique.html
pour les articles d’une rubrique précise : article=numero_rubrique.html
pour les articles d’une rubrique et de ses sous-rubriques : article-numero_rubrique.html

Ces fichiers seront traités dans un ordre précis. Voir la documentation de spip pour plus de détails.

Inclusion de squelette

Afin de limiter la multiplication du code source, il est possible de déclarer un code "commun" à plusieurs pages dans un fichier, puis de l’inclure.

Par exemple, la page d’index du site charge par défaut le squelette de sommaire. Or, ici, le sommaire et la rubrique 1 (accueil) sont la même chose.
Dans le squelette sommaire, j’inclus donc simplement le squelette de la rubrique 1

[(#REM) Inclusion de la page de garde, qui correspond a la rubrique 1 ]
<INCLURE{fond=rubrique=1}>

De même, on peut remarquer dans chaque page du squelette l’inclusion de l’entête HTML, qui joint les fichiers css et javascript à la page, et déclare des méta-données.
<INCLURE{fond=inc-head}>

On peut ainsi inclure des blocs communs à toutes les pages :

<INCLURE{fond=inc-entete}> l’entête du site avec son titre et/ou logo et/ou descriptif
<INCLURE{fond=inc-rubriques}> un menu de navigation latéral, (ici, incluant une barre de recherche)
<INCLURE{fond=inc-pied}{skel=#SQUELETTE}> le pied de page, avec les liens de connexion à l’interface privée, de contact, de lecture du squelette...

Et dans certaines pages, en l’occurrence les pages articles, qui ouvrent une boucle sur l’article, inclusion d’un bloc "dans la même rubrique", auquel on passe en paramètre l’identifiant de la rubrique dans laquelle est l’article.
<INCLURE{fond=inc-extra}{id_rubrique}>

Modèles de pagination

Dans le répertoire modeles du repertoire prive de spip, il y a différents...modèles de blocs, dont plusieurs styles de pagination, permettant d’afficher "précédent"/"suivant", "page précédente"/"page suivante", d’utiliser des flèches...
Le modèle particulier auquel il est fait référence répond à un besoin précis : la paginantion en page sommaire correspond en fait à celle de la rubrique 1 (Accueil).
j’ai donc inclus ce paramètre dans le modèle, afin de générer le bon lien de pagination.

#SET{urlrubrik,spip.php?rubrique1}

[<a href='[(#GET{urlrubrik}|parametre_url{#ENV{debut},''})]##ENV{ancre}' class='lien_pagination' rel='nofollow'>(#GET{premiere}|>{1}|?{'...',''})</a> #GET*{separateur}]

#SET{i,#ENV{page_courante}|moins{1}}

[(#GET{i}|>{0}|?{' ',''})[

	(#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })

	][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte='&lt;'}{separateur=#GET*{separateur}}{url=#GET{urlrubrik}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})]

]


...
...
...

#SET{i,#ENV{page_courante}|plus{1}}

[(#GET{i}|<{#ENV{nombre_pages}}|?{' ',''})[

	(#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })

	][#GET*{separateur} (#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte='&gt;'}{separateur=''}{url=#GET{urlrubrik}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})]

]

[#GET*{separateur} <a href='[(#GET{urlrubrik}|parametre_url{#ENV{debut},#ENV{nombre_pages}|moins{1}|mult{#ENV{pas}}})]##ENV{ancre}' class='lien_pagination' rel='nofollow'>(#GET{derniere}|<{#ENV{nombre_pages}}|?{'...',''})</a>]

Bien que dans ce cas le paramètre soit indiqué "en dur", ce qui est plus simple pour un modèle d’une pagination unique, on peut l’envoyer lors de l’appel du modèle :

[(#REM) pagination avec lien direct sur article : div h fixe ] 
		<B_pagination_articles>
				<BOUCLE_pagination_articles(ARTICLES){id_rubrique}{par num soustitre}{pagination 1}>
						#PAGINATION{page_precedent_suivant_artiste,env,urlrubrik=spip.php?rubrique#ID_RUBRIQUE}
				</BOUCLE_pagination_articles>
		</B_pagination_articles>

Puis récupérer l’information dans le modèle :

[<a href='[(#ENV{urlrubrik}|parametre_url{#ENV{debut},''})]##ENV{ancre}' class='lien_pagination' rel='nofollow'>(#GET{premiere}|>{1}|?{'...',''})</a> #GET*{separateur}]

#SET{i,#ENV{page_courante}|moins{1}}

[(#GET{i}|>{0}|?{' ',''})[

	(#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })

	][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte='&lt;'}{separateur=#GET*{separateur}}{url=#ENV{urlrubrik}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})]

]

...
...
...
#SET{i,#ENV{page_courante}|plus{1}}

[(#GET{i}|<{#ENV{nombre_pages}}|?{' ',''})[

	(#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })

	][#GET*{separateur} (#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte='&gt;'}{separateur=''}{url=#ENV{urlrubrik}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})]

]

[#GET*{separateur} <a href='[(#ENV{urlrubrik}|parametre_url{#ENV{debut},#ENV{nombre_pages}|moins{1}|mult{#ENV{pas}}})]##ENV{ancre}' class='lien_pagination' rel='nofollow'>(#GET{derniere}|<{#ENV{nombre_pages}}|?{'...',''})</a>]