簡體   English   中英

使用XSLT 1.0建立HTML表格

[英]Build an HTML table using XSLT 1.0

我正在使用XML和XSLT為活動創建HTML Email。 我幾乎可以滿足我的要求,但是我得到了一些重復的內容,而且我不知道如何消除重復的元素。

我最初忘記添加一個附加要求:我需要為每個內容元素添加自定義模板,以基於該元素應用不同的格式。 此外,內容中存在需要建模的隨機圖像

這是一些示例XML:

<?xml version="1.0" encoding="UTF-8"?>
<job>
<surface>
<preheader><preheader_p>Click for more information</preheader_p></preheader>
<preheader><preheader_p>Questions? Call 877-555-1212</preheader_p></preheader>
<preheader><preheader_p>Click to unsubscribe</preheader_p></preheader>
<brand href="Images/logo.jpeg" />
<headline>Headline goes here</headline>
<subhead>Subhead goes here</subhead>
<body_copy>First paragraph goes here</body_copy>
<body_copy>Second paragraph goes here</body_copy>
<chart href="Images/graph.jpeg" />
<body_copy>Third paragraph goes here</body_copy>
</surface>
</job>

使用XSLT,我需要構建一個表,該表將預標題內容插入到兩列嵌套表的左列中。 在右列中,我需要插入產品徽標。

顯示預標題和徽標內容后,其余內容將按順序插入,每個內容都在其自己的表行中。

這是我的XSLT:

<?xml version="1.0" encoding="UTF-8"?>

<xsl:output method="html" encoding="UTF-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

<xsl:template match="/">

<html xmlns="http://www.w3.org/1999/xhtml">

<body>
<table width="600" border="1">
<tr><td>
<table width="100%" border="1">
  <tr>
    <td width="60%">
        <table width="100%" border="1">
        <xsl:apply-templates select="job/surface/preheader" />          
        </table>
    </td>
    <td width="40%"><xsl:apply-templates select="job/surface/brand"/></td>
    </tr>
</table>
</td></tr>
<xsl:apply-templates select="job/surface" /> 
</table>
</body>
</html>
</xsl:template>

<xsl:template match="preheader"><tr><td style="font-size:11pt;"><xsl:value-of select="."/></td></tr>
</xsl:template>
<xsl:template match="brand"><img style="max-width:100%" src="{@href}" />
</xsl:template>
<xsl:template match="headline"><tr><td style="font-size:20pt;"><xsl:value-of select="."/></td></tr>
</xsl:template>
<xsl:template match="subhead"><tr><td style="font-size:16pt;"><xsl:value-of select="."/></td></tr>
</xsl:template>
<xsl:template match="body_copy"><tr><td style="font-size:12pt;"><xsl:value-of select="."/></td></tr>

 </xsl:stylesheet>

問題在於,preheader和徽標元素重復了兩次。

目標是創建以下HTML:

<html>
<body>
<table width="600" border="1">
<tr><td>
<table width="100%" border="1">
<tr><td width="60%"><table width="100%" border="1">
    <tr><td>Click for more information</td></tr>
    <tr><td>Questions? Call 877-555-1212</td></tr>
    <tr><td>Click to unsubscribe</td></tr>
    </table></td>
    <td width="40%"><img style="max-width:100%" src="Images/logo.jpeg"></td</tr>
</table></td></tr>
<tr><td style="font-size:20pt;">Headline goes here</td></tr>
<tr><td style="font-size:16pt;">Subhead goes here</td></tr>
<tr><td style="font-size:12pt;">First paragraph goes here</td></tr>
<tr><td style="font-size:12pt;">Second paragraph goes here</td></tr>
<tr><td><img style="max-width:100%" src="Images/graph.jpeg" /></td></tr>
<tr><td style="font-size:12pt;">Third paragraph goes here</td></tr>
</table>
</body>
</html>

問題在於,preheader和徽標元素重復了兩次。

您有這些重復的行的原因是以下說明:

<xsl:apply-templates select="job/surface" /> 

這將模板有效地應用於surface 所有后代-包括您已經處理的preheaderbrand節點。

避免這種情況的一種方法是,僅將模板選擇性地應用於此時所需的節點:

<xsl:apply-templates select="job/surface/headline | job/surface/subhead | job/surface/body_copy" /> 

順便說一句,我想知道您是否不能簡單地做到這一點:

XSLT 1.0

<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" encoding="UTF-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" indent="yes"/>

<xsl:template match="/job">
    <html>
        <body>
            <table border="1">
                <tr>
                    <td>
                        <xsl:value-of select="surface/preheader[1]"/>
                    </td>
                    <td rowspan="{count(surface/preheader)}">
                        <img style="max-width:100%" src="{@href}" />
                    </td>
                </tr>
                <xsl:for-each select="surface/preheader[position() > 1]">
                    <tr>
                        <td>
                            <xsl:value-of select="."/>
                        </td>
                    </tr>
                </xsl:for-each>
                <xsl:for-each select="surface/headline | surface/subhead | surface/body_copy">
                    <tr>
                        <td colspan="2">
                            <xsl:value-of select="."/>
                        </td>
                    </tr>
                </xsl:for-each>
            </table>
        </body>
    </html>
</xsl:template>

</xsl:stylesheet>

還要注意,您的名稱空間聲明不被您在其他模板中創建的元素繼承。 您會看到許多表行都在no-namespace中:

<tr xmlns="">

如上例所示,您應將默認的名稱空間聲明移至stylesheet元素。

這是完美的解決方案。 它結合了Michael對重復元素的修復,並提供了模板應用程序來格式化各個內容元素。 謝謝

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" encoding="UTF-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" indent="yes"/>

 <xsl:template match="/job/surface">

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>Untitled Document</title>
 </head>

 <body>
 <table width="600" border="0" align="center" style="font-family:Arial, Helvetica, sans-serif;">
 <tr><td><table width="100%"><tr><td width="60%" valign="bottom">
 <table width="100%"><tr><td style="padding: 0px 0px 5px 0px; font-size:10px;"><xsl:value-of select="preheader[1]"/></td></tr>
 <xsl:for-each select="preheader[position() > 1]">
 <tr><td style="padding: 0px 0px 5px 0px; font-size:10px;"><xsl:value-of select="."/></td></tr></xsl:for-each>
 </table></td>
 <td width="40%"><xsl:apply-templates select="brand"/></td></tr></table></td></tr>


 <xsl:apply-templates select="headline | subhead | bullet_level_1 | bullet_level_2 | body_copy | footnote | chart | logo | generic_image"/>            


 </table>
 </body>
 </html>

 </xsl:template>

<!--Add templates below to style each element...-->
<xsl:template match="headline"><tr><td class="headline full" valign="top" style=" font-size:150%; font-weight:bold;  color:#444444; padding-bottom:5px; padding-top:14px;"><xsl:apply-templates /></td></tr></xsl:template>

<xsl:template match="subhead"><tr><td class="subhead" style="padding: 5px 0px 0px 0px; color: rgb(181,26,138); font-size: 115%;"><xsl:apply-templates /></td></tr></xsl:template>
...
</xsl:stylesheet>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM