在 SharePoint 中创建母版页预览文件
重要
此可扩展性选项仅适用于经典 SharePoint 体验。 不能将此选项用于 SharePoint Online 中的新式体验（如通信网站）。 我们不建议再使用经典体验或这些品牌技巧。
了解如何创建母版页预览文件，此类文件用于 SharePoint 主题设置体验，以显示选定主题组件的预览。
“更改外观”向导是 SharePoint 主题体验的入口点。 设计库是“更改外观”向导中的第一页，显示可用设计的缩略图视图。 用户先选择网站设计，再继续转到下一页以自定义设计。 然后，用户可以先预览网站，再将设计应用到网站。 母版页预览文件用于生成缩略图和预览图像。 如果母版页没有相应的预览文件，则无法在主题体验中使用它。
有关详细信息，请参阅 SharePoint 的主题概述。
使用母版页预览文件要了解的核心概念
表 1 列出的文章有助于您理解使用母版页预览文件要了解的核心概念。
表 1. 使用母版页预览文件要了解的核心概念
| 文章标题 | 描述 |
|---|---|
| SharePoint 主题概述 | 了解 SharePoint 中的主题设置体验。 |
| 为发布网站选择主题 | 了解如何使用"更改外观"向导更改 SharePoint 网站的外观。 |
什么是母版页预览文件？
母版页预览文件（.preview 文件）是经过特殊格式化的文件，具有针对默认调色板、默认字体方案、已标记化的 CSS 和已标记化的 HTML 的部分。 母版页预览文件必须使用与相应母版页相同的名称（不包括扩展名）。 例如，如果您的一个母版页名称为 article.master，则相应的母版页预览文件名称为 article.preview。 母版页和母版页预览存储在母版页样式库中。
母版页预览文件具有以下结构：
Default color palette
[SECTION]
Default font scheme
[SECTION]
CSS
[SECTION]
HTML
在母版页预览文件中：
默认调色板是主题库 (http://SiteColltionName/_catalogs/theme/15/) 中默认要使用的 .spcolor 文件。 默认调色板对应于在处于默认状态的母版页中使用的颜色。 也就是说，用户已在“更改外观”向导中选择了调色板。
默认字体方案是主题库 (http://SiteCollectionName/_catalogs/theme/15/) 中默认要使用的 .spfont 文件。 默认字体方案对应于在处于默认状态的母版页中使用的字体。 也就是说，用户已在“更改外观”向导中选择了字体方案。
CSS 是包含级联样式表 (CSS) 的部分。 所有 CSS 类必须具有[ID] 前缀。 以下示例显示了母版页预览文件中 CSS 部分的一段。
[ID] #dgp-pageContainer { background-color: [T_THEME_COLOR_PAGEBACKGROUND]; color: [T_THEME_COLOR_BODYTEXT]; width: 100%; height:100%; background-image: url('[T_IMAGE]'); background-size: cover; font-family: [T_BODY_FONT]; }HTML 是定义预览的 HTML 结构的 HTML 部分。
注意
在母版页预览文件中，应将所有维度值都指定为相对单位。 例如，可以将维度值指定为百分比或 em 度量值。 有关 em 度量的详细信息，请参阅第 5.1.1 节。字体相对长度： W3C CSS 值和单位模块级别 3 工作草稿中的“em”、“ex”、“ch”、“rem”单位。
令牌在母版页预览文件中广泛使用。 令牌是字符串值，将替换为生成的预览中的文本、颜色值或字体值。 以下部分描述了可用的令牌，及其使用方法。
杂项令牌
杂项令牌将替换为预览中指定的高度和宽度值。
表 2. 杂项令牌
| 令牌名称 | 说明 |
|---|---|
| [T_HEIGHT] | 预览的高度。 |
| [T_WIDTH] | 预览的宽度。 |
| [T_IMAGE] | 可选背景图像的 URL。 |
| [T_IMGHEIGHT] | 图像的高度（如果需要）。 |
| [T_IMGWIDTH] | 图像的宽度（如果需要）。 |
颜色令牌
颜色令牌将替换为预览图像中的颜色值。 表 3 描述了两种格式的颜色令牌。 将 ColorSlot 替换为颜色槽的批注名称。 颜色令牌必须采用大写（例如，[T_THEME_COLOR_PAGEBACKGROUND]）。 若要查看可用颜色令牌的列表，请参阅 SharePoint 中的调色板和字体中的 颜色插槽映射部分。
表 3. 颜色令牌
| 令牌名称 | 说明 |
|---|---|
| [T_THEME_COLOR_ ColorSlot] | 如果您想要颜色插槽的颜色值，则使用此格式。 |
| [T_THEME_COLOR_ _ColorSlot__AA] | 如果您想要颜色插槽的 8 位数十六进制值，则使用此格式。 此格式对筛选值在 Internet Explorer 中实现不透明度和渐变很有用。 |
字体令牌
字体令牌将替换为预览图像中的字体值。
- [T_ _SlotName__FONT]
将 SlotName 替换为字体槽的名称。 字体标记必须是大写 (，例如[T_BODY_FONT]) 。若要查看字体槽的列表及其在页面中的使用位置，请参阅 SharePoint 中的调色板和字体中的字体槽部分。
文本内容令牌
表 4 中列出的令牌用于母版页预览文件中的 HTML 部分。 令牌将替换为设计库预览图像中的示例文本。 示例文本显示的语言与网站其余部分相同。
表 4. 文本内容令牌
| 令牌名称 | 说明 |
|---|---|
| [BRANDSTRING] | 显示在页面上的品牌文本。 在预安装的主题中，该文本显示在左上角"品牌"中。 |
| [SUITELINK1][SUITELINK2][SUITELINK3] | 显示在套件栏中的套件链接。 请参阅图 1 中的"第一项"、"第二项"和"第三项"。 |
| [WELCOME] | 用户名文本。 请参阅图 1 中的"用户名"。 |
| [RIBBONTAB1][RIBBONTAB2][RIBBONTAB3] | 功能区选项卡的名称。 请参阅图 1 中的"选项卡 1"、"选项卡 2"和"选项卡 3"。 |
| [SEARCHBOX] | 搜索框中的文本。 请参阅图 1 中的"搜索文本"。 |
| [TN1][TN2][TN3] | 水平导航项。 "导航 1"、"导航 2"、"导航 3"。 |
| [TITLE] | 页标题。 "页标题"。 |
| [QL1][QL2][QL3][QL4] | 垂直导航项。 "第一个菜单项"、"第二个菜单项"、"第三个菜单项"。 |
| [QLADD] | 垂直导航项下方的链接。 请参阅图 1 中的"命令链接"。 |
| [CA TABLE HEADER] | 页面文本上方的标题。 图 1 中为"欢迎使用主题预览!"。 |
| [CA TABLE DESCRIPTION] | 说明文本。 图 1 中为"您正在查看如何为您的内容在此主题中使用颜色的示例。 这是一个示例…"。 |
| [CA ACCENT COLORS] | 强调文字颜色和颜色块列表。 |
| [CA LIST TITLE] | 列表标题。 图 1 中为"列表示例"。 |
| [CA TABLE] | 示例列表。 |
| [SITETITLE] | 网站的标题。 请参阅图 1 中的"网站标题"。 |
图 1. 具有示例文本的预安装主题
创建母版页预览文件
若要创建母版页预览文件，请使用现有母版页预览作为出发点。
创建母版页预览文件
复制母版页预览。 SharePoint 包含 oslo.preview 和 seattle.preview。
重命名母版页预览的副本，使其与相应的母版页匹配。 例如，如果母版页名称为 article.master，则将母版页预览重命名为 article.preview。
使用 HTML 编辑器编辑母版页预览文件。 更新文件以反映母版页的布局和外观。
提示
在母版页预览文件中，维度值指定为百分比。 以下示例显示了将绝对测量（像素）转化为相对测量（百分比）的一种方法。 假设浏览器尺寸为 1024x768。 如果母版页中有高度为 32 像素的元素，且父元素是页面正文，可以用元素高度除以浏览器高度，计算百分比。 相对度量值是 4%(32/768)。
将母版页预览文件上传到母版页样式库。
通过“更改外观”向导，使用网站内容测试母版页预览。
注意
也可以向“组合外观”列表添加项，创建使用新母版页的设计。 此设计位于设计库中（“更改外观”向导的第一页）。 有关详细信息，请参阅如何：在 SharePoint 中部署自定义主题中的使用用户界面部署主题过程。
根据需要，重复执行第 3 步到第 5 步。