使用xsl将单独的图像链接到单独的html页面

时间:2015-03-22 22:06:30

标签: html xml xslt

我正在忙着一个大学项目,该项目有一堆带有多个乐队的XML。我目前让我的XSL输出多个HTML页面,作为每个乐队的“个人资料页面”(所以每个乐队都在一个单独的HTML页面上),链接相互链接。现在,我想在相应的html页面上添加乐队的图像。这可能吗?

以下是XML中一位艺术家的例子:

<lineup>
  <artist id="101">
    <name>Jeremey Loops</name>
    <genres>
      <genre>Acoustic</genre>
    </genres>
    <writeup>
      Jeremy Loops aint no traditional 'band', creating music on the spot with     that there loopdaloop pedal. Various artists also join him for free jam sessions     & the music they create is all original. it'll definitely make ya dance like a hick!
    </writeup>
    <gig>
      <day>FRIDAY</day>
      <time>
        <starts>12:00</starts>
        <ends>14:00</ends>
      </time>
    </gig>
  </artist>
</lineup>

以下是我尝试使用XSL但只是发现图像显示在图像两侧都写有“true”和“false”的所有页面上。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" indent="yes" name="html"/>

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

<xsl:template match="lineup">
   <xsl:apply-templates select="artist"/>
</xsl:template>

<xsl:template match="artist">

<xsl:variable name="filename" select="concat('bands/',name,'.html')" />
<xsl:value-of select="$filename" />  
<xsl:result-document href="{$filename}" format="html">
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="../sass/test.css" />
        <title>
            <!-- TITLE OF PAGE -->
            Band - <xsl:value-of select="name"/>
        </title>
    </head>
    <body>
<!-- Adding Image -->
<div class="images">
                <xsl:value-of select="name = 'Jeremey Loops'"/>
                    <img src="images/jeremey_loops.png" alt="Jeremey Loops standing with guitar" height="350px"/>
            </div>

<!-- LINKS TO BAND PAGES -->
        <div class="box links">
            <xsl:variable name="current" select="@id" />
            <xsl:for-each select="/lineup/artist" >
                <a href="{name}.html">
                    <xsl:value-of select="name"/> | 
                </a>
            </xsl:for-each>
        </div>
    </body>
    </html>
</xsl:result-document>

</xsl:template>
</xsl:stylesheet>

所以我想要的是'Jeremey Loops'的形象在他的页面上展示而不是在其他艺术家的页面上展示,其余部分也是如此。我应该为每位艺术家添加一个过滤器吗?

1 个答案:

答案 0 :(得分:0)

您可以使用将艺术家翻译成图片网址的功能。

假设您有一个目录&#34; images&#34;图像的文件名格式遵循模式{artist_id}_{lowercase_underscored_name}.png

101_jeremy_loops.png
32_phil_beats.png
420_snoop_dogg.png
...

然后,您可以编写一个XSLT函数(或者类似的命名模板,如果您坚持使用XSLT 1.0),它会从给定的参数创建文件路径:

<xsl:stylesheet version="2.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:foo="http://whatever">

<!-- foo:getImgUrl("64","Phil Beats") -> "64_phil_beats.png" -->
<xsl:function name="foo:getImgUrl">
    <xsl:param name="artist_id"/>
    <xsl:param name="artist_name"/>

    <xsl:value-of select="$artist_id"/>
    <xsl:text>_</xsl:text>

    <!-- returns lowercased artist name, replaces all non-alphanumerical
         characters with underscores. -->
    <xsl:value-of select="replace(lower-case($artist_name),'[^a-z0-9]','_')"/>

    <xsl:text>.png</xsl:text>
</xsl:function>

...

在样式表中使用它,如下所示:

...
<img>
    <xsl:attriute name="src">
        <xsl:value-of select="foo:getImgUrl(@id, name/text())"/>
    </xsl:attribute>
</img>
...