[Spip] Afficher uniquement les sous-rubrique et leurs branches d'une rubrique

EdenPrime · 11 Février 2011

Hello,

Voici mon problème, j'essaie d'afficher uniquement les sous-rubrique d'une rubrique. Par exemple avec les rubriques comme ceci :

PC---

- Mac

- Windows

|---- Windows 7

|---- XP

- Linux

J'aimerais afficher ceci :

- Mac

- Windows

|---- Windows 7

|---- XP

- Linux

J'ai le code de base qui afficher la première arborescence.


<B_rac>
	<ul class="tree">
		<BOUCLE_rac(RUBRIQUES){racine}{lang}>
			<BOUCLE_rub(RUBRIQUES){id_parent}{par num titre, titre}>
				<li[ (#EXPOSE{class="inpath"})]>
					<a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]</a>
						<B_sousrub>
							<ul>
								<BOUCLE_sousart(ARTICLES){id_rubrique}{par num titre, titre}>
									<li[ (#EXPOSE{class="inpath"})]>
										<a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></li>
								</BOUCLE_sousart>
								<BOUCLE_sousrub(RUBRIQUES){id_parent}{par num titre, titre}>
									<li[ (#EXPOSE{class="inpath"})]>
										<a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]</a>
										<BOUCLE_rec(BOUCLE_sousrub)>
										</BOUCLE_rec>
									</li>
								</BOUCLE_sousrub>
							</ul>
						</B_sousrub>
						<B_art>
							<ul>
							<BOUCLE_art(ARTICLES){id_rubrique}{par num titre, titre}>
								<li[ (#EXPOSE{class="inpath"})]><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero|couper{30})]</a></li>
							</BOUCLE_art>
							</ul>
						</B_art>
					<//B_sousrub>
				</li>
			</BOUCLE_rub>
		</BOUCLE_rac>
	</ul>
</B_rac>

Mais impossible de n'afficher que la sous-arborescence.

Merci

Modifié 11 Février 2011 par Ernestine
Merci d'utiliser les balises de code pour écrire du code.

**captain_torche** · 11 Février 2011

Tu devrais t'en sortir avec des boucles récursives, je pense : http://www.spip.net/fr_article914.html

EdenPrime · 14 Février 2011

J'avais déjà suivi cette piste mais sans succès malheureusement.

Je fais ça car j'ai déjà un menu en haut de la page et je n'ai pas envie qu'il se répète totalement à droite.

**captain_torche** · 14 Février 2011

Ton arbo est issue de la racine, ou il y a d'autres éléments ?

Une autre solution serait de ne pas commencer par la racine, mais directement par la rubrique que tu cibles, non ?

EdenPrime · 14 Février 2011

J'ai déjà essayer aussi mais ça répéte par exemple windows dans la sous-sous-arborescence windows (Ce qui donne windows ---- windows, windows 7, window xp)

Oui issue de la racine

**captain_torche** · 14 Février 2011

C'est bizarre, vu qu'avec ton code, on ne devrait pas voir du tout la première rubrique ciblée ... Essaye de mettre des préfixes à chacun des titres, pour savoir quelle boucle affiche le titre "de base" ?

EdenPrime · 14 Février 2011

Merci bien j'ai enfin trouvé la solution. Mais maintenant j'ai un autre problème.

Merci beaucoup

**captain_torche** · 14 Février 2011

Tu pourrais préciser ce qui a résolu ton problème ?

Honix · 7 Mars 2011

Tu pourrais préciser ce qui a résolu ton problème ?

Bonjour Captain_torche, merci pour ton aide !

Comme tu es sans réponse de EdenPrime, je me permet de préciser son problème car c'est moi qui lui ai donné comme mission de corriger notre menu.

Notre structure du site est architecturée comme ceci :

Francais
- Accueil
- Logiciels
  - Windows
    - aaa
    - bbb
    [*]MacOsX
    - ccc
    [*]Linux
    - ddd
[*]Anglais
- Home
- Software
  - Windows
    - aaa
    - bbb
    [*]MacOsX
    - ccc
    [*]Linux
    - ddd

Actuellement notre menu est construit comme ceci dans le squelette :


<B_rac>
<ul>
<BOUCLE_rac(RUBRIQUES){racine}{lang}>
<BOUCLE_rub(RUBRIQUES){id_parent}>
   <li>
      <a href="">#TITRE</a>
      <B_sousrub>
      <ul>
      <BOUCLE_sousart(ARTICLES){id_rubrique}>
         <li><a href="">#TITRE</a></li>
      </BOUCLE_sousart>

      <BOUCLE_sousrub(RUBRIQUES){id_parent}>
         <li><a href="">#TITRE</a>
            <BOUCLE_recurcive(BOUCLE_sousrub)></BOUCLE_recurcive>
         </li>
      </BOUCLE_sousrub>
      </ul>
      </B_sousrub>

      <B_art>
      <ul>
      <BOUCLE_art(ARTICLES){id_rubrique}>
         <li><a href="">#TITRE</a></li>
      </BOUCLE_art>
      </ul>
      </B_art>
      <//B_sousrub>
   </li>
</BOUCLE_rub>
</BOUCLE_rac>
</ul>
</B_rac>

Ca marche pas mal, càd qu'il retourne toutes les rubriques, sous-rubriques et articles de la langue dans laquelle on se trouve.

Ce que nous aimerions obtenir c'est tous les rubriques et articles de la rubrique qui se trouve juste en dessous de "Francais" ou "Anglais". Donc dans mon exemple, si on est quelque part dans la rubrique "logiels" j'aimerai afficher "Windows" et "MacOsX" meme si on est dans la sous-rubrique "Linux".

Est-ce que tu pense que cela est possible d'après vous ?

**captain_torche** · 7 Mars 2011

Essaye peut-être en regardant du côté de la boucle hiérarchie : http://www.spip.net/fr_article913.html

Elle permet de ressortir l'arborescence depuis la page actuelle jusqu'à la racine. En créant de nouvelles boucles à l'intérieur, ça devrait sans doute fonctionner.

Honix · 10 Mars 2011

Essaye peut-être en regardant du côté de la boucle hiérarchie : http://www.spip.net/fr_article913.html

Elle permet de ressortir l'arborescence depuis la page actuelle jusqu'à la racine. En créant de nouvelles boucles à l'intérieur, ça devrait sans doute fonctionner.

Captain_torche, je te dois une bière !

J'avais testé la boucle Hierarchie il y'a longtemps mais sans succès, et là j'ai insisté un peu et ça marche !!!

Voici ma boucle :


<B_rub>
<ul>
<BOUCLE_rub(RUBRIQUES){id_rubrique}{lang}>
<BOUCLE_hierarchie(HIERARCHIE){id_rubrique}{1,1}{tout}>
   <B_sousrub>
      <BOUCLE_sousart(ARTICLES){id_rubrique}>
         <li[ (#EXPOSE{class="current"})]><a href="#URL_ARTICLE">#TITRE</a></li>
      </BOUCLE_sousart>
   <BOUCLE_sousrub(RUBRIQUES){id_parent}>
      <li>
         <a href="#URL_RUBRIQUE">#TITRE</a>
         <B_rec>
         <ul>
            <BOUCLE_rec(BOUCLE_sousrub)></BOUCLE_rec>
         </ul>
         </B_rec>
      </li>
   </BOUCLE_sousrub>
      <BOUCLE_art(ARTICLES){id_rubrique}>
         <li[ (#EXPOSE{class="current"})]><a href="#URL_ARTICLE">#TITRE</a></li>
      </BOUCLE_art>
   <//B_sousrub>
</BOUCLE_hierachie>
</BOUCLE_rub>
</ul>
</B_rub>

Il me reste un souci à résoudre, c'est que je ne peux pas mettre la class CSS "current" à l'aide de #EXPOSE sur la balise <li> de la boucle "sousrub". Le but de la class "current" c'est de mettre en évidence la rubrique ou l'article dans lequel on se trouve. Donc, à cause de l'usage de la boucle récusive je me retrouve avec tout le cheminement des rubriques avec la class "current" au lieu de juste celle qui est sélectionnée.

En tout cas, merci pour ton aide, j'avance bien

**captain_torche** · 10 Mars 2011

Pour le #EXPOSE, tu ne peux pas le mettre sur le lien plutôt que sur le li ?

Honix · 10 Mars 2011

Pour le #EXPOSE, tu ne peux pas le mettre sur le lien plutôt que sur le li ?

Sauf erreur ça ne changera pas le problème. Ma classe CSS ressemble à ça : li.current a {}, li.current li {}, etc

Je veux qu'un seul article ou qu'une seule rubrique soit "highlightée". Pas toute l'arborescence.

Car maintenant, si je mets un EXPOSE dans ma boucle sousrub qui est recursive, je me retrouverais avec un menu du genre :

Rubrique 0

--Rubrique 1

----Article A

----Rubrique 1.1

------Rubrique 1.1.1

--------Article D

--Rubrique 2

----Article B

----Article C

Alors que j'aimerais que seul Rubrique 1.1.1 soit en gras dans cet exemple.

**captain_torche** · 10 Mars 2011

Dans le code source, le .current est attribué à quel(s) élément(s) ?

Honix · 10 Mars 2011

Comme pour les boucles des articles, à l’élément HTML <li>. Si j'ai bien compris ta dernière question.

Je cherche depuis un petit moment mais il ne semble pas y avoir de solution. Vu qu'on ne peut pas utiliser les compteurs de boucle avec les récursions...

Mais même si je créer toutes les boucles à la main en faisant une profondeur suffisante (imbriquer 3-4 boucles sous-rubriques) je pense que j'aurais le même soucis. C'est #EXPOSE qui n'est pas suffisamment puissant ? Ou plutôt trop puissant, j'aimerais juste highlighter le lien actif, pas toute l'arborescence T_T

Je dois mal m'y prendre, il faut peut-être juste utiliser un CSS "a active" ou un truc simple du genre.

L'ennui c'est que je ne suis pas propriétaire du CSS qu'on doit utiliser. Faudrait surcharger dans ce cas.

Modifié 10 Mars 2011 par Honix

**captain_torche** · 10 Mars 2011

En fait, je voulais savoir s'il est attribué à un seul li (dans le code généré), ou à plusieurs, auquel cas il y aurait un souci.

Honix · 10 Mars 2011

Mmh, là je suis perdu. Effectivement mon problème c'est que j'ai le "current" sur plusieurs <li> et je veux qu'il y en ait un maximum.

AvenueDuWeb · 24 Mars 2011

Bonjour,

Je tenterai ça plutôt :

<li[ (#ENV{id_article}|=={#ID_ARTICLE}|?{'class="current"',''})]><a href="#URL_ARTICLE">#TITRE</a></li>

Et si ça ne fonctionne pas, je déclarerai avec SET les 2 variables qui t'intéressent (id_article si existant, id_rubrique) avant ton code et je ferai la même chose qu'au dessus mais le #GET au lieu du #ENV.

@+

Honix · 24 Mars 2011

Je repasse par là pour répéter mes remerciements. La boucle hiérarchie marche vraiment bien

Je n'ai pas trouvé de solution au 2e problème, je laisse tomber car j'ai pas le temps de faire mieux.

Honix · 24 Mars 2011

Bonjour,

Je tenterai ça plutôt :
<li[ (#ENV{id_article}|=={#ID_ARTICLE}|?{'class="current"',''})]><a href="#URL_ARTICLE">#TITRE</a></li>
Et si ça ne fonctionne pas, je déclarerai avec SET les 2 variables qui t'intéressent (id_article si existant, id_rubrique) avant ton code et je ferai la même chose qu'au dessus mais le #GET au lieu du #ENV.

@+

Merci de ton aide. J'avais jamais utilisé ce type de tests, même si je savais que ça existe.

Dès que je dégage un peu de temps pour ça je vais voir si c'est exploitable dans mon cas.

nemikap · 2 Juillet 2013

Je me permets de déterrer ce Topic car il m'a aidé à solutionner un des problèmes exposés au cours de la discussion.

Ma problématique initiale consistait à mettre en évidence uniquement la rubrique ou la sous-rubrique courante de mon menu arborescent placé dans un bloc div ( pour info, mon arborescence n'affiche pas les articles ). Un petit schéma pour mieux comprendre :

Architecture grossière du site :

Rubrique 1
- Rubrique 1.1
  - Rubrique 1.1.1
  - Rubrique 1.1.2
- Rubrique 1.2
- Rubrique 1.3
  - Rubrique 1.3.1
  - Rubrique 1.3.2
  - Rubrique 1.3.3
Rubrique 2
- Rubrique 2.1
  - Rubrique 2.1.1
  - Rubrique 2.1.2
    - Rubrique 2.1.2.1
    - Rubrique 2.1.2.2
  - Rubrique 2.1.3
- Rubrique 2.2
  - Rubrique 2.2.1
- Rubrique 2.3
  - Rubrique 2.3.1
  - Rubrique 2.3.2
Rubrique 3

Etc.

Pour info, la boucle de mon arborescence est faite de telle sorte que seule l'arborescence de la rubrique de niveau 1 (Rubrique 1 ou Rubrique 2 ou Rubrique 3 ou etc.) dans laquelle je me trouve est affichée :

- Par exemple, si je parcours la Rubrique 2 mon arborescence affiche :

Rubrique 2

Rubrique 2.1
Rubrique 2.2
Rubrique 2.3

- Ou alors, si je parcours la Rubrique 2.1 mon arborescence affiche :

Rubrique 2

Rubrique 2.1
- Rubrique 2.1.1
- Rubrique 2.1.2
- Rubrique 2.1.3
Rubrique 2.2
Rubrique 2.3

- Ou encore, si je parcours la Rubrique 2.1.2 mon arborescence affiche :

Rubrique 2

Rubrique 2.1
- Rubrique 2.1.1
- Rubrique 2.1.2
  - Rubrique 2.1.2.1
  - Rubrique 2.1.2.2
- Rubrique 2.1.3
Rubrique 2.2
Rubrique 2.3

Vous aurez donc remarqué que dans mes exemples, les Rubriques 1 et 3 ne sont pas affichées car je suis dans la Rubrique 2.

Je mets au cas où la structure de ma boucle qui est placée dans un fichier html à part et qui est à inclure dans les fichiers squelettes où on souhaite faire apparaître ce menu de navigation (par exemple : rubrique.html, article.html, etc.) :



<BOUCLE_secteur(HIERARCHIE){tout}{id_rubrique}{racine}{0,1}>

<B_rubriques>

<div id="menu_rubriques">

	<a href="#URL_RUBRIQUE">#TITRE</a>

	<hr/>

	<ul>

	<BOUCLE_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>

		<li>

			<a href="#URL_RUBRIQUE">#TITRE</a>

			<B_sous_rubriques>

			<ul>

				<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre}{!par date}><BOUCLE_test_expose(RUBRIQUES) {id_enfant}>#EXPOSE{' '}</BOUCLE_test_expose>

				<li><a href="#URL_RUBRIQUE">#TITRE</a><BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re></li>

				</B_test_expose></BOUCLE_sous_rubriques>

			</ul>

			</B_sous_rubriques>

		</li>

	</BOUCLE_rubriques>


	</ul>

</div>

</B_rubriques>

</BOUCLE_secteur>

La feuille de style associée :



#menu_rubriques li {

	font-size: .8em;

	margin-left: 1em;

	}

#menu_rubriques li ul li{

	font-size: 1em;

	margin-left: 1em;

	}

#menu_rubriques ul { list-style-type: disc; }

#menu_rubriques li ul { list-style-type: square; margin-left: 0.2em; }

#menu_rubriques li li ul { list-style-type: circle; margin-left: 0.2em; }

#menu_rubriques li li li ul { list-style-type: disc; margin-left: 0.2em; }

#menu_rubriques li li li li ul { list-style-type: square; margin-left: 0.2em; }

#menu_rubriques hr {margin : 0.4em 0;}

Et donc, à partir de cette base, l'objectif souhaité était de mettre en évidence uniquement la rubrique ou la sous-rubrique courante de manière à l'affichée en noire et qu'elle ne renvoie pas de lien, comme ceci :

- Si je parcours la Rubrique 2.1.2 mon arborescence affiche (il faut imaginer que toute les rubriques renvoient vers des liens sauf celle en gras) :

Rubrique 2

Rubrique 2.1
- Rubrique 2.1.1
- Rubrique 2.1.2
  - Rubrique 2.1.2.1
  - Rubrique 2.1.2.2
- Rubrique 2.1.3
Rubrique 2.2
Rubrique 2.3

Grâce à la discussion de ce topic et aux infos trouvées sur cette page http://www.spip.net/fr_article2319.html , j'ai fini par trouver la solution à mon problème. Voici donc le code exposé ci-dessus et adapté pour répondre aux critères souhaités :



<BOUCLE_secteur(HIERARCHIE){tout}{id_rubrique}{racine}{0,1}>

<B_rubriques>

	<div id="menu_rubriques">

		[(#ENV{id_rubrique}|=={#ID_RUBRIQUE}|?{<span class="nav_current_rub">#TITRE</span>}|sinon{<a href="#URL_RUBRIQUE">#TITRE</a>})]

		<hr/>

		<ul>

			<BOUCLE_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>

			<li>[(#ENV{id_rubrique}|=={#ID_RUBRIQUE}|?{<span class="nav_current_rub">#TITRE</span>}|sinon{<a href="#URL_RUBRIQUE">#TITRE</a>})]

				<B_sous_rubriques>

					<ul>

					<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre}{!par date}>

						<BOUCLE_test_expose(RUBRIQUES) {id_enfant}>#EXPOSE{' '}</BOUCLE_test_expose>

							<li>[(#ENV{id_rubrique}|=={#ID_RUBRIQUE}|?{<span class="nav_current_rub">#TITRE</span>}|sinon{<a href="#URL_RUBRIQUE">#TITRE</a>})]<BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re></li>

						</B_test_expose>

					</BOUCLE_sous_rubriques>

					</ul>

				</B_sous_rubriques>

			</li>

			</BOUCLE_rubriques>

		</ul>

	</div>

</B_rubriques>

</BOUCLE_secteur>

Et la feuille de style associée :



#menu_rubriques li {

	font-size: .8em;

	margin-left: 1em;

	}

#menu_rubriques li ul li{

	font-size: 1em;

	margin-left: 1em;

	}

#menu_rubriques ul { list-style-type: disc; }

#menu_rubriques li ul { list-style-type: square; margin-left: 0.2em; }

#menu_rubriques li li ul { list-style-type: circle; margin-left: 0.2em; }

#menu_rubriques li li li ul { list-style-type: disc; margin-left: 0.2em; }

#menu_rubriques li li li li ul { list-style-type: square; margin-left: 0.2em; }

#menu_rubriques hr {margin : 0.4em 0;}


.nav_current_rub {color: black;}

Voilà, en espérant aider ceux qui chercheront à l'avenir à créer ce genre de menu de navigation en arborescence .

Modifié 2 Juillet 2013 par nemikap

**captain_torche** · 2 Juillet 2013

Merci à toi ! Ca fait plaisir de voir des retours comme ça !

Connexion

[Spip] Afficher uniquement les sous-rubrique et leurs branches d'une rubrique

Sujets conseillés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter