Les boucles de spip

html et boucles SPIP

<BOUCLE_article_principal(ARTICLES){id_article}>
<!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="fr" lang="fr">
 
  <head>
    <title>#TITRE - #NOM_SITE_SPIP</title>
	<meta name="description" content="#DESCRIPTION" />
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{etud8/style.css}" />
  </head>
 
  <body>
	<!-- mon commentaire -->
	<div id="bandeau">
		[(#LOGO_SITE_SPIP|left|#URL_SITE_SPIP)]
	</div>
	<div id="filariane">
		<p>
		<BOUCLE_filariane(HIERARCHIE){id_article}{">>"}>
			#TITRE
		</BOUCLE_filariane>
		</p>
	</div>
	<div id="navigation">
		<B_navigation>
		<ul>
			<BOUCLE_navigation(RUBRIQUES){racine}>
				<li><a href="#URL_RUBRIQUE">#TITRE</a></li>
			</BOUCLE_navigation>
		</ul>
		</B_navigation>
			<p>Ceci s'affiche si la boucle ne renvoie rien</p>
		<//B_navigation>
	</div>
	<div id="corps">
		<h1>[(#TITRE|replace{super,zut})]</h1>
		#LESAUTEURS - [(#DATE|affdate{saison})]
		[Ce s'affiche avant (#TEXTE|image_reduire{500,0}) Ceci s'affiche après]
	</div>
	<div id="actualites">
 
	</div>
	<div id="pied">
		<p>
			<a href="http://www.spip.net">www.spip.net</a>
		</p>
	</div>
  </body>
</html>
</BOUCLE_article_principal>

Fichier CSS associé : mise en forme en 3 colonnes

body {
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 20px;
	font-family: sans-serif;
	background-color: grey;
	width: 1004px;
}
 
#bandeau {
	height: 120px;
	margin: 5px;
	background-color: fuchsia;
}
 
#filariane {
	height: 20px;
	background-color: green;
}
 
#navigation {
	width: 250px;
	padding: 5px;
	background-color: silver;
	float: left;
}
 
#corps {
	width: 500px;
	padding: 10px;
	margin: 0 10px;
	background-color: red;
	float: left;
}
 
#actualites {
	width: 194px;
	padding:5px;
	background-color: yellow;
	float: right;
}
 
#pied {
	height: 20px;
	background-color: maroon;
	clear: both;
}

Exercices corrigés

1. Ecrire une boucle qui affiche une liste de rubriques à la racine
 classées par ordre alphabétique de titre avec lien vers la page de la rubrique
 et qui affiche "Je n'ai rien trouvé" s'il n'y en a pas.
 
<B_1>
<ul>
	<BOUCLE_1(RUBRIQUES){racine}{par titre}>
	<li><a href="#URL_RUBRIQUE">#TITRE</a></li>
	</BOUCLE_1>
</ul>
</B_1>
<p>Je n'ai rien trouvé</p>
<//B_1>
 
 
2. Dans la même boucle, afficher pour chaque rubrique la liste des articles 
qu'elle contient, classés par date du plus récent au plus ancien,
avec un lien vers la page de l'article, sa date de création et 
ses auteurs.
 
<B_1>
<ul>
	<BOUCLE_1(RUBRIQUES){racine}{par titre}>
	<li><a href="#URl_RUBRIQUE">#TITRE</a>
	<B_2>
	<ul>
		<BOUCLE_2(ARTICLES){par date}{inverse}{id_rubrique}>
		<li><a href="#URL_ARTICLE">#TITRE</a> rédigé le #DATE_REDAC par #LESAUTEURS</li>
		</BOUCLE_2>
	</ul>
	</B_2>
	</li>
	</BOUCLE_1>
</ul>
</B_1>
<p>Je n'ai rien trouvé</p>
<//B_1>
3. Compléter le code suivant pour qu'il affiche "asca" si le titre
contient le mot labo et qui affiche "sourir" sinon.
 
[(#TITRE|match{labo}|?{asca,sourir})]

Syllene - Wiki

Outils pour utilisateurs

Outils du site

Table des matières

Les boucles de spip

html et boucles SPIP

Fichier CSS associé : mise en forme en 3 colonnes

Exercices corrigés

Outils de la page