SharePoint 2016：创建自定义布局并上传到页面布局库（第 1 部分）

引言

本文将向您展示如何在不使用的情况下创建简单的 SharePoint 2016 页面布局

• SharePoint 设计器
• 设计管理器

在进行任何操作之前，您需要创建布局的基础。

以下占位符是任何模板中都最基本和常用的。

• PlaceHolderAdditionalPageHead
• PlaceHolderPageTitle
• PlaceHolderMain

占位符

PlaceHolderAdditionalPageHead

此占位符用于定义额外的 CSS 和其他脚本以及内联 CSS（如果有）。

我们将使用它来注册一个 CSS，并为 SharePoint 编辑模式注册一个不同的 CSS

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<!—Your code goes here-->
</asp:Content>

PlaceHolderPageTitle

此占位符主要用于页面标题。

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
<!—Your code goes here-->
</asp:Content>

PlaceHolderMain

这是模板的主要部分。在这里，您可以定义 Web 部件区域或任何其他 HTML 代码片段，例如 Bootstrap 或静态 HTML，根据您的需要进行定义。

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<!—Your code goes here-->
</asp:Content>

基本模板

添加标准的 SharePoint 控制，您可以将基本模板创建如下

<%@ Page Language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,
Microsoft.SharePoint.Publishing,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" 
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" 
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" 
Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<!-- Styles for edit mode only-->
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
<!-- Styles for edit mode only-->
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<!-- Styles for edit mode only-->
</asp:Content>

扩展您的模板

PlaceHolderAdditionalPageHead

首先，将常规 CSS 注册添加到此部分

<SharePointWebControls:CssRegistration name="<% 
$SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" 
runat="server"/>

然后，我将定义一个用于编辑模式的 CSS，当您不在编辑模式时隐藏某些标签时，这将非常有用。

<PublishingWebControls:EditModePanel runat="server">
<!-- Styles for edit mode only-->
<SharePointWebControls:CssRegistration name="
<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %>"
After="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css 
%>" runat="server"/>
</PublishingWebControls:EditModePanel>

然后，您需要根据需要添加其他脚本或 CSS 格式化。

<style type="text/css">
<!-- Styles -->
</style>
<script type="text/javascript">
// your code
 
</script>

最后，您的 AdditionalPageHead 将如下所示。

AdditionalPageHead

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<SharePointWebControls:CssRegistration name="<% 
$SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" 
runat="server"/>
<PublishingWebControls:EditModePanel runat="server">
<!-- Styles for edit mode only-->
<SharePointWebControls:CssRegistration name="<% 
$SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %>"
After="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" 
runat="server"/>
</PublishingWebControls:EditModePanel>
<style type="text/css">
<!-- Styles -->
</style>
<script type="text/javascript">
// your code
 
</script>
</asp:Content>

PlaceHolderPageTitle

在此处添加 SharePoint 页面标题

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
<SharePointWebControls:FieldValue FieldName="Title" runat="server"/>   
</asp:Content>

PlaceHolderMain

这里有一个 Web 部件区域以简化操作

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<WebPartPages:WebPartZone runat="server" Title="Top Left" 
ID="TopLeftZone"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</asp:Content>

最终模板

<%@ Page Language="C#" 
Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,
Microsoft.SharePoint.Publishing,Version=15.0.0.0,
Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePointWebControls" 
Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, 
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" 
Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, 
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="PublishingWebControls" 
Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, 
Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<SharePointWebControls:CssRegistration name="<% 
$SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" 
runat="server"/>
<PublishingWebControls:EditModePanel runat="server">
<!-- Styles for edit mode only-->
<SharePointWebControls:CssRegistration name="<% 
$SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %>"
After="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" 
runat="server"/>
</PublishingWebControls:EditModePanel>
<style type="text/css">
<!-- Styles -->
</style>
<script type="text/javascript">
// your code
 
</script>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
<SharePointWebControls:FieldValue FieldName="Title" runat="server"/>   
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<WebPartPages:WebPartZone runat="server" Title="Top Left" 
ID="TopLeftZone"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</asp:Content>