我已经设置了XSL文件:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="homeArticleThumb" match="/">
<xsl:for-each select="Collection/Content">
<div class="setTableCell vertAlignT">
<div class="articleTeaserHolder">
<div class="imgHolder">
<xsl:variable name="imageSrc" select="Html/root/NewsArticle/artThumb/img/@src" />
<xsl:variable name="imageId">
<xsl:text>NewsArticle_</xsl:text>
<xsl:value-of select="ID" />
<xsl:text>_image</xsl:text>
</xsl:variable>
<xsl:variable name="contentTitle" select="Html/root/NewsArticle/artTitle" />
<a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}">
<img id="{ $imageId }" class="imgArtThumb" title="{ $contentTitle }" alt="{ $contentTitle }" src="{ $imageSrc }" />
</a>
</div>
<div class="textHolder">
<div class="textHolderTop">
<a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}" class="defaultLinks setBold">
<xsl:value-of select="Html/root/NewsArticle/artTitle"/>
</a>
</div>
<div class="textHolderBottom">
<xsl:value-of select="Html/root/NewsArticle/artTeaser" />
</div>
</div>
</div>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
CSS:
.setTableCell
{
display: table-cell;
}
.imgHolder
{
float: left;
display: inline-block;
width: 43%;
height: 100%;
padding: 1% 2% 0 0;
}
.vertAlignT
{
vertical-align: top;
}
.textHolder
{
float: left;
display: inline-block;
width: 55%;
height: 100%;
}
.textHolderTop
{
width: 100%;
height: 48%;
text-align: left;
padding-bottom: 2%;
overflow: hidden;
}
.textHolderBottom
{
width: 100%;
height: 46%;
overflow: hidden;
text-align: left;
padding-top: 2%;
padding-bottom: 2%;
}
@media only screen and (max-width: 820px) {
.setTableCell {
display: block;
}
}
我使用此行调用上述XSL:
<CMS:Collection ID="id123" runat="server" DefaultCollectionID="128" DisplayXslt="art.xsl" GetHtml="true" />
显示此:
将来,我可能需要向该集合中添加更多内容,因此,代替4篇文章,它可能是6篇或7篇...或者许多文章。
如何修改XLS文件,以使其始终每行显示两篇文章,然后转到下两行的下一行,转到下两行的下一行,依此类推。
最佳答案
我修改了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="/Collection">
<table class="serviceHolder hidOverflow">
<xsl:for-each select="Content[position() mod 2=1]">
<xsl:variable name = "current-pos" select="(position()-1) * 2+1"/>
<tr class="section group vertAlignT">
<xsl:for-each select="../Content[position()>=$current-pos and position() < $current-pos+2]" >
<td class="col span_half">
<table>
<tr class="section group vertAlignT">
<td class="col span_1_of_3 span_pad_right vertAlignT">
<xsl:variable name="imageSrc" select="Html/root/NewsArticle/artThumb/img/@src" />
<xsl:variable name="imageId">
<xsl:text>NewsArticle_</xsl:text>
<xsl:value-of select="ID" />
<xsl:text>_image</xsl:text>
</xsl:variable>
<xsl:variable name="contentTitle" select="Html/root/NewsArticle/artTitle" />
<a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}">
<img id="{ $imageId }" class="imgArtThumb" title="{ $contentTitle }" alt="{ $contentTitle }" src="{ $imageSrc }" />
</a>
</td>
<td class="col span_2_of_3 span_pad_left vertAlignT">
<table>
<tr>
<td>
<a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}" class="defaultLinks setBold">
<xsl:value-of select="Html/root/NewsArticle/artTitle"/>
</a>
</td>
</tr>
<tr>
<td><xsl:value-of select="Html/root/NewsArticle/artTeaser" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
我使用
position() mod 2=1
在每个第二个条目之后都放一个空格。