演练：创建自定义的主页和内容查询 Web 部件 XSL

项目
06/15/2015

上次修改时间： 2010年4月19日

适用范围： SharePoint Server 2010

本文内容
使视频显示为浮动
为没有缩略图的视频创建默认图像
向 ItemStyle.xsl 中添加 Description 元素
向 ItemStyle.xsl 中添加分级显示

本主题是指导您如何创建和自定义视频共享网站的系列演练（包含五个部分）的第四部分。

在完成演练：创建视频网站和演练：自定义视频上载体验中所述的任务后，便可以创建均为共享、查看和管理视频而设计的自定义主页和自定义内容查询 Web 部件 (CQWP) XSL。

创建主页和 CQWP XSL 包括四个任务：

使用 CSS 重写定义来使 ContentByQueryWebPart 对象显示的项变为浮动的。
为 ContentByQueryWebPart 对象创建新的项样式。
为没有缩略图的视频创建默认图像。
为项样式添加分级显示。

向主页中添加一个或多个内容查询 Web 部件 (CQWP) 对设计可最大化用于排序和显示视频的可用选项的网站至关重要。CQWP 显示视频的动态列表；您可以选择（例如）强调最近上载的视频或顶级视频。本演练演示如何为经过优化以采用强调视觉元素的格式（例如显示大缩略图、按浮动布局每行安排多个视频以及显示分级）显示视频的 CQWP 创建自定义样式。

除了自定义网站外观外，您还可以在单击视频结果时将用户定向到自定义显示表单（在演练：创建视频网站中创建）。使用自定义显示表单作为呈现 MediaWebPart 对象以直接播放视频文件（这是单击视频结果时触发的默认操作）的替代方法。

先决条件

完成演练：创建视频网站和演练：自定义视频上载体验中所述的任务。

为 CQWP 创建新样式

启动 Microsoft SharePoint Designer 2010。在"文件"菜单上单击"打开"。
导航到 /Style Library/XSL Style Sheets 文件夹，然后打开 ItemStyle.xsl 文件。
签出该文件以进行编辑，以便您可以在需要时回滚更改。
复制文件中的 XSL:Template 元素及其所有 ImageTopCentered 内容作为新模板。这是必需的，因为 ItemStyle 类似于现有的 ImageTopCentered 样式。
更改 name 属性和 match 属性的值，以便它们与新样式名称的值相匹配。例如，若要将 name 属性更改为 ContosoWithRatings，请更新 XSL:Template 标记，如下所示。
```
<xsl:template name="ContosoWithRatings" match="Row[@Style='ContosoWithRatings']" mode="itemstyle">
```
保存更新的 ItemStyle.xsl 文件。
通过查看任何 CQWP 的"Web 部件属性"窗格来验证样式是否可用。

将以下样式属性添加到样式中的第一个 <div> 标记中。

<div class="item centered" style="float:left;padding-left:20px;padding-right:20px; width:160px; height:240px; margin-left:auto; margin-right:auto">

将 float 属性及其参数添加到 item centered 样式中会居中呈现各项的所有数据。将代码中的精确像素值修改为所需像素数。

使视频显示为浮动

您可以创建自定义 CSS 重写定义来使 ContentByQueryWebPart 对象返回的项变为浮动的。编写代码后，将其应用到使用 CQWP 的每个页面布局，而不是应用到 XSL 本身：更改 XSL 会影响所有 CQWP 样式，而不仅仅是在使用了为视频设计的 CQWP 时适用的那些页面布局。

此定义将 float 属性添加到 CQWP 对显示的各项应用的 dfwp-item 样式中。

<style type="text/css">
.dfwp-item
{ 
float:left;
}
</style>

为没有缩略图的视频创建默认图像

默认情况下，会运行为 CQWP 创建的样式，以便为每个图像定义有效的预览图像 URL。没有有效的预览图像 URL 的任何图像都无法正确呈现。为新样式添加逻辑，以便在没有预览图像 URL 时，网页显示 SharePoint Server 2010 中默认提供的默认视频图像。

备注

以下是默认视频图像的默认位置：http://<server>/_layouts/images/VideoPreview.png

在样式表中，使用 <xsl:choose> 语句包装现有的 <img> 标记。<xsl:choose> 语句在有预览图像 URL 时遵循默认的 SharePoint Server 2010 行为，否则它使用默认图像。

<xsl:choose>
   <xsl:when test="string-length($SafeImageUrl) != 0">
      <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}"height="120" width="160"/>
      </xsl:when>
      <xsl:otherwise>
      <img class="image" src="http://<server>/_layouts/images/VideoPreview.png" alt="{@ImageUrlAltText}"  height="120" width="160"/>
   </xsl:otherwise>
</xsl:choose>

向 ItemStyle.xsl 中添加 Description 元素

通过向样式的 link-item <div> 标记下添加标记来向样式中添加 description 元素。ItemStyle.xsl 文件的 Default 样式中的 link-item <div> 标记和 description <div> 标记的行为几乎相同。description <div> 显示在屏幕上的一个小空间中，所以它会剪切 128 个字符以后的字符串。剪切字符串可防止长说明呈现内联。

<div class="description">
        <xsl:if test="string-length(@Description) &gt; 128">
           <xsl:value-of select="concat(substring(@Description,1,128),'…')" />
        </xsl:if>
        <xsl:if test="string-length(@Description) &lt; 128">
           <xsl:value-of select="@Description"/>
        </xsl:if>
     </div>

向 ItemStyle.xsl 中添加分级显示

如果向视频网站中添加分级自定义项，则分级显示允许为每个视频显示分级。向 ItemStyle.xsl 文件中添加 rating 元素类似于添加 description 样式。若要显示范围从 0 个星到 5 个星的分级，请将每个值的图像文件（总共六个文件）上载到服务器。每个文件应显示不同数量的星。上载图像后，添加逻辑以基于 rating 字段中的值显示相应图像。我们建议您在网站的"样式库"中新建一个文件夹来实现此目的。代码示例假定已将所有图像上载到一个名为 /Style Library/Rating CBQ Images 的文件夹中，并且这些文件分别命名为 0Stars.png、1Stars.png、2Stars.png 等等。如果您使用不同的名称，请相应地更新标记。在 URL 中，使用您的服务器的名称替换 <server>。

<div> 
         <span id = "rating" style = "vertical-align:top">
<xsl:choose>
                    <xsl:when test = "@Rating &gt;= 5">
                    <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/5stars.png"></img>
                    </xsl:when>
                        <xsl:when test = "@Rating &gt;= 4">
                        <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/4stars.png"></img>
                        </xsl:when>
                        <xsl:when test = "@Rating &gt;= 3">
                        <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/3stars.png"></img>
                        </xsl:when>
<xsl:when test = "@Rating &gt;= 2">
                            <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/2stars.png"></img>
                        </xsl:when>
                        <xsl:when test = "@Rating &gt;= 1">
                            <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/1stars.png"></img>
                        </xsl:when>
                        <xsl:when test = "@Rating &gt;= 0">
                        <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/0stars.png"></img>
                        </xsl:when>
                        <xsl:otherwise>
                            <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/0stars.png"></img>
                        </xsl:otherwise>
                   </xsl:choose>
                </span>
            </div>