XML和XSLT使用不同的URL和文本创建链接<a href="URL ">Text Description</a>的菜单

时间:2017-07-19 02:46:58

标签: xml xslt

这就是我追求的目标。在标准HTML中,我可以做一个像这样的链接列表:

<p>
    <a href="/name-of-volume/name-of-book/00-Preamble/Preamble.xml">Preamble</a>
    <a href="/name-of-volume/name-of-book/01-Chapter-01/chapter_1.xml">Chapter 1</a> 
    <a href="/name-of-volume/name-of-book/02-Chapter-02/chapter_2.xml">Chapter 2</a> 
    <a href="/name-of-volume/name-of-book/03-Chapter-03/chapter_3.xml">Chapter 3</a> 
    <a href="/name-of-volume/name-of-book/04-Chapter-04/chapter_4.xml">Chpater 4</a> 
    <a href="/name-of-volume/name-of-book/05-Chapter-05/chapter_5.xml">Chapter 5</a> 
    <a href="/name-of-volume/name-of-book/06-Chapter-06/chapter_6.xml">Chapter 6</a> 
    <a href="/name-of-volume/name-of-book/07-Chapter-07/chapter_7.xml">Chapter 7</a>
    <a href="/name-of-volume/name-of-book/08-Chapter-08/chapter_8.xml">Chapter 8</a> 
    <a href="/name-of-volume/name-of-book/09-Chapter-09/chapter_9.xml">Chapter 9</a> 
    <a href="/name-of-volume/name-of-book/10-Chapter-10/chapter_10.xml">Chapter 10</a> 
    <a href="/name-of-volume/name-of-book/11-Appendix/Appendix.xml">Appendix</a> 
</p>

当浏览器显示此内容时,开始和结束标记之间的文本将作为链接显示在屏幕上,我们看不到实际的URL。当我们点击链接文本时,我们会跳转到URL。

使用下面的XML示例(实现可能有更好的设置),如何设置它(包括XSLT),以便在浏览器屏幕上获得相同的效果。也就是说,我想看到链接文本,但不想显示实际的URL。

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/style-sheets/master-rulebook.xsl"?>

<ROOT>

<side_menu_div>
    <link-text>Preamble</link-text>
        <chapter-link>/name-of-volume/name-of-book/00-Preamble/Preamble.xml</chapter-link>
    <link-text>Chapter 1</link-text>
        <chapter-link>/name-of-volume/name-of-book/01-Chapter-01/chapter_1.xml"</chapter-link>
    <link-text>Chapter 2</link-text> 
        <chapter-link>/name-of-volume/name-of-book/02-Chapter-02/chapter_2.xml"></chapter-link>
    <link-text>Chapter 3</link-text> 
        <chapter-link>/name-of-volume/name-of-book/03-Chapter-03/chapter_3.xml"></chapter-link>
    <link-text>Chapter 4</link-text> 
        <chapter-link>/name-of-volume/name-of-book/04-Chapter-04/chapter_4.xml"</chapter-link>
    <link-text>Chapter 5</link-text> 
        <chapter-link>/name-of-volume/name-of-book/05-Chapter-05/chapter_5.xml"</chapter-link>
    <link-text>Chapter 6</link-text> 
        <chapter-link>/name-of-volume/name-of-book/06-Chapter-06/chapter_6.xml"</chapter-link>
    <link-text>Chapter 7</link-text> 
        <chapter-link>/name-of-volume/name-of-book/07-Chapter-07/chapter_7.xml"</chapter-link>
    <link-text>Chapter 8</link-text>
        <chapter-link>/name-of-volume/name-of-book/08-Chapter-08/chapter_8.xml"</chapter-link>
    <link-text>Chapter 9</link-text> 
        <chapter-link>/name-of-volume/name-of-book/09-Chapter-09/chapter_9.xml"</chapter-link>
    <link-text></link-text> 
        <chapter-link>/name-of-volume/name-of-book/10-Chapter-10/chapter_10.xml"Chapter 10</chapter-link>
    <link-text></link-text> 
        <chapter-link>/name-of-volume/name-of-book/11-Appendix/Appendix.xml"Appendix</chapter-link> 
