在 SharePoint 中部署自定义主题

项目
03/21/2023

了解如何使用用户界面或通过实施功能接收器将自定义主题部署到 SharePoint 网站。

SharePoint 包括预先安装的主题。您可以通过创建更多调色板、字体方案和母版页，创建自定义主题。将文件上载到主题库和母版页样式库之后，您即可使用用户界面或代码将主题部署到网站。有关调色板和字体方案的详细信息，请参阅SharePoint 中的调色板和字体。

注意

本文仅适用于经典 SharePoint 网站体验上下文。若要详细了解新式 SharePoint 网站及其主题支持，请参阅下列文章：SharePoint 网站主题

部署主题需要了解的核心概念

表 1 列出了帮助您了解部署主题的核心概念的文章。

表 1. 要部署主题需了解的核心概念

文章标题	描述
SharePoint 主题概述	了解 SharePoint 中的主题设置体验。
功能事件	了解功能事件，以便捕获并响应在服务器场中安装功能时发生的事件。

将文件上载到主题库和母版页样式库

您可以通过创建更多调色板和字体方案并将其上载到主题库，来创建自定义主题。当您修改主题设置体验设计或以编程方式应用主题时，您即可使用新的调色板和字体方案。同样，如果您希望具有更多可供选择的网站布局，您可以将更多母版页及相应的预览文件上载到母版页样式库。以下列表说明了将文件放置在何处：

母版页样式库：列出母版页文件及其相应的预览文件（.preview 文件）。若要在“更改外观”向导中使用母版页，必须有母版页预览文件。还可以将 JavaScript 文件和其他设计资产上传到母版页样式库。

若要从 SharePoint 用户界面访问母版页样式库，请在网站设置页中的Web设计器库下选择母版页。也可直接导航到该网站（http://{SiteName}/_catalogs/masterpage/）。
主题库：列出可用于主题体验的调色板和字体方案。 SharePoint 会在“15”文件夹中进行查找，以确定可用的调色板和字体方案。

若要从 SharePoint 用户界面访问主题库，请在网站设置页中的Web设计器库下，选择主题。也可直接导航到网站（http://{SiteCollectionName}/_catalogs/theme/15/）。
样式库列出了想在主题体验中使用的自定义CSS文件。可直接导航到样式库（替换该URL中的SiteCollectionName和language： http://{SiteCollectionName}/Style Library/language/Themable/)。

注意

将自定义 CSS 文件放置在主题库的 Themable 文件夹中，而不是母版页样式库的 Themable 文件夹中。主题引擎仅可识别存储在样式库的 Themable 文件夹中的 CSS 文件。

注意

如果您在母版页样式库和主题库上启用了版本控制，您必须先发布设计文件，然后才可供主题引擎使用。

使用用户界面部署主题

组合外观或设计包括决定网站外观的调色板、字体方案、背景图像与母版页。 “组合外观”列表中包含设计库中提供的组合外观。您可以通过在“组合外观”列表中添加列表项并指定要使用的母版页、调色板、字体方案和背景图像来创建设计。

注意

如果您希望母版页在设计库中可用，则需要母版页预览文件。

添加组合外观的具体步骤

选择"设置"图标，然后选择"网站设置"。
在"Web 设计器库"下，选择"组合外观"。
在"组合外观"列表中，选择"新建项目"。
在"标题"文本框中，输入设计的标题。
在"名称"文本框中，输入设计的名称。名称将显示在"组合外观"列表和设计库中。
在"母版页 URL"文本框中，输入母版页的 URL。 URL 可以是相对 URL。
在“ 主题 URL ”文本框中，输入调色板的 URL (*.spcolor 文件) 的 URL。 URL 可以是相对 URL。
在"图像 URL"文本框中，输入背景图像的 URL。这是可选项。 URL 可以是相对 URL。
在“ 字体方案 URL ”文本框中，输入字体方案的 URL， (*.spfont 文件) 的 URL。这是可选项。 URL 可以是相对 URL。
在"显示顺序"文本框中，输入显示顺序编号。这确定了设计在设计库中的位置。
选择“保存”。

