Aller au contenu

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

EdenPrime

Par EdenPrime
dans Systèmes de publication

 Partager

Sujets conseillés

EdenPrime

EdenPrime

Posté
Posté (modifié)

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é par Ernestine
Merci d'utiliser les balises de code pour écrire du code.
Lien vers le commentaire
Partager sur d’autres sites
  • 3 semaines plus tard...
Honix

Honix

Posté
Posté

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 ?

Lien vers le commentaire
Partager sur d’autres sites
Honix

Honix

Posté
Posté

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 :)

Lien vers le commentaire
Partager sur d’autres sites
Honix

Honix

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Honix

Honix

Posté
Posté (modifié)

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é par Honix
Lien vers le commentaire
Partager sur d’autres sites
  • 2 semaines plus tard...
AvenueDuWeb

AvenueDuWeb

Posté
Posté

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.

@+

Lien vers le commentaire
Partager sur d’autres sites
Honix

Honix

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Honix

Honix

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
  • 2 years later...
nemikap

nemikap

Posté
Posté (modifié)

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 smartass.gif .


Modifié par nemikap
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...