Как отобразить коллекцию CMS на странице ASP.net с помощью файла XSLT
articleDisplayThumb
XSLT-файл (используйтеDynamicParameter
ID для просмотра коллекции):
<?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="col span_1_of_3" style="height: 150px; border: 1px solid black;">
<div class="test2">
<div style="float: left; width: 28% padding-right: 2%; height: 100%;">
{DISPLAY THE IMAGE HERE AND MAKE IT LINK TO THE ARTICLE} --> artThumbImg
</div>
<div style="float: left; width: 58%; height: 100%;">
<div style="width: 100%; height: 48%; padding-bottom: 2%;">
{DISPLAY THE TITLE AND LINK HERE} --> artTitle
</div>
<div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap;">
{DISPLAY THE TEXT WITH "..." Here} --> partial artText (a Teaser...)
</div>
</div>
</div>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
CSS для классов выше (я пытаюсь сделать его реагирующим на размер экрана, используя этот пример:http://jsfiddle.net/Lry4z15m/2/):
/* COLUMN SETUP */
.col {
display: block;
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
/* GROUPING */
.group:before, .group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 98%;
}
}
Я звоню выше с моей страницы ASP.net так:
<CMS:ContentBlock ID="CB" runat="server" DynamicParameter="127" CssClass="setP" DisplayXslt="Workarea/CustomFiles/articleDisplayThumb.xsl" />
Коллекция с удостоверением личности127
выглядит так (ссылка на заголовок должна выглядеть примерно так:mypage?linkit={ID}
гдеID
для каждой статьи при нажатии):
То, что я хотел бы в конечном итоге, как это (изображение слеваartThumb
синий этоartTitle
и черный этоartText
):
XPaths:
Как я могу завершить XSLT, чтобы достичь конечного результата в том же стиле, что и в JSFiddle?
ОБНОВИТЬ:
Сделал это до сих пор ...
<?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="col span_1_of_3" style="height: 150px; border: 1px solid black;">
<div class="test2">
<div style="float: left; width: 28% padding-right: 2%; height: 100%;">
<xsl-copy-of select="/root/NewArticle/artThumb" />
</div>
<div style="float: left; width: 58%; height: 100%;">
<div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;">
<a href=""><xsl:value-of select="/root/NewArticle/artTitle" /></a>
</div>
<div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left">
<xsl:value-of select="/root/NewArticle/artText" />
</div>
</div>
</div>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>