为 SharePoint 2016 创建自定义布局并上传到页面布局库 – 第一部分

本文档展示了如何在不使用的情况下创建简单的 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 将如下所示

<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>