注意

如果组合外观的值有问题，该组合外观将不会添加到设计库中，且不会在日志文件中记录消息。下面列出了组合外观无法添加的可能原因：找不到文件、其中一个文件格式有问题或者 SharePoint 无法访问文件。

现在可以使用设计库，将新设计应用到网站。有关详细信息，请参阅 Office.com 上的为发布网站选择主题。

使用代码部署主题

您可以通过实施功能接收器来部署主题。

使用功能接收器部署主题

创建继承自SPFeatureReceiver类的功能接收器类。

在 FeatureActivated 方法中，创建使用调色板和字体方案的 SPTheme 对象，然后将主题应用到网站。

下面的代码示例展示了如何将自定义调色板和字体方案部署到网站。

// Get the SPColor file. Replace with the path to your SPColor file.
SPFile colorPaletteFile = Web.GetFile("path to .spcolor file");
if (null == colorPaletteFile || !colorPaletteFile.Exists)
{
    // TODO: handle the error.
    return;
}

// Get the SPFont file. Replace with the path to your SPFont file.
SPFile fontSchemeFile = Web.GetFile("path to .spfont file");
if (null == fontSchemeFile || !fontSchemeFile.Exists)
{
    // TODO: handle the error.
    return;
}

// Open an SPTheme with the two files. Replace NewTheme with the name for your theme.
// Note: If you have a background image, you can specify the following:
// SPTheme.Open("NewTheme", colorPaletteFile, fontSchemeFile, backgroundURI)
SPTheme theme = SPTheme.Open("NewTheme", colorPaletteFile, fontSchemeFile);


// Now apply your theme to the site.
// The themed CSS output files are stored in the Themed folder of the Theme Gallery of the root web
// of the site collection. To specify that the files should be stored in the _themes folder within the root
// web, pass false to the ApplyTo method.
theme.ApplyTo(Web, true);

注意

ApplyTo 方法中的 shareGenerated 参数指定是否可以跨网站集中的网站共享主题文件。 In general, it is set to true for SharePoint Server and SharePoint Online sites and set to false for SharePoint Foundation sites. The shareGenerated parameter must be set to true if you intend the themed files to be shared. For more information, see ApplyTo(SPWeb, Boolean) .

当用户在"更改外观"向导中应用主题时，该向导还会更新"组合外观"列表和设计库中名为"当前"的主题。当您以编程方式应用主题时，必须手动更新“当前”主题。以下示例说明如何更新“当前”主题。

SPList designGallery = Web.GetCatalog(SPListTemplateType.DesignCatalog);
if (null == designGallery)
{
    // TODO: Handle the error.
    return;
}

SPQuery q = new SPQuery();
q.RowLimit = 1;
q.Query = "<Where><Eq><FieldRef Name='DisplayOrder'/><Value Type='Number'>0</Value></Eq></Where>";
q.ViewFields = "<FieldRef Name='DisplayOrder'/>";
q.ViewFieldsOnly = true;

SPListItemCollection currentItems = designGallery.GetItems(q);

If (currentItems.Count == 1)
{
    // Remove the old Current item.
    currentItems[0].Delete();
}

SPListItem currentItem = designGallery.AddItem();

currentItem["Name"] = SPResource.GetString(CultureInfo.CurrentUICulture, Strings.DesignGalleryCurrentItemName);
currentItem["Title"] = SPResource.GetString(CultureInfo.CurrentUICulture, Strings.DesignGalleryCurrentItemName);

// Change this line if you want to specify a different master page.
currentItem["MasterPageUrl"] = Web.MasterUrl;

// Replace with the path to your SPColor file.
currentItem["ThemeUrl"] = "path to .spcolor file";

// Delete the following line if you do not have a background image. Otherwise, replace with the path to
// the background image.
currentItem["ImageUrl"] = "path to background image";

// Replace with the path to your SPFont file. Or, you can delete this line if you want to use
// the default font scheme of the selected master page.
currentItem["FontSchemeUrl"] = "path to .spfont file";

currentItem["DisplayOrder"] = 0;
currentItem.Update();

通过