</side_menu_div>

</ROOT>

我相信上面的XML会运行得很好,但是我不知道如何设置XSLT。

使用下面海报的帮助,我的XSLT现在看起来像这样,而且效果很好

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:output method="html" encoding="utf-8" />
 <xsl:strip-space elements="*" />


<xsl:template match="/">
    <html>
        <body style="background-color:#fffc99;  font-size:16pt;">
            <xsl:apply-templates/>
        </body>
    </html>
</xsl:template>

<xsl:template match="ROOT">
            <xsl:apply-templates/>
</xsl:template>


<xsl:template match="side_menu_div">
    <div style="width: 10%; height: 100%; position: fixed; padding-right: 1em; background: #578be0; " >

        <xsl:for-each select="/ROOT/side_menu_div/link-text">
            <xsl:variable name="index" select="position()" />
                <a href="{/ROOT/side_menu_div/chapter-link[$index]}">
                    <xsl:value-of select="." />
                </a>
                <br/>
        </xsl:for-each>

    </div>
</xsl:template>

<xsl:template match="chapter">
        <div style="width: 90%; height: auto; position: absolute; margin-left: 10%; padding-left: 1em; background: #fffc99; " >
            <xsl:apply-templates/>
        </div>
</xsl:template>

1 个答案:

答案 0 :(得分:1)

输入XML共享需要一些调整才能获得所需的输出,因为很少<link-text>个节点没有值。此外,double-quotes中的<chapter-link>也不是必需的。请在下面找到调整后的输入XML。

输入XML

<?xml version="1.0" encoding="UTF-8"?>
<ROOT>
    <side_menu_div>
        <link-text>Preamble</link-text>
        <chapter-link>/name-of-volume/name-of-book/00-Preamble/Preamble.xml</chapter-link>
        <link-text>Chapter 1</link-text>
        <chapter-link>/name-of-volume/name-of-book/01-Chapter-01/chapter_1.xml</chapter-link>
        <link-text>Chapter 2</link-text>
        <chapter-link>/name-of-volume/name-of-book/02-Chapter-02/chapter_2.xml</chapter-link>
        <link-text>Chapter 3</link-text>
        <chapter-link>/name-of-volume/name-of-book/03-Chapter-03/chapter_3.xml</chapter-link>
        <link-text>Chapter 4</link-text>
        <chapter-link>/name-of-volume/name-of-book/04-Chapter-04/chapter_4.xml</chapter-link>
        <link-text>Chapter 5</link-text>
        <chapter-link>/name-of-volume/name-of-book/05-Chapter-05/chapter_5.xml</chapter-link>
        <link-text>Chapter 6</link-text>
        <chapter-link>/name-of-volume/name-of-book/06-Chapter-06/chapter_6.xml</chapter-link>
        <link-text>Chapter 7</link-text>
        <chapter-link>/name-of-volume/name-of-book/07-Chapter-07/chapter_7.xml</chapter-link>
        <link-text>Chapter 8</link-text>
        <chapter-link>/name-of-volume/name-of-book/08-Chapter-08/chapter_8.xml</chapter-link>
        <link-text>Chapter 9</link-text>
        <chapter-link>/name-of-volume/name-of-book/09-Chapter-09/chapter_9.xml</chapter-link>
        <link-text>Chapter  10</link-text>
        <chapter-link>/name-of-volume/name-of-book/10-Chapter-10/chapter_10.xml</chapter-link>
        <link-text>Appendix</link-text>
        <chapter-link>/name-of-volume/name-of-book/11-Appendix/Appendix.xml</chapter-link>
    </side_menu_div>
</ROOT>

以下是有助于转型的XSL

<强> XSL

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" encoding="utf-8" />
    <xsl:strip-space elements="*" />
    <xsl:template match="/">
        <p>
            <xsl:for-each select="/ROOT/side_menu_div/link-text">
                <xsl:variable name="index" select="position()" />
                <a href="{/ROOT/side_menu_div/chapter-link[$index]}">
                    <xsl:value-of select="." />
                </a>
            </xsl:for-each>
        </p>
    </xsl:template>
</xsl:stylesheet>