SharePoint Online 门户品牌打造指南

  • 项目

能够在门户上应用自定义品牌是一项至关重要的功能，本文将概述品牌打造方法和品牌打造最佳做法。

注意

尽管本指南主要针对的是 SharePoint Online，但大多数内容也同样适用于本地 SharePoint 环境中托管的门户。

不应执行的操作

以下列表包含对门户应用品牌打造时不应执行的关键事项。

禁止事项：

  • 替代 Office 365 套件栏的品牌打造。
  • 为个人网站自定义品牌打造。
  • 默认情况下，使用自定义母版页实现自定义品牌打造。

品牌打造要求和一般原则

组织通常希望他们的门户独一无二。 自定义品牌打造有助于提升企业品牌和价值，这就是自定义品牌打造解决方案对于（企业）门户网站至关重要的原因。

构建自定义 SharePoint Online 门户时的典型品牌打造要求

  • 自定义外观：

    • 实现自定义配色方案。
    • 显示自定义徽标。
    • 自定义登录页的外观。
    • 更改导航控件的外观。

  • 调整布局：

    • 更改页面上信息的整体布局。
    • 使门户“快速响应”。
    • 显示自定义页脚。

  • 添加更多功能：

    • 自定义门户导航行为。
    • 在页面上添加自定义控件（Web 部件）。

在以下部分中，我们将讨论如何满足这些要求。

一般原则

在 SharePoint Online 环境中对门户进行品牌打造时，应考虑以下一般原则：

  • SharePoint Online 服务一直在不断改进。 预配给此服务的更新可能会影响现成页面的文档对象模型 (DOM) 结构以及现成文件（如母版页）的内容。 开发人员必须牢记这一点，不应该依赖于不受支持的自定义方法（如页面的 DOM 结构中特定元素的位置）。

  • 避免自定义母版页。 更新此服务可能会影响现成母版页的结构。 如果你已通过复制任何现成母版页的内容来实现自定义母版页，则必须进一步监视此现成母版页是否未更新，并在自定义母版页中重新实现这些更改。 否则，在使用自定义母版页时，SharePoint 的某些功能可能会无法正常工作。 这就是自定义母版页会导致其他风险并提高维护成本的原因，我们建议你避免使用自定义母版页（如果适用）。

  • 不支持自定义个人网站（OneDrive for Business 网站）的品牌打造。 可以通过 Office 365 租户级品牌打造设置应用自定义配色方案）。 请注意，这适用于 OneDrive for Business 默认新式体验。

  • 必须将 SharePoint Online 门户视为整体 Office 365 生态系统的一部分。 这就是每个门户现在都有 Office 365 套件栏，并且不支持对其进行自定义的原因（参阅 Office 365 套件栏部分）。

  • 在规划导航组件的品牌打造和结构时，必须遵循 SharePoint Online 门户导航解决方案中概述的建议。

  • 通过自定义控件（Web 部件）扩展门户功能时，请遵循 SharePoint Online 门户性能指南中的建议。

  • 用于“经典”与“新式”网站和页面的品牌打造方法有显著差异。 有关“新式”网站和页面的信息，请参阅自定义“新式”团队网站和自定义“新式”网站页面。

自定义外观

有多种自定义 SharePoint 门户外观的现成方法：

  • 管理员可以为整个租户自定义 Office 365 主题。
  • 可以将自定义主题应用于特定网站。

这些技术可用于“获取”所需颜色，并可以跨不同门户网站灵活进行配色。 如果需要更灵活地进行配色，建议客户从现成母版页 (seattle.master) 入手，并应用自定义主题和/或使用网站自定义 CSS 设置 (Web.AlternateCSSUrl)，连接所需的 CSS 文件。 可以通过使用 Web.SiteLogoUrl 属性设置自定义徽标图像。

下面的文章和 PnP 示例展示了这些技术：

开发 SharePoint 的自定义 CSS 文件时请遵循以下建议：

  • 限制替代现成的 CSS 类。
  • 使用 Web.AlternateCssUrl 属性来包括自定义 CSS 文件。
  • 不要替代 Office 365 套件栏品牌打造，因为当用户离开门户时会导致体验中断。

Office 365 登录页

