Construire un menu à plusieurs niveaux pour umbraco
Question
J'essaie de créer un menu CSS Dropdrown à plusieurs niveaux pour un site Web que je crée sur le système de gestion de contenu Umbraco.
Je dois le construire pour avoir la structure suivante:
<ul id="nav">
<li><a href="..">Page #1</a></li>
<li>
<a href="..">Page #2</a>
<ul>
<li><a href="..">Subpage #1</a></li>
<li><a href="..">Subpage #2</a></li>
</ul>
</li>
</ul>
Alors maintenant, j'essaie de comprendre comment faire une imbrication à l'aide de XSLT. C’est ce que j’ai jusqu’à présent:
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<!-- update this variable on how deep your menu should be -->
<xsl:variable name="maxLevelForMenu" select="4"/>
<xsl:template match="/">
<ul id="nav">
<xsl:call-template name="drawNodes">
<xsl:with-param
name="parent"
select="$currentPage/ancestor-or-self::node [@level=1]"
/>
</xsl:call-template>
</ul>
</xsl:template>
<xsl:template name="drawNodes">
<xsl:param name="parent"/>
<xsl:if test="umbraco.library:IsProtected($parent/@id, $parent/@path) = 0 or (umbraco.library:IsProtected($parent/@id, $parent/@path) = 1 and umbraco.library:IsLoggedOn() = 1)">
<xsl:for-each select="$parent/node [string(./data [@alias='umbracoNaviHide']) != '1' and @level <= $maxLevelForMenu]">
<li>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
</a>
<xsl:if test="count(./node [string(./data [@alias='umbracoNaviHide']) != '1' and @level <= $maxLevelForMenu]) > 0">
<xsl:call-template name="drawNodes">
<xsl:with-param name="parent" select="."/>
</xsl:call-template>
</xsl:if>
</li>
</xsl:for-each>
</xsl:if>
</xsl:template>
Ce que je n'arrive pas à comprendre, c'est comment vérifier si le premier niveau (ici, page n ° 1 et page n ° 2) a des enfants, et s’ils ajoutent le supplément <ul>
pour contenir le <li>
les enfants.
Quelqu'un veut-il me diriger dans la bonne direction?
La solution
Tout d’abord, il n’est pas nécessaire de transmettre le paramètre a parent
. Le contexte véhiculera ces informations.
Voici la feuille de style XSL qui devrait résoudre votre problème:
<!-- update this variable on how deep your menu should be -->
<xsl:variable name="maxLevelForMenu" select="4"/>
<!--- match the document root --->
<xsl:template match="/root">
<div id="nav">
<xsl:call-template name="SubTree" />
</div>
</xsl:template>
<!-- this will be called by xsl:apply-templates -->
<xsl:template match="node">
<!-- the node is either protected, or the user is logged on (no need to check for IsProtected twice) -->
<xsl:if test="umbraco.library:IsProtected($parent/@id, $parent/@path) = 0 or umbraco.library:IsLoggedOn() = 1">
<li>
<a href="{umbraco.library:NiceUrl(@id)}"><xsl:value-of select="@nodeName"/></a>
<xsl:call-template name="SubTree" />
</li>
</xsl:if>
</xsl:template>
<xsl:template name="SubTree">
<!-- render sub-tree only if there are any child nodes --->
<xsl:if test="node">
<ul>
<xsl:apply-templates select="node[data[@alias='umbracoNaviHide'] != '1'][@level <= $maxLevelForMenu]">
<!-- ensure sorted output of the child nodes --->
<xsl:sort select="@sortOrder" data-type="number" />
</xsl:apply-templates>
</ul>
</xsl:if>
</xsl:template>
C’est le code XML sur lequel je l’ai testé (je ne connais pas grand chose à Umbraco, mais après avoir jeté un œil à quelques exemples, j’espère avoir approché un document Umbraco):
<root id="-1">
<node id="1" level="1" sortOrder="1" nodeName="Page #1">
<data alias="umbracoNaviHide">0</data>
</node>
<node id="2" level="1" sortOrder="2" nodeName="Page #2">
<data alias="umbracoNaviHide">0</data>
<node id="3" level="2" sortOrder="2" nodeName="Subpage #2.2">
<data alias="umbracoNaviHide">0</data>
</node>
<node id="4" level="2" sortOrder="1" nodeName="Subpage #2.1">
<data alias="umbracoNaviHide">0</data>
<node id="5" level="3" sortOrder="3" nodeName="Subpage #2.1.1">
<data alias="umbracoNaviHide">0</data>
</node>
</node>
<node id="6" level="2" sortOrder="3" nodeName="Subpage #2.3">
<data alias="umbracoNaviHide">1</data>
</node>
</node>
<node id="7" level="1" sortOrder="3" nodeName="Page #3">
<data alias="umbracoNaviHide">1</data>
</node>
</root>
Voici le résultat:
<div id="nav">
<ul>
<li><a href="http://foo/">Page #1</a></li>
<li><a href="http://foo/">Page #2</a>
<ul>
<li><a href="http://foo/">Subpage #2.1</a>
<ul>
<li><a href="http://foo/">Subpage #2.1.1</a></li>
</ul>
</li>
<li><a href="http://foo/">Subpage #2.2</a></li>
</ul>
</li>
</ul>
</div>
Autres conseils
Ce problème n’a rien de très spécial. La solution suivante teste que la liste de nœuds pour
<xsl:apply-templates/>
n'est pas vide avant d'appliquer les modèles:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output omit-xml-declaration="yes"/> <xsl:variable name="vLevel" select="0"/> <xsl:template match="root"> <xsl:variable name="vnextLevelNodes" select="node[@level = $vLevel+1]"/> <xsl:if test="$vnextLevelNodes"> <ul> <xsl:apply-templates select="$vnextLevelNodes"/> </ul> </xsl:if> </xsl:template> <xsl:template match="node"> <!-- the node is either protected, or the user is logged on (no need to check for IsProtected twice) --> <!-- <xsl:if test= "umbraco.library:IsProtected($parent/@id, $parent/@path) = 0 or umbraco.library:IsLoggedOn() = 1"> --> <xsl:if test="1"> <li> <!-- <a href="{umbraco.library:NiceUrl(@id)}"> --> <a href="'umbraco.library:NiceUrl(@id)'"> <xsl:value-of select="@nodeName"/> </a> <xsl:variable name="vnextLevelNodes" select="node[@level = current()/@level+1]"/> <xsl:if test="$vnextLevelNodes"> <ul> <xsl:apply-templates select="$vnextLevelNodes"/> </ul> </xsl:if> </li> </xsl:if> </xsl:template> </xsl:stylesheet>
J'ai utilisé le document source XML suivant:
<root id="-1"> <node id="1" level="1" sortOrder="1" nodeName="Page #1"> <data alias="umbracoNaviHide">0</data> </node> <node id="2" level="1" sortOrder="2" nodeName="Page #2"> <data alias="umbracoNaviHide">0</data> <node id="3" level="2" sortOrder="2" nodeName="Subpage #2.2"> <data alias="umbracoNaviHide">0</data> </node> <node id="4" level="2" sortOrder="1" nodeName="Subpage #2.1"> <data alias="umbracoNaviHide">0</data> <node id="5" level="3" sortOrder="3" nodeName="Subpage #2.1.1"> <data alias="umbracoNaviHide">0</data> </node> </node> <node id="6" level="2" sortOrder="3" nodeName="Subpage #2.3"> <data alias="umbracoNaviHide">1</data> </node> </node> <node id="7" level="1" sortOrder="3" nodeName="Page #3"> <data alias="umbracoNaviHide">1</data> </node> </root>
De plus, j'ai commenté tout code faisant référence aux fonctions d'extension Umbraco, car je n'y ai pas accès.
Lorsque la transformation ci-dessus est appliquée à ce document XML source, le résultat voulu recherché est généré:
<ul> <li> <a href="'umbraco.library:NiceUrl(@id)'">Page #1</a> </li> <li> <a href="'umbraco.library:NiceUrl(@id)'">Page #2</a> <ul> <li> <a href="'umbraco.library:NiceUrl(@id)'">Subpage #2.2</a> </li> <li> <a href="'umbraco.library:NiceUrl(@id)'">Subpage #2.1</a> <ul> <li> <a href="'umbraco.library:NiceUrl(@id)'">Subpage #2.1.1</a> </li> </ul> </li> <li> <a href="'umbraco.library:NiceUrl(@id)'">Subpage #2.3</a> </li> </ul> </li> <li> <a href="'umbraco.library:NiceUrl(@id)'">Page #3</a> </li> </ul>
J'espère que cela vous a aidé.
A bientôt,
Dimitre Novatchev