在 SharePoint 中添加 Web 部件区域代码段

Web 部件区域是一个代码段，你可将其添加到页面布局中以便内容作者可以添加、编辑或删除该区域中的 Web 部件。

Web 部件区域代码段简介

Web 部件是提供特定 SharePoint 功能的服务器控件，Web 部件区域是确定该区域中包含的 Web 部件的布局、行为和其他属性的容器。 例如，Web 部件区域可以指定区域中的 Web 部件：

• 是按水平布局还是垂直布局排列。
• 是否显示常见用户界面 (UI) 元素，例如标题栏或边框。
• 是否可由内容作者在浏览器中编辑页面时进行自定义。
• 是否可由创建 Web 部件个人视图的网站访问者在浏览器中查看页面时进行个性化设置。

在发布网站中，拥有必需权限的内容作者可创建或编辑驻留在页面库中的页面。 作为设计器，你可以向页面布局添加 Web 部件区域。 当内容作者基于该页面布局创建或编辑页面时，作者可以在该区域中添加、编辑或删除 Web 部件。 例如，你可能希望向页面布局添加 Web 部件区域，以便内容作者可以：

• 使用内容搜索 Web 部件显示搜索查询的结果。 当搜索驱动的 Web 部件驻留在 Web 部件区域中时，作者可以更新或修改搜索查询。
• 使用媒体 Web 部件在网页中嵌入视频或音频剪辑。
• 使用摘要链接 Web 部件创建易于编辑、分组或重新排序的超链接列表。
• 使用目录 Web 部件创建列出网站中的所有页面并在添加、删除、重命名或移动页面时自动更新的站点地图。

何时使用 Web 部件区域

当页面布局包含一个或多个 Web 部件区域时，Web 部件区域可在使用该布局的所有页面上使用，这使作者能够在这些页面上插入 Web 部件。 如果允许作者在页面上插入 Web 部件，则会降低对网站用户体验的控制。 例如，作者可以将目录 Web 部件插入到公开您不希望访问者从当前页导航到的网站部分的页面上。

如果希望完全控制 Web 部件在网站上的显示方式，并且希望该 Web 部件出现在特定类型的所有页面上，请将 Web 部件直接添加到页面布局。 如果希望 Web 部件显示在网站中的所有页面上，还可以将 Web 部件直接添加到母版页。

还可以向页面布局添加 Web 部件区域，但限制其使用。 例如，可以将 Web 部件添加到区域，然后设置该区域的属性，以便内容作者可以编辑现有 Web 部件的属性，但不能在区域中添加或删除 Web 部件。 Web 部件区域具有一组用于双重用途的属性。 可以使用一个属性子集来组织页面上 Web 部件的布局和格式。 可以使用另一个属性子集来提供额外的保护，防止 (或“锁定”) 区域中的 Web 部件。

若要对 Web 部件在你网站上的呈现方式进行不同级别的控制，可以：

• 将 Web 部件直接添加到母版页或页面布局。 这意味着内容作者无法修改 Web 部件。
• 将 Web 部件添加到页面布局上的区域，但限制只有你添加的默认 Web 部件才能显示在这些区域中。
• 将 Web 部件区域添加到页面布局中，并使内容作者能够完全控制哪些 Web 部件显示在这些区域中以及这些 Web 部件的配置方式。

Web 部件区域的属性可以指定是否允许内容作者：

• 通过添加、删除、移动 Web 部件或调整其大小来更改 Web 部件的布局。
• 更改所有用户的 Web 部件设置（Web 部件的共享视图）。
• 更改个人 Web 部件设置（Web 部件的个人视图）。

表 1 显示了在要限制 Web 部件区域时应考虑的重要属性。

表 1. 用于限制内容作者的 Web 部件区域属性

插入 Web 部件区域代码段

和所有代码段一样，您从代码段库添加此代码段。 要导航到代码段库，您必须先选择要编辑的页面布局。 Web 部件区域可以添加到页面布局，但不能添加到母版页。

