DotNetNuke + XPath = Пользовательское меню навигации DNNMenu HTML render - PullRequest
Новая
       11

DotNetNuke + XPath = Пользовательское меню навигации DNNMenu HTML render

0 голосов
/ 21 апреля 2010

Я разрабатываю обложку для DotNetNuke 5 с помощью меню «Компонент DNN Готово» Марка Алана, которое использует XSL-T для преобразования карты сайта XML в HTML-навигацию.

Карта сайта XML выводит следующую структуру: 

<Root >
  <root >
    <node id="40" text="Home" url="http://localhost/dnn/Home.aspx" enabled="1" selected="0" breadcrumb="0" first="1" last="0" only="0" depth="0" >
      <node id="58" text="Child1" url="http://localhost/dnn/Home/Child1.aspx" enabled="1" selected="0" breadcrumb="0" first="1" last="0" only="0" depth="1" >
        <keywords >Child1</keywords>
        <description >Child1</description>
        <node id="59" text="Child1 SubItem1" url="http://localhost/dnn/Home/Child1/Child1SubItem1.aspx" enabled="1" selected="0" breadcrumb="0" first="1" last="0" only="0" depth="2" >
          <keywords >Child1 SubItem1</keywords>
          <description >Child1 SubItem1</description>
        </node>
        <node id="60" text="Child1 SubItem2" url="http://localhost/dnn/Home/Child1/Child1SubItem2.aspx" enabled="1" selected="0" breadcrumb="0" first="0" last="0" only="0" depth="2" >
          <keywords >Child1 SubItem2</keywords>
          <description >Child1 SubItem2</description>
        </node>
        <node id="61" text="Child1 SubItem3" url="http://localhost/dnn/Home/Child1/Child1SubItem3.aspx" enabled="1" selected="0" breadcrumb="0" first="0" last="1" only="0" depth="2" >
          <keywords >Child1 SubItem3</keywords>
          <description >Child1 SubItem3</description>
        </node>
      </node>
      <node id="65" text="Child2" url="http://localhost/dnn/Home/Child2.aspx" enabled="1" selected="0" breadcrumb="0" first="0" last="1" only="0" depth="1" >
        <keywords >Child2</keywords>
        <description >Child2</description>
        <node id="66" text="Child2 SubItem1" url="http://localhost/dnn/Home/Child2/Child2SubItem1.aspx" enabled="1" selected="0" breadcrumb="0" first="1" last="0" only="0" depth="2" >
          <keywords >Child2 SubItem1</keywords>
          <description >Child2 SubItem1</description>
        </node>
        <node id="67" text="Child2 SubItem2" url="http://localhost/dnn/Home/Child2/Child2SubItem2.aspx" enabled="1" selected="0" breadcrumb="0" first="0" last="1" only="0" depth="2" >
          <keywords >Child2 SubItem2</keywords>
          <description >Child2 SubItem2</description>
        </node>
      </node>
    </node>
  </root>
</Root>

Моя цель состоит в том, чтобы преобразовать этот блок XML в эту структуру HTML-навигации только с использованием пользовательских интерфейсов UL и т. Д. 

<ul id="topnav">
  <li>
    <a href="#" class="home">Home</a><!-- Parent Node - Depth0 -->
    <div class="sub">
      <ul>
        <li><h2><a href="#">Child1</a></h2></li><!-- Parent Node 1 - Depth1 -->
        <li><a href="#">Child1 SubItem1</a></li><!-- ChildNode - Depth2 -->
        <li><a href="#">Child1 SubItem2</a></li><!-- ChildNode - Depth2 -->
        <li><a href="#">Child1 SubItem3</a></li><!-- ChildNode - Depth2 -->
      </ul>
      <ul>
        <li><h2><a href="#">Child2</a></h2></li><!-- Parent Node 2 - Depth1 -->
        <li><a href="#">Child2 SubItem1</a></li><!-- ChildNode - Depth2 -->
        <li><a href="#">Child2 SubItem2</a></li><!-- ChildNode - Depth2 -->
      </ul>
    </div>
  </li>
</ul>

Может кто-нибудь помочь с кодировкой XSL? Я только начинаю сейчас с XSL ..

1 Ответ

1 голос
/ 21 апреля 2010

Я рекомендую правильно размещать списки <ul>. "Child1 SubItem1" не может быть на том же уровне, что и "Child1", логически. Это преобразование XSLT 1.0: 

