如何使用XSLT文件

Question

articleDisplayThumb XSLT文件（使用DynamicParameter ID去通过收集）显示在ASP.net页面中的CMS集合：

<?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" /> 

与ID 127收集看起来像这样（的链接，标题必须是这样的：mypage?linkit={ID}其中ID是点击时每篇文章）：

我会像它结束了，像这样（在左侧的图像是artThumb，蓝色是artTitle和黑色是artText）：

个

中的XPath：

我怎样才能完成XSLT，所以可达到的最终结果，用相同的风格中的jsfiddle使用的呢？

UPDATE：

这篇那么远，

<?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> 

Answer 1

我真的建议对采集的控制和选择的内容视图模板控制，允许对集合过滤为好。这应该在8.6及更高版本中工作，并且比使用标准的asp.net和c＃标记的xslt更容易进行样式设计。

关于这个控件的文档可以在这里找到。 http://documentation.ektron.com/cms400/edr/web/edr.htm#Templated_Server_Controls/Content.htm%3FTocPath%3DTemplated%2520Server%2520Controls%7C_____2

Answer 2

而不是使用内文服务器控件，请尝试使用收集服务器控制：

下可能会有帮助。

<CMS:Collection ID="Collection1" runat="server" DefaultCollectionID="127" CssClass="setP" DisplayXslt="Workarea/CustomFiles/articleDisplayThumb.xsl" />