Avec les boucles, j’ai du mal ; avec les ul et les li, encore plus ! mais voilà ce que j’ai fabriqué (et qui fonctionne) :
Une boucle de navigation
Pour afficher rubriques et sous-rubriques dans une colonne latérale du site
1) La boucle
<div class="nav">
<B_rubriques_0>
<BOUCLE_rubriques_0(RUBRIQUES){racine}{par num titre}{par titre}>
<ul>
<li class="nav0">[<a href="#URL_SITE_SPIP/#URL_RUBRIQUE">(#TITRE|supprimer_numero)</a>]
<BOUCLE_rubriques_1(RUBRIQUES){id_parent}{par num titre}{par titre}>
<ul>
<li class="nav1">[<a href="#URL_SITE_SPIP/#URL_RUBRIQUE">(#TITRE|supprimer_numero)</a>]
</li>
</ul>
</BOUCLE_rubriques_1>
</li>
</ul>
</BOUCLE_rubriques_0>
</B_rubriques_0>
</div>
La boucle ci-dessus est à mettre, par exemple, dans le squelette « sommaire.html », dans la partie « navigation »
et cela donne ceci (voir image) :
2) Dans un fichier css
Ensuite j’ai précisé les caractéristiques, en mettant ce qui suit dans spip_style.css (il manque les accolades ! c’est à vous de les mettre)
:
/* Listes*/li font-size : 98% ; list-style-type : square ; text-align : left ; line-height : 1,4em ;li.nav0 font-size : 95% ; text-align : left ; line-height : 1.2em ; margin-bottom:3px ;li.nav1 font-size : 80% ; text-align : left ; line-height : 1.1em ;/*niveau0 */.nav ul li color : #41291B ; font-weight : bold ; list-style-type : disc ; margin-left : -8px ; font-weight : 90% ;.nav ul li a color : #41291B ;.nav ul li a:hover background-color :#FFF ; color :#41291B ; display:block ; font-size:100% ; font-weight:bold ; height:auto ; margin-bottom:3px ; margin-top:3px ; padding:2px 0 2px 5px ; width:100% ;text-decoration : none ;/*niveau1 */.nav ul li ul li color : #41291B ; font-weight : bold ; list-style : none ; font-weight : 80% ;.nav ul li ul li a color : #41291B ;.nav ul li ul li a:hover background-color :#FFF ; color :#41291B ; display:block ; font-weight:bold ; height:auto ; margin-bottom:3px ; margin-top:3px ; padding:2px 0 2px 5px ; width:100% ;text-decoration : none ;
Explications
Dans le css , ne pas confondre les id et les class
Si on écrit : div id=« monid » il faut mettre #monid dans le CSS
Si on écrit : div class=« maclasse » il faut mettre .maclass dans le CSS
J’ai trouvé des explications intéressantes ici :
http://www.w3qc.org/ressources/traductions/trucs-astuces-css-1/
et j’ai entendu parler des boucles récursives :
http://www.spip.net/fr_article914.html
http://www.guiderdoni.net/Boucle-rubrique-et-sous-rubrique.html
Mais bon ... j’ai encore du chemin à faire !
Boucle rubrique - article
Boucle pour afficher — la rubrique n°12 — et le titre de ses trois derniers articles
<ul><li><a href="http://www.paysdechateaubriant.com/-lettres-d-informations-">Lettres d'information</a>
<ul>
<BOUCLE_articles(ARTICLES) {id_rubrique=12}{par date} {inverse}{0,3}>
<li><h3><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></h3>
</li>
</BOUCLE_articles>
</ul></li></ul>
Boucle - exclure
Le problème : j’ai des rubriques de niveau 1 - et des sous-rubriques (que j’appelle encore : rubriques de niveau 2). Je veux afficher dans la colonne de navigation
- 1) toutes les rubriques de niveau 1 (sauf les rubriques 10 et 50) avec leurs sous-rubriques.
- 2) mais je veux que les sous-rubriques qui portent les numéros 30, 31, 35, 36, 52 ne soient pas affichées.
Voici donc la boucle que j’ai utilisée :
<BOUCLE_rubriques_1(RUBRIQUES){racine}{par num titre}{par titre}{id_rubrique!==^(10|50)$}>
<ul>
<li >[<a href="#URL_SITE_SPIP/#URL_RUBRIQUE">(#TITRE|supprimer_numero)</a>]
<BOUCLE_rubriques_2(RUBRIQUES){id_parent}{par num titre}{par titre}{id_rubrique!==^(30|31|35|36|52)$}>
<ul>
<li >[<h3 ><a href="#URL_SITE_SPIP/#URL_RUBRIQUE">(#TITRE|supprimer_numero)</a></h3>]
</li>
</ul>
</BOUCLE_rubriques_2>
</li></ul>
</BOUCLE_rubriques_1>
Explication : ceci me donne toutes les rubriques de niveau 1 sauf 10 et 50 :
_ <BOUCLE_rubriques_1(RUBRIQUES){racine}{par num titre}{par titre}{id_rubrique!==^(10|50)$}>
Ceci me donne toutes les rubriques de niveau 2 en excluant les rubriques 30,31,35,36,52 : <BOUCLE_rubriques_2(RUBRIQUES){id_parent}{par num titre}{par titre}{id_rubrique!==^(30|31|35|36|52)$}>