XSL - 带有链接的图像答案

【问题标题】：XSL - Image with a LinkXSL - 带有链接的图像
【发布时间】：2014-04-15 07:46:23
【问题描述】：

我有一个如下的 XML 文档。

<?xml version="1.0"?>
<document document="wpc_slider_qp"> 
<properties> 
    <property prop_name="displayname" prop_ns="http://sapportals.com/xmlns/cm" type="filename"/>
    <property type="createdBy">USER.PRIVATE_DATASOURCE.un:LU23921</property> 
</properties>
<elements>
    <element type="sliderimage" alt="Slider 1 Tooltip" width="700" height="306">="/irj/go/km/docs/wpccontent/Sites/Administration/Site Content/image-slider-1.jpg</element>
    <element title="" type="sliderlink" linkid="2ece8f2a15920a838038554563a046b2" targetnew="false" rid="http://www.google.com"/>
    <element type="sliderimage" alt="Slider 2 Tooltip" width="700" height="306">="/irj/go/km/docs/wpccontent/Sites/Administration/Site Content/image-slider-2.jpg</element>
    <element title="" type="sliderlink" linkid="75af9a52cab35aa864d80f4563a0db8f" targetnew="false" rid="http://www.yahoo.com"/>
</elements>
<relatedlinks/>
<relatedfiles/>
</document>

我想使用 XSL 将其转换为链接此的东西..

<div id="sliderFrame">
    <div id="slider">
        <a href="http://www.google.com"><img border="0" src="/irj/go/km/docs/wpccontent/Sites/Administration/Site Content/image-slider-1.jpg" height="306" width="700"/></a>
        <a href="http://www.yahoo.com"><img border="0" src="/irj/go/km/docs/wpccontent/Sites/Administration/Site Content/image-slider-2.jpg" height="306" width="700"/></a>
    </div>
</div>

到目前为止，这是我的 XSL...

<?xml version="1.0"?>

<!DOCTYPE stylesheet [
<!ENTITY apos  "&#39;" ><!-- replace &apos; with html escape character for ' -->
]>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                  xmlns:wpc="com.sap.nw.wpc.km.service.editor.xslt.XsltHelperCore">
    <xsl:template match="/">

    <xsl:output method="html"/>


<html>
<head>

    <link href="js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="js-image-slider.js" type="text/javascript">function empty() return;</script>
</head>



<div id='sliderFrame'>
    <div id='slider'>
        <xsl:for-each select="document/elements/element">
            <xsl:if test="@type='sliderimage'">
                        <img border="0">
                                <xsl:attribute name="src"><xsl:value-of disable-output-escaping="yes" select="wpc:getWebDavAccess(string(current()))"/></xsl:attribute>
                                    <xsl:if test="string-length(@height)!=0">
                                        <xsl:attribute name="height"><xsl:value-of disable-output-escaping="yes" select="@height"/></xsl:attribute>
                            </xsl:if>
                                    <xsl:if test="string-length(@width)!=0">
                                <xsl:attribute name="width"><xsl:value-of disable-output-escaping="yes" select="@width"/></xsl:attribute>
                            </xsl:if>
                            <xsl:if test="string-length(document/elements/element[@type='sliderimage']/@alt)!=0">
                                <xsl:attribute name="alt"><xsl:value-of disable-output-escaping="yes" select="document/elements/element[@type='sliderimage']/@alt"/></xsl:attribute>
                            </xsl:if>
                            </img>  
            </xsl:if> 
        </xsl:for-each>
    </div>
</div>


<br />
<br />



        <xsl:for-each select="document/elements/element">
            <xsl:if test="@type='sliderlink'">
                    <a>
                        <xsl:attribute name="href">
                            <xsl:value-of disable-output-escaping="yes" select="wpc:getHrefValue(string(current()/@rid), string(/document/@locale))"/>
                        </xsl:attribute>
                        <xsl:attribute name="onclick">
                            <xsl:value-of disable-output-escaping="yes" select="wpc:getOnClickValue(string(current()/@rid), string(/document/@locale),string(document/elements/element[@type='sliderlink']/@targetnew))"/>
                        </xsl:attribute>
                        <xsl:attribute name="target">
                            <xsl:value-of disable-output-escaping="yes" select="wpc:getTarget(string(current()/@targetnew))"/>
                        </xsl:attribute>
test
                    </a>
            </xsl:if> 
        </xsl:for-each>


</html>

</xsl:template>

</xsl:stylesheet>

我能够得到一张低于另一张的图像，但我无法弄清楚如何在图像周围添加 A 标签。任何帮助将不胜感激。

【问题讨论】：

你为什么在所有东西上都使用disable-output-escaping？

标签： xml xslt

【解决方案1】：

您不应该尝试将 XSLT 中的所有内容都放在一个模板匹配中，这会变得不必要的复杂且难以快速阅读。

这将给出你想要的输出：

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

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

<xsl:template match="document">
    <html>
        <head>
            <link href="js-image-slider.css" rel="stylesheet" type="text/css"/>
            <script src="js-image-slider.js" type="text/javascript">function empty() return;</script>
        </head>
        <body>
            <xsl:apply-templates select="elements"/>
        </body>
    </html>
</xsl:template>

<xsl:template match="elements">
    <div id="sliderFrame">
        <div id="slider">
            <xsl:apply-templates select="element[@type='sliderlink']"/>
        </div>
    </div>
</xsl:template>

<xsl:template match="element[@type='sliderlink']">
    <a href="{@rid}">
        <xsl:apply-templates select="preceding-sibling::element[@type='sliderimage'][1]"/>
    </a>
</xsl:template>

<xsl:template match="element[@type='sliderimage']">
    <img border="0" src="{substring(.,3)}" height="{@height}" width="{@width}"/>
</xsl:template>

</xsl:stylesheet>

因此，与其将所有内容放在一个大模板中，不如构建一个模板链来将所需的输出拼接在一起，这也更加灵活。

编辑：

响应评论，要访问element 中的内容，您使用.，因此如果使用wpc:getWebDavAccess 来处理src，您会这样做：

<xsl:template match="element[@type='sliderimage']">
    <img border="0" src="{wpc:getWebDavAccess(.)}" height="{@height}" width="{@width}"/>
</xsl:template>

我已经用 substring 代替了它。

XSLT 中的大括号与value-of select 相同，您可以这样编写相同的代码：

<xsl:template match="element[@type='sliderimage']">
    <img border="0">
    <xsl:attribute name="src">
        <xsl:value-of select="wpc:getWebDavAccess(.)"/>
    </xsl:attribute>
    <xsl:attribute name="height">
        <xsl:value-of select="@height"/>
    </xsl:attribute>
    <xsl:attribute name="width">
        <xsl:value-of select="@width"/>
    </xsl:attribute>
    </img>
</xsl:template>

【讨论】：

很棒的东西。非常感谢。还有一个问题。在“sliderimage”块中，访问元素的 XPATH 是什么。
基本上在“sliderimage”块中，我该如何构造这样的东西--->>
当我使用一些在线 XSL 转换器进行转换时，输出符合预期。但是，在 SAP NW 平台中预览时，A 标签是可以的，但两种情况下都会显示 image-slider-1.jpg。
@user1926165 这看起来像是一个与平台相关的问题，但我无法想象任何 XSLT 处理器会如何以不同的方式解释它。