客户可以将公司品牌打造应用到 Office 365 登录页。 该过程在以下文章中介绍：向 Office 365 登录页面添加公司的品牌标识。

Office 365 套件栏

从 Microsoft 的角度来看，针对套件栏的指南如下：

  • 套件栏是租户级导航组件，允许用户轻松地在所有 Office 365 服务之间轻松移动。
  • 你的门户应用程序不会“拥有”套件栏，也不应该认为它应当拥有。
  • 按照处理浏览器工具栏的方式处理套件栏，因为它不是你的应用程序的一部分。
  • 只能在租户级别通过 Office 365 管理员页面修改/配置套件栏。
  • 不应该使用代码来更改（移动、隐藏）应用程序中的套件栏。
  • 不应该重用应用程序中的套件栏（例如应用启动程序图标）的各个方面。
  • 如果你决定要“取巧”，以后很可能会遇到意想不到的问题。

调整布局

讨论调整 SharePoint 门户的布局时，通常开发人员考虑的第一个选择就是创建自定义母版页。 虽然仍然支持自定义母版页，但由于上述提到的原因，不建议使用此方法，因为从长期来看，自定义母版页会导致额外的风险和维护成本。

开发人员应该考虑允许调整 SharePoint 门户布局的其他方法。 具体包括：

  • 实现自定义 CSS。
  • 使用自定义页面布局。
  • 通过注入客户端脚本来实现常见品牌打造元素（如“页脚”）（此方法将在下一节中讨论）。

将这些方法结合，你就可以在不开发自定义母版页的情况下实现所需的 SharePoint 门户布局。

GitHub 上的以下 PnP 示例和解决方案展示了如何实现此操作：

添加功能

在页面中嵌入客户端脚本可进一步自定义门户的外观和功能。 例如，此方法可用于自定义导航控件、向门户的所有页面添加自定义页眉和页脚，或实现其他自定义 UI 块。

以下方法可用于嵌入 JavaScript：

  • 在网站或网站集级别添加自定义操作。 这可以触发在网站或网站集的所有页面上执行一段 JavaScript。

  • 使用实际 JavaScript 代码在页面上添加内容编辑器或脚本编辑器 Web 部件，或添加指向 JavaScript 文件的链接。 这可以触发在特定页面上执行 JavaScript 代码操作。

  • 页面布局文件的内容中包含 JavaScript 代码或指向 JavaScript 文件的链接。 这可以在使用此页面布局文件的所有发布页面上触发执行 JavaScript 的操作。

注意

自定义操作方法仅适用于“经典”网站，包括当前发布门户。

以下 PnP 示例演示如何实现 JavaScript 嵌入：

注意

通过使用 JavaScript 扩展门户功能时，遵循 SharePoint Online 门户性能指南中概述的建议至关重要。

预配品牌打造资产

实施品牌打造解决方案的最后一步是预配品牌打造资产。 这通常包括图像、CSS 和 JavaScript 文件。

有多种方法可以部署这些文件：

  • 将文件发布到单个网站集中的库。 在这种情况下，每个网站集都可以使用自己的品牌资产版本。 使用标准 SharePoint 安全机制来控制对文件的访问权限。 但是，更新文件将需要将这些文件重新上载到每个网站集。

  • 将文件发布到其中一个网站集（中央位置）中的库。 在这种方案下，所有网站集都可以使用品牌资产的单个最新版本。 更新的文件只能上载到一个位置。 管理员必须确保所有网站集的用户都可以访问在中央位置发布的文件。

  • 将文件发布到 CDN（Web 应用程序、Azure CDN 或 Office 365 CDN）。 在这种情况下，所有网站集都可以使用品牌资产的单个最新版本。 更新的文件只能上载到一个位置。 使用 CDN 可以提高性能，但内容存储在 SharePoint 外部，这就是无法使用标准 SharePoint 安全机制保护资产的原因。但是 Office 365 专用 CDN 功能是一个例外，它可以保护 CDN 上的文件。

PnP 预配引擎可用于将品牌资产部署到 SharePoint 库。 使用 Office 365 CDN 功能时，这些文件将自动在 CDN 中进行设置。 使用备用 CDN 解决方案时，需要自定义预配方法来将文件发布到 CDN。

有关 CDN 的详细信息，请参阅：

另请参阅