XSLT到HTML导航栏菜单

Damiii 发表于 Dev

达米

我想创建一个导航栏菜单，像这样：

<table width="100%">
                <tr>
                    <td id="navBar" width="15%">
                        <nav>
                            <ul>
                                <li><b id="menu">Menu</b></li>
                                <!-- menu here -->
                            </ul>
                        </nav>
                    </td>
                    <td width="85%">
                        <xsl:apply-templates select="frontmatter"/>
                    </td>
                </tr>
            </table>

我有一个具有该Structure的XML文件：

<body>
     <chapter id="...1">
                 <title>...</title>
                 <section id="...1">
                               <title>...</title>
                               <subsection id="...1">
                                                <title>...</title>
                                                <subsubsection id="...1">
                 <section id="...2">
                    .
                    .
     <chapter id="...2">
      .
      .

基本上，我可以chapter每个chapter都有很多title。

section在和上也可以有多个sectionwith ，并且标题和多重性与确实具有相同的方式。titlesectionsubsectionsubsubsectionsection

我的问题是：<a href ...>当订单非常重要时，如何获得标题并放在导航栏上？（还有正确的数字）例如：

1. title (referencing to chapter 1) 
1.1 title of section (referecing for chapter 1 section 1)
etc etc

我不知道如何用XSLT做到这一点。

明亮的达罗查

您可以使用<xsl:number>元素生成编号。使用该count属性可以包含要计数的元素，并level="multiple"可以在多个嵌套级别对它们进行计数。将format让你增量阿拉伯数字，罗马数字等。

通过包括：

<xsl:number format="1. " level="multiple" count="chapter | section | subsection | subsubsection"/>

在<value-of>每个打印之前title，您可以生成多节编号。

这是一个样式表。它不使用id属性中的数据（但是您当然可以使用），而是使用带有形式的节编号生成URI片段#sec1.1.1。每个项目都是在命名模板中生成的。顺序由每个调用嵌套节的模板控制：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output indent="yes"/>
    <xsl:template match="/">
        <table width="100%">
            <tr>
                <td id="navBar" width="15%">
                    <nav>
                        <ul>
                            <li><b id="menu">Menu</b></li>
                            <xsl:apply-templates select="body/chapter"/>
                        </ul>
                    </nav>
                </td>
                <td width="85%">
                    <xsl:apply-templates select="frontmatter"/>
                </td>
            </tr>
        </table>
    </xsl:template>

    <xsl:template match="chapter">
        <xsl:call-template name="generate-item"/>
        <xsl:apply-templates select="section"/>
    </xsl:template>

    <xsl:template match="section">
        <xsl:call-template name="generate-item"/>
        <xsl:apply-templates select="subsection"/>
    </xsl:template>

    <xsl:template match="subsection">
        <xsl:call-template name="generate-item"/>
        <xsl:apply-templates select="subsubsection"/>
    </xsl:template>

    <xsl:template match="subsubsection">
        <xsl:call-template name="generate-item"/>
    </xsl:template>

    <xsl:template name="generate-item">
        <li><a>
            <xsl:attribute name="href">
                <xsl:text>#sec</xsl:text>
                <xsl:number format="1" level="multiple" count="chapter | section | subsection | subsubsection"/>
            </xsl:attribute>
            <xsl:number format="1. " level="multiple" count="chapter | section | subsection | subsubsection"/><xsl:value-of select="title"/>
        </a></li>
    </xsl:template>

</xsl:stylesheet>

使用此输入：

<body>
    <chapter id="c1">
        <title>Title of chapter 1</title>
        <section id="c1s1">
            <title>Title of Section</title>
            <subsection id="s1s1">
                <title>Title of SubSection</title>
                <subsubsection id="s1s1s1">
                    <title>Title of SubSubSection</title>
                </subsubsection>
            </subsection>
        </section>
        <section id="c1s2">
            <title>Title of Section</title>
            <section id="c1s2s1">
                <title>Title of SubSection</title>
                <subsection id="c1s2s1s1">
                    <title>Title of SubSubSection</title>
                </subsection>
            </section>
        </section>
    </chapter>
    <chapter id="c2">
        <title>Title of Chapter 2</title>
        <section id="c2s1">
            <title>Title of Section</title>
            <subsection id="c2s1s1">
                <title>Title of SubSection</title>
                <subsubsection id="c2s1s1s1">
                    <title>Title of SubSubSection</title>
                </subsubsection>
            </subsection>
        </section>
        <section id="c2s2">
            <title>Title of Section</title>
            <section id="c2s2s1">
                <title>Title of SubSection</title>
                <subsection id="c2s2s1s1">
                    <title>Title of SubSubSection</title>
                </subsection>
            </section>
        </section>
    </chapter>
</body>

您将得到以下结果：

<table width="100%">
   <tr>
      <td id="navBar" width="15%">
         <nav>
            <ul>
               <li>
                  <b id="menu">Menu</b>
               </li>
               <li>
                  <a href="#sec1">1. Title of chapter 1</a>
               </li>
               <li>
                  <a href="#sec1.1">1.1. Title of Section</a>
               </li>
               <li>
                  <a href="#sec1.1.1">1.1.1. Title of SubSection</a>
               </li>
               <li>
                  <a href="#sec1.1.1.1">1.1.1.1. Title of SubSubSection</a>
               </li>
               <li>
                  <a href="#sec1.2">1.2. Title of Section</a>
               </li>
               <li>
                  <a href="#sec2">2. Title of Chapter 2</a>
               </li>
               <li>
                  <a href="#sec2.1">2.1. Title of Section</a>
               </li>
               <li>
                  <a href="#sec2.1.1">2.1.1. Title of SubSection</a>
               </li>
               <li>
                  <a href="#sec2.1.1.1">2.1.1.1. Title of SubSubSection</a>
               </li>
               <li>
                  <a href="#sec2.2">2.2. Title of Section</a>
               </li>
            </ul>
         </nav>
      </td>
      <td width="85%"/>
   </tr>
</table>