<xsl:stylesheet 
  version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
  <xsl:output encoding="UTF-8" indent="yes" omit-xml-declaration="yes" />

  <xsl:template match="Root">
    <html>
      <body>
        <!-- render a sub-list if the <root> node -->
        <xsl:apply-templates select="root" mode="sub-list" />
      </body>
    </html>
  </xsl:template>

  <xsl:template match="*[node]" mode="sub-list">
    <ul>
      <!-- render all list items from enabled child nodes -->
      <xsl:apply-templates select="node[@enabled=1]" mode="list-item" />
    </ul>
  </xsl:template>

  <xsl:template match="node" mode="list-item">
    <li id="menu_{@id}" class="level{@depth}">
      <a href="{@url}">
        <xsl:value-of select="@text" />
      </a>
      <!-- if there are any enabled child nodes... -->
      <xsl:if test="node[@enabled=1]">
        <!-- ...make a sub-list from the current node (.) -->
        <xsl:apply-templates select="." mode="sub-list" />
      </xsl:if>
    </li>
  </xsl:template>

</xsl:stylesheet>

производит: 

<html>
  <body>
    <ul>
      <li id="menu_40" class="level0">
        <a href="http://localhost/dnn/Home.aspx">Home</a>
        <ul>
          <li id="menu_58" class="level1">
            <a href="http://localhost/dnn/Home/Child1.aspx">Child1</a>
            <ul>
              <li id="menu_59" class="level2">
                <a href="http://localhost/dnn/Home/Child1/Child1SubItem1.aspx">Child1 SubItem1</a>
              </li>
              <li id="menu_60" class="level2">
                <a href="http://localhost/dnn/Home/Child1/Child1SubItem2.aspx">Child1 SubItem2</a>
              </li>
              <li id="menu_61" class="level2">
                <a href="http://localhost/dnn/Home/Child1/Child1SubItem3.aspx">Child1 SubItem3</a>
              </li>
            </ul>
          </li>
          <li id="menu_65" class="level1">
            <a href="http://localhost/dnn/Home/Child2.aspx">Child2</a>
            <ul>
              <li id="menu_66" class="level2">
                <a href="http://localhost/dnn/Home/Child2/Child2SubItem1.aspx">Child2 SubItem1</a>
              </li>
              <li id="menu_67" class="level2">
                <a href="http://localhost/dnn/Home/Child2/Child2SubItem2.aspx">Child2 SubItem2</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Теперь вы можете сделать презентацию с помощью CSS, например, через атрибут class, который есть у каждого <li>.

РЕДАКТИРОВАТЬ из-за специального запроса в комментариях, вот таблица стилей, которая, кажется, производит именно то, что вы хотите: 

<xsl:stylesheet 
  version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
  <xsl:template match="root">
    <ul id="topnav">
      <xsl:apply-templates select="node" mode="li" />
    </ul>
  </xsl:template>

  <xsl:template match="node" mode="li">
    <xsl:if test="@enabled=1">
      <li>
        <xsl:apply-templates select="." mode="a" />
        <!-- build sub-menu for enabled child nodes only -->
        <xsl:if test="node[@enabled=1]">
          <div class="sub">
            <xsl:apply-templates select="node" mode="ul" />
          </div>
        </xsl:if>
      </li>
    </xsl:if>
  </xsl:template>

  <xsl:template match="node" mode="ul">
    <ul>
      <!-- heading for this list -->
      <li>
        <h2><xsl:apply-templates select="." mode="a" /></h2>
      </li>
      <!-- other list elements from sub-nodes -->
      <xsl:apply-templates select="node" mode="li" />
    </ul>
  </xsl:template>

  <xsl:template match="node" mode="a">
    <a href="{@url}"><xsl:value-of select="@text" /></a>
  </xsl:template>
</xsl:stylesheet>

Вывод для вашего образца XML: 

<ul id="topnav">
  <li>
    <a href="http://localhost/dnn/Home.aspx">Home</a>
    <div class="sub">
      <ul>
        <li><h2><a href="http://localhost/dnn/Home/Child1.aspx">Child1</a></h2></li>
        <li><a href="http://localhost/dnn/Home/Child1/Child1SubItem1.aspx">Child1 SubItem1</a></li>
        <li><a href="http://localhost/dnn/Home/Child1/Child1SubItem2.aspx">Child1 SubItem2</a></li>
        <li><a href="http://localhost/dnn/Home/Child1/Child1SubItem3.aspx">Child1 SubItem3</a></li>
      </ul>
      <ul>
        <li><h2><a href="http://localhost/dnn/Home/Child2.aspx">Child2</a></h2></li>
        <li><a href="http://localhost/dnn/Home/Child2/Child2SubItem1.aspx">Child2 SubItem1</a></li>
        <li><a href="http://localhost/dnn/Home/Child2/Child2SubItem2.aspx">Child2 SubItem2</a></li>
      </ul>
    </div>
  </li>
</ul>
...