插入 Web 部件区域代码段

1. 浏览到您的发布网站。

2. 在页面右上角中，选择"设置"齿轮，然后选择"设计管理器"。

3. 在设计管理器的左导航窗格中，选择"编辑页面布局"。

4. 选择要向其添加代码段的页面布局的名称。

5. 若要打开代码段库，请选择服务器端预览右上角的"代码段"。

6. 在功能区的“设计”选项卡上，选择“Web 部件区域”。

7. 在代码段库右侧的"关于此组件"下，单击或选择节标题可展开或折叠属性组，然后配置需要的所有自定义设置。

   名为"重要"的节包含对此特定代码段的工作方式至关重要的属性。 对于 Web 部件区域，代码片段具有唯一 ID。 在将此代码段复制到您的页面布局后，您不应重用此 ID。 如果要添加另一个 Web 部件区域代码段，请选择 “刷新” ，为下一个代码段生成新 ID。

   若要了解限制 Web 部件区域的必需属性（LockLayout、AllowCustomization 和 AllowPersonalization），请参阅表 1。

   注意

   您可能注意到某些属性名称在代码段库的属性网格中是粗体。 这些属性的值已从此组件的默认设置更改为其他设置，但这些属性不一定与设计人员方案相关。 换言之，虽然某个属性可能为粗体，但它未必对您的方案很重要。

8. 配置任何属性后，选择"更新"。 这将更新页面左侧的 HTML 代码段，以使标记反映出您的自定义设置。 您可以随时选择“重置”将所有属性恢复为其默认设置。

9. 在代码段库左侧的"HTML 代码段"下，选择"复制到剪贴板"。

10. 在您的 HTML 编辑器中，打开您计算机上的映射网络驱动器，然后打开您要向其添加代码段的母版页或页面布局对应的 HTML 文件。

    有关详细信息，请参阅 如何：将网络驱动器映射到 SharePoint 母版页库。

11. 在 HTML 文件中，将代码段粘贴到希望显示标记的位置。

    在将代码段添加到页面布局时，务必将代码段粘贴到 PlaceHolderMain 内。

12. 将 class="DefaultContentBlock" 的 <div> 替换为您自己的特定内容。

13. 如果你要用 Web 部件预填充此区域（例如，如果此区域将限制内容作者只能修改现有 Web 部件而不能添加新 Web 部件），请在 标记出现的位置插入 Web 部件代码段。

14. 保存页面，然后刷新设计管理器中的服务器端预览以确保页面按预期显示。

理解代码段标记

Web 部件区域代码段的两个最重要部分是 ID 属性和 注释。 每个区域都应有唯一 ID。 若要将多个 Web 部件区域添加到页面布局，请务必先在代码段库中选择“刷新”，再复制每个代码段，这样可以生成新 ID。 应将 注释替换为要在区域中默认显示的任何 Web 部件。

下面的代码中显示了可用于限制内容作者使用区域的方式的其他属性（ AllowCustomization、 AllowPersonalization 和 LockLayout）。

<div data-name="WebPartZone">
    <!--CS: Start web part zone Snippet-->
    <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <div xmlns:ie="ie">
        <!--MS:<WebPartPages:WebPartZone runat="server" ID="x0e5f5212505f48a9aac43df13eeae4f9" AllowCustomization="True" AllowPersonalization="False" FrameType="TitleBarOnly" LockLayout="True" Orientation="Vertical">-->
            <!--MS:<ZoneTemplate>-->
               <!--DC: Replace this comment with default web parts for new pages. -->
            <!--ME:</ZoneTemplate>-->
        <!--ME:</WebPartPages:WebPartZone>-->
    </div>
    <!--CE: End web part zone Snippet-->
</div>

另请参阅

• SharePoint 设计管理器代码段
• WebPartZone 类
• WebPartZoneBase 属性
• 为 SharePoint 构建网站
• 在 SharePoint 中开发网站设计