html - XSL 模板在我的 HTML 中不起作用
问题描述
我对 XSLT 相当陌生。我以前创建了一个 HTML 页面，并决定将它与 XSLT 合并。我制作了一个较小的 .XSL 文件以查看我的逻辑是否正确，并且 .XML 文件输出没有任何问题。但是，当我在以前打开的 HTML 中尝试相同的逻辑时，它除了文本值之外不输出任何内容。我以为我可以在 HTML 文件中间使用 XSL 模板，但也许我不能。第 46-61 行是我尝试在工作 .XSL 文件中使用相同逻辑的地方。我一直在 Internet Explorer 和 Google Chrome 中查看 .XSL 树。为了显示输出，我在 Internet Explorer 中打开 .XML 文件。这是一个 .XML 文件和两个 .XSL 文件。
示例 XML 文件
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="ugh1.xsl"?>
<team name="PeLakers"
location = "Mobile, Alabama"
locationURL = ""
videoURL = ""
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<coach>
<name>D. Melton</name>
<height>5'11</height>
</coach>
<player>
<playerImgSource>FC3pQ10.jpg</playerImgSource>
<name>Lonzo Ball</name>
<position>Point Guard</position>
<height>6'7</height>
<weight>190</weight>
</player>
<player>
<playerImgSource>FC3pQ10.jpg</playerImgSource>
<name>Brandon Ingram</name>
<position>Small Forward</position>
<height>6'8</height>
<weight>190</weight>
</player>
<player>
<playerImgSource>FC3pQ10.jpg</playerImgSource>
<name>Kyle Kuzma</name>
<position>Power Forward</position>
<height>6'9</height>
<weight>220</weight>
</player>
</team>
工作 .XSL 文件
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<div style="width:30%; height:30%; overflow:scroll;">
<xsl:for-each select="team/player">
<dl>
<xsl:variable name="x" select="playerImgSource"/>
<dt><img src='{$x}' alt="Player" style="width:40%; height:40%;" align="left"/></dt>
<dd><xsl:value-of select="name"/></dd>
<dd>- Position: <xsl:value-of select="position"/></dd>
<dd>- Height: <xsl:value-of select="height"/></dd>
<dd>- Weight: <xsl:value-of select="weight"/></dd>
</dl>
<br/>
</xsl:for-each>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
.XSL 文件无法正确输出
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<html>
<body>
<p><span style="font-size:15px; font-family:" Calibri" ,sans-serif;"></span></p>
<table margin="0" border="1px" cellpadding="0" cellspacing="0" style="position:absolute; height:100%; width:100%; left:0; right:0; top:0; bottom:0;">
<tbody>
<tr>
<td colspan="3" style="width:100%; border:1pt solid windowtext; background:gray; padding:0in 5.4pt; height:22.5%; vertical-align:top;">
</td>
</tr>
<tr>
<td style="width:38%; border-right: 1pt solid windowtext; border-bottom:1pt solid windowtext; border-left:1pt solid windowtext; border-image:initial;border-top:none; background:rgb(112, 48, 160); padding:0in 5.4pt; height:12.5%; vertical-align:top;">
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;"></p>
</td>
<td rowspan="2" style="width:25%; border-top:none; border-left:none; border-bottom:1pt solid windowtext; border-right:1pt solid windowtext; background:rgb(255, 192, 0); padding:0in 5.4pt; height:6.6%; vertical-align:top;">
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height:normal;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;"><strong><span style="font-size:50px;">Coach:</span></strong></p>
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;"></p>
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;">
<img width="40%" height="18%" src="FC3pQ10.jpg" alt="Coach"/>
</p>
</td>
<td style="width:38%; border-top:none; border-left:none; border-bottom:1pt solid windowtext; border-right:1pt solid windowtext; background:rgb(112, 48, 160); padding:0in 5.4pt; height: 12.5%; vertical-align:top;">
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;"></p>
</td>
</tr>
<tr>
<td rowspan="2" style="width:28.7%; border-right: 1pt solid windowtext;border-bottom: 1pt solid windowtext;border-left: 1pt solid windowtext;border-image: initial;border-top: none;padding: 0in 5.4pt; background:pink; height: 3.8%; vertical-align:top;">
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;"></p>
<iframe width="99%" height="95%" src="https://www.youtube.com/embed/xKdVTomBID8" frameborder="50" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</td>
<td rowspan="2" style="width: 28.7%; border-top:none; border-left:none; border-bottom:1pt solid windowtext; border-right:1pt solid windowtext; padding:0in 5.4pt; background:pink; height:3.8%; vertical-align:top;">
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;"></p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3430.9287579053926!2d-88.18186818397758!3d30.692280494630253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x889bb2a5b86792ad%3A0x79078db3102940d3!2sMitchell%20Center!5e0!3m2!1sen!2sus!4v1573591584818!5m2!1sen!2sus" width="99%" height="95%" frameborder="50" style="border:0;" allowfullscreen=""></iframe>
</td>
</tr>
<tr>
<td rowspan="2" style="width:25%; bborder-top:none; border-left:none; border-bottom:1pt solid windowtext; border-right:1pt solid windowtext; background:rgb(255, 192, 0); padding: 0in 5.4pt; height: 300.3pt;vertical-align: top;">
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height:normal;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;"><strong><span style="font-size:50px;">Players:</span></strong></p>
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;"></p>
<xsl:template match="/">
<div style="width:30%; height:30%; overflow:scroll;">
<xsl:for-each select="team/player">
<dl>
<xsl:variable name="x" select="playerImgSource"/>
<dt><img src='{$x}' alt="Player" style="width:40%; height:40%;" align="left"/></dt>
<dd><xsl:value-of select="name"/></dd>
<dd>- Position: <xsl:value-of select="position"/></dd>
<dd>- Height: <xsl:value-of select="height"/></dd>
<dd>- Weight: <xsl:value-of select="weight"/></dd>
</dl>
<br/>
</xsl:for-each>
</div>
</xsl:template>
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;">
</p>
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;"></p>
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;"></p>
</td>
</tr>
<tr>
<td style="width:38%; border-right:1pt solid windowtext; border-bottom:1pt solid windowtext; border-left:1pt solid windowtext; border-image:initial;border-top: none; background:rgb(112, 48, 160); padding:0in 5.4pt; height: 12.5%; vertical-align:top;">
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;"></p>
</td>
<td style="width: 38%; border-top:none; border-left:none; border-bottom:1pt solid windowtext; border-right:1pt solid windowtext; background:rgb(112, 48, 160); padding:0in 5.4pt; height:12.5%; vertical-align:top;">
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;"></p>
</td>
</tr>
<tr>
<td colspan="3" style="width:100%; border-right:1pt solid windowtext; border-bottom:1pt solid windowtext; border-left:1pt solid windowtext; border-image:initial; border-top:none; background:red; padding: 0in 5.4pt;height: 6.3%; vertical-align:top;">
<p style="margin-top:0in;margin-right:0in;margin-bottom:.0001pt;margin-left:0in;line-height: normal;font-size:15px;font-family:"Calibri",sans-serif;"></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</xsl:stylesheet>
解决方案
因此，经过进一步调查，这是损坏的 .XSL 文件中的一个问题。我也滥用了 xsl:template。我分解了 .XSL 文件的 HTML 部分，直到它干净为止。然后我能够创建一个模型设计：
更新的 XML 文件
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="fresh.xsl"?>
<team xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<teamInfo>
<name>New Angeles PeLakers</name>
<teamImgSource>FC3pQ10.jpg</teamImgSource>
<locationURL>https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3430.9287579053926!2d-88.18186818397758!3d30.692280494630253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x889bb2a5b86792ad%3A0x79078db3102940d3!2sMitchell%20Center!5e0!3m2!1sen!2sus!4v1573591584818!5m2!1sen!2sus</locationURL>
<videoURL>https://www.youtube.com/embed/xKdVTomBID8</videoURL>
</teamInfo>
<pageColors>
<headerColor>gray</headerColor>
<teamTitleColor>blue</teamTitleColor>
<coachTextColor>black</coachTextColor>
<coachNameColor>red</coachNameColor>
<coachHeightColor>black</coachHeightColor>
<coachBackgroundColor>#ffc000</coachBackgroundColor>
<playerTextColor>black</playerTextColor>
<playerNameColor>blue</playerNameColor>
<playerPositionColor>black</playerPositionColor>
<playerHeightColor>black</playerHeightColor>
<playerWeightColor>black</playerWeightColor>
<playerBackgroundColor>#ffc999</playerBackgroundColor>
<videoTextColor>rgb(255, 192, 0)</videoTextColor>
<videoBorderColor>rgb(112, 98, 160)</videoBorderColor>
<videoBackgroundColor>pink</videoBackgroundColor>
<mapTextColor>rgb(255, 192, 0)</mapTextColor>
<mapBorderColor>rgb(112, 48, 160)</mapBorderColor>
<mapBackgroundColor>green</mapBackgroundColor>
<footerColor>red</footerColor>
</pageColors>
<coach>
<coachImgSource>FC3pQ10.jpg</coachImgSource>
<name>D. Melton</name>
<height>5'11</height>
</coach>
<player>
<playerImgSource>FC3pQ10.jpg</playerImgSource>
<name>Lonzo Ball</name>
<position>Point Guard</position>
<height>6'7</height>
<weight>190</weight>
</player>
<player>
<playerImgSource>FC3pQ10.jpg</playerImgSource>
<name>Josh Hart</name>
<position>Shooting Guard</position>
<height>6'6</height>
<weight>200</weight>
</player>
<player>
<playerImgSource>FC3pQ10.jpg</playerImgSource>
<name>Brandon Ingram</name>
<position>Small Forward</position>
<height>6'8</height>
<weight>190</weight>
</player>
<player>
<playerImgSource>FC3pQ10.jpg</playerImgSource>
<name>Kyle Kuzma</name>
<position>Power Forward</position>
<height>6'9</height>
<weight>220</weight>
</player>
<player>
<playerImgSource>FC3pQ10.jpg</playerImgSource>
<name>Ivan Zubac</name>
<position>Center</position>
<height>7'0</height>
<weight>250</weight>
</player>
</team>
更新了包含内部 CSS 的 XSL 文件：
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<style>
table {
position:absolute; height:100%; width:100%; left:0; right:0; top:0; bottom:0;
}
td.header {
width:100%; background:<xsl:value-of select="team/pageColors/headerColor"/>; height:22.5%; text-align:center;
}
td.videoBorder {
width:38%; background:<xsl:value-of select="team/pageColors/videoBorderColor"/>; height:1%; text-align:center;
}
td.videoContainer {
width:28.7%; background:<xsl:value-of select="team/pageColors/videoBackgroundColor"/>; height:3.8%;
}
td.mapBorder {
width:38%; background:<xsl:value-of select="team/pageColors/mapBorderColor"/>; height:1%; text-align:center;
}
td.mapContainer {
width:28.7%; background:<xsl:value-of select="team/pageColors/mapBackgroundColor"/>; height:3.8%;
}
td.coachContainer {
width:25%; background:<xsl:value-of select="team/pageColors/coachBackgroundColor"/>; height:100pt; vertical-align:top;
}
td.playerContainer {
width:25%; background:<xsl:value-of select="team/pageColors/playerBackgroundColor"/>; height:400pt; vertical-align:top;
}
td.footer {
width:100%; background:<xsl:value-of select="team/pageColors/footerColor"/>; height:6.3%;
}
div.coachContainer {
width:80%; height:50%; margin-left:2%;
}
div.playerContainer {
width:100%; height:400pt; overflow:scroll;
}
h1 {
line-height:normal; font-size:600%; color:<xsl:value-of select="team/pageColors/teamTitleColor"/>;
}
p.coachText {
line-height:normal;font-family:"Calibri",sans-serif;text-align:center; color:<xsl:value-of select="team/pageColors/coachTextColor"/>; font-size:50px;
}
p.playerText {
line-height:normal;font-family:"Calibri",sans-serif;text-align:center; color:<xsl:value-of select="team/pageColors/playerTextColor"/>; font-size:50px;
}
p.videoText {
line-height:normal; font-family:"Calibri",sans-serif; font-size:450%; color:<xsl:value-of select="team/pageColors/videoTextColor"/>;
}
p.mapText {
line-height:normal; font-family:"Calibri",sans-serif; font-size:450%; color:<xsl:value-of select="team/pageColors/mapTextColor"/>;
}
dd.coachName {
color:<xsl:value-of select="team/pageColors/coachNameColor"/>; font-size:250%;
}
dd.coachHeight {
color:<xsl:value-of select="team/pageColors/coachHeightColor"/>; font-size:150%;
}
dd.playerName {
color:<xsl:value-of select="team/pageColors/playerNameColor"/>; font-size:160%;
}
dd.playerPosition {
color:<xsl:value-of select="team/pageColors/playerPositionColor"/>; font-size:130%;
}
dd.playerHeight {
color:<xsl:value-of select="team/pageColors/playerHeightColor"/>; font-size:130%;
}
dd.playerWeight {
color:<xsl:value-of select="team/pageColors/playerWeightColor"/>; font-size:130%;
}
</style>
</head>
<table margin="0" border="1px" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="header" colspan="3">
<h1>
The <xsl:value-of select="team/teamInfo/name"/>
<xsl:variable name="teamLogo" select="team/teamInfo/teamImgSource"/>
<img src='{$teamLogo}' alt="Team Logo" style="width:10%; height:5%; vertical-align:middle;"/>
</h1>
</td>
</tr>
<tr>
<td class="videoBorder">
<p class="videoText"><strong>Video:</strong></p>
</td>
<td class="coachContainer" rowspan="2">
<p class="coachText"><strong>Coach:</strong></p>
<div class="coachContainer">
<dl><xsl:variable name="coachImg" select="team/coach/coachImgSource"/>
<dt><img src='{$coachImg}' alt="Coach" style="width:40%; height:100%;" align="left"/></dt>
<dd class="coachName"><b><xsl:value-of select="team/coach/name"/></b></dd>
<dd class="coachHeight"> - Height: <xsl:value-of select="team/coach/height"/></dd>
</dl>
</div>
</td>
<td class="mapBorder">
<p class="mapText"><strong>Map:</strong></p>
</td>
</tr>
<tr>
<td rowspan="2" class="videoContainer">
<br/>
<xsl:variable name="videoURL" select="team/teamInfo/videoURL"/>
<iframe width="99%" height="95%" src='{$videoURL}' frameborder="50" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</td>
<td rowspan="2" class="mapContainer">
<br/>
<xsl:variable name="locationURL" select="team/teamInfo/locationURL"/>
<iframe src='{$locationURL}' width="99%" height="95%" frameborder="50" style="border:0;"></iframe>
</td>
</tr>
<tr>
<td class="playerContainer" rowspan="2">
<p class="playerText"><strong>Players:</strong></p>
<div class="playerContainer">
<xsl:for-each select="team/player">
<dl style="margin-left:2%">
<xsl:variable name="playerImg" select="playerImgSource"/>
<dt><img src='{$playerImg}' alt="Player" style="width:35%; height:30%;" align="left"/></dt>
<dd class="playerName"><b><xsl:value-of select="name"/></b></dd>
<dd class="playerPosition"> - Position: <xsl:value-of select="position"/></dd>
<dd class="playerHeight"> - Height: <xsl:value-of select="height"/></dd>
<dd class="playerWeight"> - Weight: <xsl:value-of select="weight"/> lbs</dd>
</dl>
<br/><br/>
</xsl:for-each>
</div>
</td>
</tr>
<tr>
<td class="videoBorder"/>
<td class="mapBorder"/>
</tr>
<tr>
<td class="footer" colspan="3">
</td>
</tr>
</tbody>
</table>
</html>
</xsl:template>
</xsl:stylesheet>
推荐阅读
- excel - VBA将相应的数据复制并粘贴到新工作表上
- perforce - perforce 在特定时间段内获取更改
- html - How to make image DIVs take the same hight when responsive?
- json - 没有看到所有的帖子对象？
- xml - 架构检查错误：必须声明元素
- python - 如何在 Python 和 RobotFramework 之间传递在 Python 函数中创建的变量
- powershell - 可以通过 ExpandProperty 获取属性值，但不能通过直接访问
- c# - 当我将 Task.Run 包装在单独的 async/await 方法中时引发 TaskCanceledException
- linker - 与 macOS Mojave 上的框架链接
- git - 如何在同一目录中将 2 个 repos 分组