Share via

使用 SharePoint 主题引擎

  • Article

原文发布于 2010 年 4 月 10 日（星期六）

大家好，我是 Kolby，很高兴再次与大家见面。随着 SharePoint 2010 发布日期的临近，我对我们的产品以及在 SharePoint 2010 中新增的部分功能感到激动。我特别期待 SharePoint 团队在此版本中添加的主题功能。上周，我已了解如何设置 CSS 文件以便在 SharePoint Designer 2010 中为母版页创建主题，我觉得“大家有必要了解一下！”

有哪些可能的主题？

主题引擎作用于 CSS 文件，并可执行以下操作（标记名称显示为 斜体 ）：

  • 更换颜色（如背景色或字体颜色）- ReplaceColor
  • 更换字体 – ReplaceFont
  • 为图像重新着色（使用下列三种方法之一：染色、混合和填充）- RecolorImage

可通过浏览器 UI 选择一个可即用的网站主题，也可以用 SharePoint Server (SPS) 选择 12 种颜色和 2 种字体来创建新主题。这些值存储在一个 THMX 文件（该文件也是 Microsoft Office 使用的一项标准）中。还可以在 Microsoft PowerPoint 中创建一个主题并将其另存为 THMX 文件，以便在 SharePoint 中使用。THMX 文件存储在根网站的主题库中，您可以通过 SPD 或浏览器的“网站设置”(Site Settings) >“主题”(Themes) 库添加主题。12 种主题颜色分别由以下标记表示：

  • Dark1、Dark2
  • Light1、Light2
  • Accent1、Accent2、Accent3、Accent4、Accent5、Accent6
  • Hyperlink
  • Followed Hyperlink

主题引擎将使用这些颜色，并为每种颜色生成另外 5 种排列：Lightest、Lighter、Medium、Darker 和 Darkest。若要在 CSS 文件中引用排列，请使用以下格式： 颜色-排列 （例如“Light2-Darkest”）。

语法  

主题引擎通过读取 CSS 文件中的注释运行。对于主题样式，定义一个默认选择，然后将主题标记直接置于样式之前。例如：我有一个背景色元素，并希望为其创建主题 Light2-Darkest。CSS 中的我的定义将与以下内容类似：

/* [ReplaceColor(themeColor:"Light2-Darkest")] */ background-color:#707070;

在默认主题中，背景将显示为 #707070，但在应用某个主题后，背景色将替换为 Light2-Darkest。有关如何使用其他标记的示例，请参阅本文结尾或查看 v4.master 的默认 CSS 文件 (corev4.css)，此文件可作为一个不错的参考。

文件设置  

若要使用主题功能设置母版页，您必须执行以下两项操作：

  1. 将 CSS 文件置于对引擎可见的位置。
  2. 在母版页中正确注册 CSS 文件。

位置  

主题引擎仅在被置于正确位置时才会对 CSS 文件运行。在自定义设置中，我们将使用 RootSite/Style Library/~language/Themable 文件夹。已激活 SharePoint Server 发布功能的 SPS 网站中将包含此文件夹。如果您在不具有此结构的根网站中操作，则只需要根网站中一个名为“Style Library”的文件夹（该文件夹包含一个名为“Themable”的子文件夹）。主题引擎将看到 Themable 文件夹中的所有内容（包括子文件夹中的内容）。在 SharePoint Designer 中或通过浏览器重新创建此文件夹结构。语言文件夹是可选文件夹，但如果您希望不同的 CSS 文件对应于不同的语言，则必须使用该文件夹。对于英语，将该文件夹命名为 en-us。

虽然不需要将图像置于某个特定位置，但建议将其放在 RootSite/Style Library/Images 文件夹中。

有关对图像重新着色的两个提示。如果对在多个位置呈现的某个图像重新着色，则将在所有主题位置使用对该图像执行的最后一次重新着色。例如，我希望在同一图像上显示不同的重新着色方法（染色、混合和填充），但它们都显示为已填充。我必须保存图像的各个副本，并为其创建不同的主题（注意：最后的一个替代方法是，使用分离属性告知引擎在重新着色时创建新图像，但由于在呈现过程中会因下载多个图像副本时而影响性能，因此应谨慎使用此方法。基于此原因，我在这里就不深入讨论了）。对于图像簇（一个包含多个图像的文件），可以使用 includeRectangle 参数对图像的各个部分重新着色（有关如何执行此操作的信息，请参阅 corev4.css 中的相关示例）。

注册  

对于要应用于母版页的主题 CSS 文件，我们需要注册这些 CSS 文件，而不是链接它们。在应用主题时，这会将母版页指向主题 CSS 文件。将以下参数置于母版页的页眉标记中：

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/ Themable /myStyleSheet.css %>" After="corev4.css" runat="server"/>

After 参数可确保将主题 CSS 文件应用于 corev4.css 后面的页面。但请注意， <% $SPUrl 标记将不会在 SharePoint Foundation (SPF) 中解析。在 SPF 中，您将需要使用硬编码 URL 指定位置。但遗憾的是，当您希望对不同的语言使用不同的 CSS 文件时，这将受到限制（因为您将不会具有 ~language 标记）。

演示  

现在我们应设置“themable”CSS 文件了。草拟一个外观精美的母版页并进行试用。若要更好地了解主题末尾的调色板，我将一个显示所有颜色排列的大表置于 v4.master 中。另外，我还包含了一个示例图像并尝试对它重新着色。下面是我用默认配色方案创建的主题（请注意，我将白色用作了背景色样式的默认设置）。

样式演示

接下来，我跳转到浏览器并选择新的网站主题（选择使用 Papyrus 和 Segoe Script 作为字体的 Convention 主题如何？）。现在，可以看到一个色彩更丰富的表格（见下表）。我为超链接文本和图像标签应用了主题。对于重新着色，我使用了 Dark2-Lightest （您会发现，Dark2-Lightest 单元格和使用填充方法重新着色的徽标之间实现了完美的色彩匹配）。

样式演示 2

示例代码  

下面是第二个徽标图像（为其字体、字体颜色和图像颜色创建了主题）的 CSS 的示例片段：

/* [ReplaceFont(themeFont: "MinorFont")] */ font-family:Verdana;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:black;
/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Tinting")] */ background:url("/Style Library/images/spdicon1.png") no-repeat;

图像重新着色的质量让我感到非常惊奇。如果正确使用并且风格适当，SharePoint 主题引擎确实可让那些同时注重外观和功能的用户感到满意 :)

感谢您阅读本文，希望您像我一样享受新的 SharePoint 主题引擎所带来的乐趣和帮助。

这是一篇本地化的博客文章。请访问 Working with the SharePoint Theming Engine 以查看原文