Share via

使用 SharePoint 主题展示您的风格

  • Article

原文发布于 2012 年 10 月 30 日（星期二）

Lionel Robinson 是专注于用户体验的 SharePoint 工程团队的一名项目经理。

利用 SharePoint 2013 中的主题，您可以更轻松地彻底更改您网站的外观并将其纳为己用。也就是说，SharePoint 网站的新外观很漂亮，那么您为何要进行更改呢？以下是一个个人案例：

在我们的双胞胎宝贝出生后，我在车里安装了两个儿童座椅，自此之后我根本没法挤进驾驶员座椅。甚至当我坐在乘客座椅上时，我的膝盖一倾斜就会碰到仪表板。是该换辆更大的车了。我和我的妻子都是在小货车上长大的，能够找到我们想要的品牌、型号和颜色的车让我们非常激动。这辆车不仅能装下我们一家人，而且还有大量载货空间。真的是太棒了！

也许这只是心理作用，但从那天起，我总感觉路上每三个开车的人中就有一个人和我开一样的车 - 拥有金属质感的淡蓝色本田奥德赛。我不止一次地觉得自己身处停车场内，直到按下车钥匙上的解锁按钮，结果才发现我的车实际上占用了两条车道。

我们该怎么做才能让车拥有自己独特的风格呢？一种便宜的做法是在车后贴上一个车尾贴或贴花。另一方面，您可花钱请人对车进行改装，直到您满意为止。或者，您自己大胆动手改装。

我们发现一些客户在使用当前 SharePoint 网站时会遇到此问题。如果每个人都使用几个相同的模板，则您的网站会在相似度极高的海量网站中迷失。您可以接受相似性，但希望通过细微的差异（车尾贴）来区分网站，或者您需要使用 CSS 和 HTML 来自定义您的网站，此过程不仅复杂而且相当耗时。

这些都是我们通过新的 SharePoint 主题体验解决的问题。通过此体验，您可以使用颜色、网站布局、字体和背景图像这四个基本要素在几分钟内自定义您的网站。通过更改这些内容，您可以获得真正唯一的外观。

