1

わかった; Umbraco CMSを使用して、次の方法でxsltメニューを生成しています。

    <xsl:output method="xml" omit-xml-declaration="yes" />

    <xsl:param name="currentPage"/>

    <!-- Input the documenttype you want here -->
    <xsl:variable name="level" select="1"/>

    <xsl:template match="/">


 <ul id="topNavigation">
       <li class="home">
         <xsl:if test="$currentPage/@id = $currentPage/ancestor-or-self::* [@level=$level]/@id">
             <xsl:attribute name="class">home current</xsl:attribute>
         </xsl:if>
         <a href="/">Home</a>
       </li>
      <xsl:for-each select="$currentPage/ancestor-or-self::*
      [@level=$level]/*
      [@isDoc and string(umbracoNaviHide) != '1']">
  <li>
     <xsl:if test="@id = $currentPage/@id">
        <xsl:attribute name="class">current</xsl:attribute>
      </xsl:if>
    <a class="navigation" href="{umbraco.library:NiceUrl(@id)}">
      <span><xsl:value-of select="@nodeName"/></span>
    </a>
  </li>


</xsl:for-each>
</ul>

    </xsl:template>

これは、メニューシステムにページを追加することによってメニューを生成する少なくとも1つのxmlシート（私はxsltにあまり精通していません）を循環します。このxmlのスニペットは、このプロセスで非常に重要であると思います

<p><a href="http://umbraco.org/get-started"
title="Get Started with Umbraco">Get more information</a> about the
umbraco way.</p>
]]></bodyText>
        <umbracoNaviHide>0</umbracoNaviHide>
      </umbTextpage>
      <umbTextpage id="1071" parentID="1068" level="3" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="3" createDate="2010-09-07T13:19:40" updateDate="2012-06-04T21:47:02" nodeName="Getting started" urlName="getting-started" writerName="redacted" creatorName="redacted" path="-1,1061,1068,1071" isDoc="">

        <bodyText><![CDATA[
<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>
]]></bodyText>
        <umbracoNaviHide>0</umbracoNaviHide>
      </umbTextpage>
    </umbTextpage>
    <umbTextpage id="1177" parentID="1061" level="2" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="4" createDate="2012-06-05T11:28:36" updateDate="2012-06-05T11:33:13" nodeName="Our Clients" urlName="our-clients" writerName="redacted" creatorName="redacted" path="-1,1061,1177" isDoc="">
      <bodyText><![CDATA[
<h3>Our Clients</h3>

<p>etc. etc.</p>

<!-- endUmbMacro -->]]></bodyText>
      <umbracoNaviHide>0</umbracoNaviHide>
    </umbTextpage>
    <umbTextpage id="1072" parentID="1061" level="2" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="5" createDate="2010-09-07T13:20:06" updateDate="2012-06-08T11:23:26" nodeName="Contact us" urlName="contact-us" writerName="redacted" creatorName="redacted" path="-1,1061,1072" isDoc="">
      <bodyText><![CDATA[
<h3>Office address</h3>

たとえば、nodeNameは、タブのコンテンツの文字列として使用されます（つまり、上記のxmlコードから「OurClients」および「ContactUs」というラベルの付いたタブがあり、上記と同じ方法で順序付けられます。

私の質問は、さまざまなタブの背景色を変更できる必要があるという事実に関連しています。すべて同じ色にする必要はありません。ただし、一意のIDを持つタブは[ホーム]タブのみのようです。関連するCSSデータ：

#naviWrap { background-color:#000; background-color:rgba(0,0,50,0.5); margin:15px 0 0 0; } /*menu */
#topNavigation { border-left:1px solid rgba(255,255,255,0.25); margin:0 auto; width:960px; }
#topNavigation li { border-left:1px solid rgba(0,0,0,0.25); border-right:1px solid rgba(255,255,225,0.25); display:inline-block; height:60px; line-height:60px; text-align:center; }
#topNavigation li a { color:#fff; display:block; font-size:11px; height:60px; padding:0 30px; text-decoration:none; text-transform:uppercase; font-style: italic; font-weight:bold;}
#topNavigation li a:hover { background-color:#000; background-color:rgba(0,0,0,0.2); text-decoration:none; }
#topNavigation li.current { background-color:#200; background-color:rgba(350,0,100,0.5); }
#topNavigation li.current a {}

li.currentはホームタブ（メニューの最初のタブ）に関連し、残りのタブはnaviWrapによって制御されます。「lia」は、タブのテキストの色に関連しています。

それで、CSSのタブを個別に制御できる方法はありますか。これは、xmlレベルで（たとえば、umbTextpage id = "1177"などに関連して）実行する必要があるか、あるいは、メニュータブに参照ポイントを割り当てるxsltメニュー生成で実行する必要があると考えています。この時点で。

非常に長い質問について申し訳ありません-どんな助けでも大いに感謝されます！

4

1 に答える 1

1

これを試すことができます.xslファイルで、これはfor-eachループ内のビットです:

  <li>
     <xsl:attribute name="class">list-<xsl:value-of select="position()"/><xsl:if test="@id = $currentPage/@id"> current</xsl:if></xsl:attribute>
    <a class="navigation" href="{umbraco.library:NiceUrl(@id)}">
      <span><xsl:value-of select="@nodeName"/></span>
    </a>
  </li>

<li>基本的に、for-each ループの に基づいてeach にクラスを追加するposition()と、次のタイプの出力が得られます。

<li class="list-0">
<li class="list-1">
<li class="list-2 current"> //current will appear on the right li item as before, along with list-n class

そして、<li>css を使用してそれぞれをターゲットにするのは非常に簡単です。

#topNavigation li.list-0 {
   background-color: #f00;
}
#topNavigation li.list-1 {
   background-color: #0f0;
}
#topNavigation li.list-2 {
   background-color: #00f;
}

等

ただし、私の xslt は非常にさびているため、構文が正しくない可能性がありますが、正しい方向を示すには十分なはずです!

于 2012-06-18T10:15:42.253 に答える