如何使用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" />