快速演示

  1. 在“开始使用您的网站”(Getting started with your site) 下，单击“您的样式是什么?”(What's your style?) 图块。（如果这些图块已隐藏，您也可单击“设置”菜单上的“更改外观”(Change the look) 或在“网站设置”(Site Settings) 的标题“外观”(Look and Feel) 下找到“更改外观”(Change the look)。
  2. 第一页显示了我们放在一起的几个起点，旨在向您展示适用于网站外观的选项的范围。从这些选项中选择任一选项以开始操作。
     
  3. 现在有趣的事情开始了。您可以更改我们之前提到的四个要素（背景、布局、颜色和字体）中的任何一个，并立即预览更改。将您自己的背景图像拖至左上角的矩形上，依次选择要匹配的调色板、所需的网站布局和最符合您的个性的字体方案。
  4. 在选定您的最佳选项组合之后，单击“试用”(Try it out)（位于右上角）以在您自己的网站上进行预览。
  5. 这是出现不可思议的地方！我们生成了您网站的 CSS（定义外观和格式的文件）的副本，但将其更改为新的颜色和图像。当您看到此副本后，可以将其保留或重试。

是否有首选特定颜色或字体？

我们包含了一组我们喜欢的调色板和字体。不过，您始终能够添加您自己的调色板和字体。只需使用喜爱的文本编辑器即可实现此操作。操作将变得略带技术性（如果您熟悉 SharePoint 2010 中的主题，则可领先一步）。主要区别在于我们不再使用 THMX 文件格式。我们创建了一组新的简单 XML 格式来描述主题选项：SPColor 文件描述了调色板，SPFont 文件描述了字体方案。创建您自己的调色板和字体方案的最简单方式是从工作组网站中的默认设置开始操作。导航到网站集的根站点，单击“设置”菜单中的“网站设置”(site settings)，然后单击“主题库”(theme gallery)。您将在名为“15”的文件夹中找到调色板和字体方案。

调色板

每个 SPColor 文件均包含用于为每个可用颜色槽定义十六进制颜色值的简单 XML。如果您知道要更改的颜色槽，只需写入新值并将文件的副本保存到主题库的同一文件夹中（如果启用了版本控制或发布，请确保签入并发布文件）。您的新调色板将在主题体验的颜色选取器中提供（之前提到的第 3 步）。

以下是 SPColor 文件的代码段。此外，随颜色一起指定不透明度值的功能也是此版本的新增功能。您可使用 8 位十六进制值（其中，前两位数表示不透明度，后面的传统 6 位数表示红色、绿色和蓝色值）执行此操作。

<?xml version="1.0" encoding="utf-8"?>

<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="https://schemas.microsoft.com/sharepoint/">

    <s:color name="BodyText" value="444444" />

    <s:color name="SubtleBodyText" value="777777" />

    <s:color name="StrongBodyText" value="262626" />

    <s:color name="DisabledText" value="B1B1B1" />

    <s:color name="SiteTitle" value="262626" />

    <s:color name="WebPartHeading" value="444444" />

    <s:color name="ErrorText" value="BF0000" />

    <s:color name="AccentText" value="0072C6" />

    <s:color name="SearchURL" value="338200" />

    <s:color name="Hyperlink" value="0072C6" />

    <s:color name="BackgroundOverlay" value="D8FFFFFF" />

    ...

</s:colorPalette>

字体方案

字体可为网站增添大量个性。有关 SharePoint 的主题的最令人激动的功能之一是支持 Web 字体。在发布此功能之前，您必须在相同的旧 8–10 种 Web 安全字体（众所周知，默认情况下，Arial、Times New Roman 和 Georgia 等字体将安装到几乎所有设备上）中进行选择。通过使用 Web 字体，您可从 Internet 上提供的各种各样的字体中进行选择，并且 Web 浏览器会将必要文件与页面的其他内容一起下载。

与调色板的 SPColor 文件类似，SPFont 文件将定义用于每个可用字体槽的字体。制定自定义字体方案的最简单方式是从一个已可用的字体方案开始操作并根据需要进行调整。SharePoint 支持多种语言和脚本，字体主题也是如此。对于每个字体槽，您应在每个脚本中定义要使用的字体。对于 Web 安全字体，仅在每个字体槽的字样属性中包含名称。如果您要指定一种 Web 字体，则必须提供指向 Web 字体文件的四种字体格式的 URL（以实现跨浏览器支持）和一个用于在字体选取器中呈现字体名称的小型或大型缩略图（请参阅之前提到的第 3 步）。

<?xml version="1.0" encoding="utf-8"?>

<s:fontScheme name="Impact" previewSlot1="title" previewSlot2="body" xmlns:s="https://schemas.microsoft.com/sharepoint/">

    <s:fontSlots>

        <s:fontSlot name="title">

            <s:latin typeface="Impact"

                eotsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.eot"

                woffsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.woff"

                ttfsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.ttf"

                svgsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.svg"

                largeimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactLarge.png"

                smallimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactSmall.png" />

            ...

            <s:font script="Arab" typeface="Segoe UI Light" />

            <s:font script="Deva" typeface="Nirmala UI" />

            <s:font script="Grek" typeface="Segoe UI Light" />

            ...

        </s:fontSlot>

        <s:fontSlot name="navigation">

            <s:latin typeface="Segoe UI" />

  ...

            <s:font script="Arab" typeface="Segoe UI" />

            <s:font script="Deva" typeface="Nirmala UI" />

            <s:font script="Grek" typeface="Segoe UI" />

            ...

        </s:fontSlot>

        ...

    </s:fontSlots>

</s:fontScheme>

组合外观

“组合外观”(Composed looks) 是主题体验的第一步中展示的起点。您可添加使用自定义调色板和字体方案的新的组合外观。最好是保存一系列设计以便您能随时应用它们。您将会在“网站设置”(Site Settings) 的“Web 设计器库”(Web Designer Galleries) 下找到组合外观的列表。您可以管理一组现有的组合外观并添加新的组合外观。若要添加一个新的组合外观，您可以添加一个新的列表项并填入名称和标题以及指向母版也、SPColor 文件、背景图像（可选）和 SPFont 文件（可选）的 URL。在添加列表项之后，新的组合外观的预览将在“更改外观”(Change the look) 页上添加为起点。

赶紧动手操作吧！让您的网站看起来美观大方，展示您团队的个性，并做到真正的独一无二。要是现在我能对我的小货车这样做该多好啊。

这是一篇本地化的博客文章。请访问 Show Off Your Style with SharePoint Theming 以查看原文