在 SharePoint 中将 .html 文件转换为母版页

  • 项目

重要

此可扩展性选项仅适用于经典 SharePoint 体验。 不能将此选项用于 SharePoint Online 中的新式体验（如通信网站）。 我们不建议再使用经典体验或这些品牌技巧。

借助设计管理器，您可以将 .html 文件转换为 SharePoint 母版页（一个 .master 文件）。 转换后，.html文件和母版页相关联，以便在编辑和保存.html文件时，更改将同步到关联的母版页。

转换母版页简介

借助设计管理器，您可以将 .html 文件转换为 SharePoint 母版页（一个 .master 文件）。 转换后，.html文件和母版页相关联，以便在编辑和保存.html文件时，更改将同步到关联的母版页。

为什么要转换.html文件，而不是从头开始创建 .master 文件？ 在 SharePoint 中，母版页就像在 ASP.NET 中一样工作，但 SharePoint 还要求特定于 SharePoint 的某些元素（如控件和内容占位符）必须存在于该页面上，SharePoint 才能正确呈现该母版页。 通过使用设计管理器将.html文件转换为完全正常运行的 SharePoint 母版页，无需了解 ASP.NET 或特定于 SharePoint 的标记;相反，你可以专注于使用 HTML、CSS 和 JavaScript 设计网站。

在将 .html 文件转换为母版页时：

  • 已在母版页样式库中创建与 .html 文件同名的 .master 文件。

  • SharePoint 需要的所有标记均已添加到 .master 文件中，以便母版页能够正常呈现。

  • 标记（如注释、<div> 标记、代码片段和内容占位符）均已添加到原始 .html 文件中。

  • .html 文件和母版页相关联，因此在保存 .html 文件后，对 .html 文件做出的任何后续编辑都会同步到 .master 文件中。

注意

仅支持单向同步。 对.html母版页的更改将同步到关联的 .master 文件，但如果选择直接编辑 .master 文件，所做的更改不会同步到 .html 文件。 (的每个 HTML 母版页和每个.html页面布局) 都有一个名为 “关联文件” 的属性，该属性默认设置为 True ，这将创建关联并在文件之间同步。

如果有一对关联的文件（HTML 和 .master），在不中断关联的情况下编辑 .master 文件，虽然可以保存对 .master 文件做出的更改，但不能签入或发布该 .master 文件，因此无法有意义地保存这些更改。 对 .html 文件所做的任何更改将覆盖 .master 文件。 如果签入或发布.html文件，.html文件更改将覆盖对 .master 文件所做的任何更改。 对 .master 文件做出的更改则会丢失。

如果您是习惯使用 ASP.NET 的开发人员，则可以选择中断这两个文件之间的关联，仅使用 .master 文件。 若要断开.html文件和 .master 文件之间的关联，请在设计管理器中，选择“编辑.html文件 的属性” ，然后清除“ 关联文件 ”复选框。 稍后可以通过编辑属性并选中此复选框来重新关联文件，在这种情况下，.html 文件将再次覆盖 .master 文件，对 .master 文件所做的更改将丢失。

准备要转换的 .html 文件

在转换 .html 文件之前，要考虑一些最佳实践和指导原则：

  • 考虑 SharePoint 页面模型。 有关详细信息，请参阅 SharePoint 页面模型概述。 设计网站的.html模型时，你可能会为不同类型的页面创建多个.html文件，例如文章页面或包含显示目录中项目类别的 Web 部件的类别页面。 但是，只有一个.html文件将转换为母版页。 .html文件可以转换为母版页，但.html文件不能直接转换为页面布局，因为页面布局需要页面字段。

  • 请确保 .html 文件符合 XML 标准。 .html 文件必须符合 XML 标准，才能正常转换。 遗憾的是，此要求会覆盖一些 HTML 5 标准。例如，在 HTML 5 中，可以将 doctype 指定为小写，但在 XML 中，doctype 必须为大写。 此外，还应从 .html 文件中删除所有 <form> 标记。 请考虑通过外部 XML 验证器运行 .html 文件，以便在转换前发现 XML 错误。

  • 对于 CSS 引用，请注意下面的重要指导原则：

    • 请勿将 <style> 块放置在 <head> 标记中。 在转换期间，这些样式会被删除。 请改为将 .html 文件关联到外部 CSS 文件。

    • 如果使用 Web 字体，<请添加到 CSS 链接>标记。ms-design-css-conversion="no"

    • 请谨慎将样式应用于常规 HTML 标记，如 <body>、<div> 和 <img>。 SharePoint 设计中的所有内容（包括功能区）均位于 <body> 标记中。 对于通常应用于 <body> 标记的样式，请考虑将它们应用于 <div id="s4-bodyContainer">，这是 SharePoint 用于页面主体的标记。 此外，SharePoint 使用的许多图像都受应用于 <img> 标记的任何样式影响。

    • 许多设计器将类应用于 <ul> 和 <li> 元素，从而设计导航样式。 不过，SharePoint 使用动态导航控件，可以通过代码段库将它添加到母版页。 SharePoint 导航控件应用了需要重写的默认样式。

  • 请注意下面的文件命名潜在问题：

    • 如果您有 Index.html 和 Index.htm，则这些文件将具有同一 .master 文件。

    • 如果您有 Design/Index.html 和 Design/SubDesign/Index.html，则这两个文件均可用于转换为其自己单独的 .master 文件，但它们在设计管理器的母版页列表中都显示为 Index.html。 若要消除其岐义，请单击或选择各个文件的省略号按钮，查看完整路径。

  • 若要添加 JavaScript 小组件，请确保 <script> 开始标记位于各行中。

  
<script>
(function( …

请勿将它们置于同一行中，如下所示。

  
<Script> (function( …
  • 应在 </head> 标记前面添加对 JQuery 库的引用（外部引用）。

将 .html 文件转换为母版页

在转换.html文件之前，首先必须上传所有设计文件，包括.html文件。 有关详细信息，请参阅 如何：将网络驱动器映射到 SharePoint 母版页库。

将 .html 文件转换为 .master 文件

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

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

  3. 在设计管理器的左侧导航窗格中选择"编辑母版页"。

  4. 选择“将 .html 文件转换为 SharePoint 母版页”。

  5. 在“选择资产”对话框中，浏览并选择要转换的 .html 文件。

    注意

    在上载设计文件时，应将与单个设计相关的所有文件保存在母版页样式库中的其自己的文件夹中。 在将设计文件夹复制到映射网络驱动器中时，母版页样式库会保持您创建的文件夹结构。

  6. 选择“插入”。

    此时，SharePoint 会使用相同的名称将 .html 文件转换为 .master 文件。

    在设计管理器中，现在将显示带有“状态”列的 .html 文件，该列显示两个可能的状态之一：

  • 警告和错误

  • 转换成功

  1. 使用“状态”列中的链接预览文件，并查看有关母版页的任何错误或警告。

    预览页面是母版页的实时服务器端预览。 预览顶部显示可能需要通过在 HTML 编辑器中编辑.html文件来解决的任何警告或错误。 必须先修复错误，然后预览才能正确显示母版页。

    有关解决错误和警告的详细信息，请参阅 如何：在 SharePoint 中预览页面时解决错误和警告。

    有关使用不同页面预览母版页的详细信息，请参阅 如何：在 SharePoint 设计管理器中更改预览页。

    预览页面的右上角还包含一个“代码段”链接。 此链接用于打开代码段库，您可在其中开始使用动态 SharePoint 控件开始替换您的设计中的静态或模型控件。 有关详细信息，请参阅 SharePoint 设计管理器代码片段。

  2. 若要修复任何错误，请使用 HTML 编辑器打开并编辑映射驱动器中的 .html 文件，从而编辑直接驻留在服务器上的 .html 文件。 每次保存.html文件时，任何更改都会同步到关联的 .master 文件。

  3. 成功预览母版页后，便会发现 <div> 标记已添加到 .html 文件中。 可能需要滚动到页面底部，才能看到 <div> 标记。

    此 <div> 为主内容块。 它驻留在名为 ContentPlaceHolderMain 的内容占位符内部。 在运行时，当访问者浏览网站并请求获取页面时，此内容占位符内填充的是页面布局中来自匹配内容区域的内容。 此 <div> 的位置应与页面布局在母版页上的相应位置相同。

    如果.html文件在页面正文中包含静态内容或模拟内容，则现在开始从 HTML 母版页中删除该静态内容，并将这些样式应用于 SharePoint 页面模型的其他元素，例如页面布局、页面字段控件、代码片段和显示模板。 有关示例，请参阅 如何：在 SharePoint 中创建页面布局。

了解转换后的 .html 文件

将.html文件转换为母版页时，会将许多行标记添加到.html文件中。 您可以放心地忽略大部分此标记，当您在浏览器中查看源时，大多数标记不会显示在网站的最终标记中，但此标记对于将 .html 文件转换为 SharePoint 实际使用的 .master 文件至关重要。 每次保存对 .html 文件的更改时，此 SharePoint 标记都可以在后台对关联的 .master 文件进行相同的更改。

标记被添加到 <head> 标记、代码片段和内容占位符前面和内部。 大多数标记包含在注释标记内：每次保存对 .html文件所做的更改时，转换过程都会删除这些注释，以便使用其中的 ASP.NET 标记。

标记类型

添加到 .html 文件中的标记的类型细分如下：

  • 文档属性：<mso> 标记包含 SharePoint 元数据，其中包括文件本身和成功转换为 .master 文件所需的一些属性的信息。
  
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://[server_name]/sites/PubSite/_catalogs/masterpage/[site_name]/index.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A0084F0F9C7FCB65541A59990D173DA60FA</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
  • SharePoint 命名空间注册：<SPM> 标记（“SharePoint 标记”）提供用于注册 SharePoint 命名空间的代码行。
  
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
  • 注释：在转换过程中，将忽略 <CS> 和 <CE>（“注释开始”和“注释结束”）标记。 这些标记有助于分析标记行。
  
<!--CS: Start Page Head Contents Snippet-->
…
<!--CE: End Page Head Contents Snippet-->

  <!--CS: Start Ribbon Snippet-->
…
<!--CE: End Ribbon Snippet-->

<!--CS: Start PlaceHolderMain Snippet-->
…
<!--CE: End PlaceHolderMain Snippet-->
  • 代码片段：<MS> 和 <ME>（“标记开始”和“标记结束”）标记表示 SharePoint 控件或代码片段的开头和结尾。 代码片段是将 SharePoint 功能添加到页面的 SharePoint 控件。 可以使用代码段库，自行添加代码片段。 有关详细信息，请参阅 SharePoint 设计管理器代码片段。
  
<!--MS:<SharePoint:RobotsMetaTag runat="server">-->
        <!--ME:</SharePoint:RobotsMetaTag>-->
        <!--MS:<SharePoint:PageTitle runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
                <!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
                <!--ME:</SharePoint:ProjectProperty>-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:PageTitle>-->
        <!--MS:<SharePoint:StartScript runat="server">-->
        <!--ME:</SharePoint:StartScript>-->
        <!--MS:<SharePoint:CssLink runat="server" Version="15">-->
        <!--ME:</SharePoint:CssLink>-->
        <!--MS:<SharePoint:CacheManifestLink runat="server">-->
        <!--ME:</SharePoint:CacheManifestLink>-->
        <!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
        <!--ME:</SharePoint:PageRenderMode>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:CustomJSUrl runat="server">-->
        <!--ME:</SharePoint:CustomJSUrl>-->
        <!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
        <!--ME:</SharePoint:SoapDiscoveryLink>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
            <!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
            <!--ME:</SharePoint:DelegateControl>-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
        <!--ME:</SharePoint:CssRegistration>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
            <!--MS:<WebPartPages:SPWebPartManager runat="server">-->
            <!--ME:</WebPartPages:SPWebPartManager>-->
        <!--ME:</SharePoint:AjaxDelta>-->
  • 预览块：<PS> 和 <PE>（“预览开始”和“预览结束”）标记位于不得编辑的 HTML 代码部分前后，因为此部分仅影响设计时预览。 这些预览部分是代码片段插入 SharePoint 控件时的快照。 借助预览，可以在客户端 HTML 编辑器中更有意义地处理 .html 文件。 不过，在预览内更改内容或样式对 SharePoint 最终使用的 .master 文件没有持久作用。 若要设置代码片段的样式，必须使用自己的自定义 CSS 发现并重写 SharePoint 样式。
  
<!--PS: Start of READ-ONLY PREVIEW (do not modify) -->
<div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div>
<!--PE: End of READ-ONLY PREVIEW -->
  • SharePoint ID 在转换期间添加到.html文件的两个代码片段 (页头内容片段和 SharePoint 功能区) 分别具有关联的 SharePoint ID 或 SID (00 和 02，) 。 利用这些 ID，可以缩短这些代码段，使页面中的 HTML 更便于阅读。
  
<!--SID:00 -->

<!--SID:02 {Ribbon}-->

添加的代码段

请务必了解添加到 .html 文件中的两个代码片段。 这些代码段是在转换过程中自动添加的，您不能在代码段库中添加它们。

  • 功能区 为使内容作者能够在 SharePoint 网站上创建页面和创作内容，您的母版页需要功能区和"套件导航"（SharePoint 的新增功能）。 功能区已包含在安全修整代码段中，因此当访问者浏览您的网站时，功能区仅对通过身份验证的用户显示，而不对匿名用户显示。 您可以将功能区移到页面上的其他位置或通过改写默认 CSS 类来设计其样式，但我们建议不要移动或重新排序功能区内包含的组件（例如"网站操作"菜单）。
  
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->

  • ContentPlaceHolderMain：在 <div id="s4-bodyContainer"> 标记底部的结束 </body> 标记前，转换过程插入名为 PlaceHolderMain 的内容占位符。 此代码片段内包含黑框黄色的 <div>，这个标记显示在 HTML 编辑器的设计视图中，或显示在设计管理器的服务器端预览中。

    此 <div> 表示用于放入页面布局和页面指定的内容的区域。 应将 PlaceHolderMain 代码片段移到母版页中将由页面布局填充的位置，即在网站的所有页面中都不相同的网站设计区域。

  
<!--CS: Start PlaceHolderMain Snippet-->
                    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                    <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
                            <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
            This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
        
                            </div>
                        <!--ME:</asp:ContentPlaceHolder>-->
                    <!--ME:</SharePoint:AjaxDelta>-->
                    <!--CE: End PlaceHolderMain Snippet-->

参考：添加到 .html 文件的 SharePoint 标记的示例

下面的示例展示了在 .html 文件转换为母版页后添加到此文件的标记。

添加到 <head> 标记的标记


<head>
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <!--CS: Start Page Head Contents Snippet-->
        <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SID:00 -->
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0" />
        <!--MS:<SharePoint:RobotsMetaTag runat="server">-->
        <!--ME:</SharePoint:RobotsMetaTag>-->
        <!--MS:<SharePoint:PageTitle runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
                <!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
                <!--ME:</SharePoint:ProjectProperty>-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:PageTitle>-->
        <!--MS:<SharePoint:StartScript runat="server">-->
        <!--ME:</SharePoint:StartScript>-->
        <!--MS:<SharePoint:CssLink runat="server" Version="15">-->
        <!--ME:</SharePoint:CssLink>-->
        <!--MS:<SharePoint:CacheManifestLink runat="server">-->
        <!--ME:</SharePoint:CacheManifestLink>-->
        <!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
        <!--ME:</SharePoint:PageRenderMode>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:CustomJSUrl runat="server">-->
        <!--ME:</SharePoint:CustomJSUrl>-->
        <!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
        <!--ME:</SharePoint:SoapDiscoveryLink>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
            <!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
            <!--ME:</SharePoint:DelegateControl>-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
        <!--ME:</SharePoint:CssRegistration>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
            <!--MS:<WebPartPages:SPWebPartManager runat="server">-->
            <!--ME:</WebPartPages:SPWebPartManager>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--CE: End Page Head Contents Snippet-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--DC:Business Solutions-->
        <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
        <!--[if lte IE 7]>
  <link rel="stylesheet" href="css/ie.css" type="text/css" charset="utf-8"/> 
 <![endif]-->
        <!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://[server_name]/sites/PubSite/_catalogs/masterpage/[site_name]/index.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A0084F0F9C7FCB65541A59990D173DA60FA</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
    </head>

添加到开始标记 <body> 后面的标记

功能区代码片段


<!--CS: Start Ribbon Snippet-->
        <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>-->
        <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true" EmitDiv="true">-->
            <div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
                    <!--MS:<SharePoint:EncodedLiteral runat="server" text="&amp;lt;%$Resources:wss,master_turnonaccessibility%&amp;gt;" EncodeMethod="HtmlEncode">-->
                    <!--ME:</SharePoint:EncodedLiteral>-->
                </a>
            </div>
            <div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
                    <!--MS:<SharePoint:EncodedLiteral runat="server" text="&amp;lt;%$Resources:wss,master_turnoffaccessibility%&amp;gt;" EncodeMethod="HtmlEncode">-->
                    <!--ME:</SharePoint:EncodedLiteral>-->
                </a>
            </div>
        <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
        <div id="ms-designer-ribbon">
            <!--SID:02 {Ribbon}-->
            <!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
        </div>
        <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
            <!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
            <!--ME:</wssucw:Welcome>-->
        <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
        <!--CE: End Ribbon Snippet-->

两个 SharePoint <div> 标记


<div id="s4-workspace">
            <div id="s4-bodyContainer">

添加到结束标记 </body> 和两个结尾标记 </div> 前面的标记


<div data-name="ContentPlaceHolderMain">
                    <!--CS: Start PlaceHolderMain Snippet-->
                    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                    <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
                            <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
            This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
        
                            </div>
                        <!--ME:</asp:ContentPlaceHolder>-->
                    <!--ME:</SharePoint:AjaxDelta>-->
                    <!--CE: End PlaceHolderMain Snippet-->
                </div>

另请参阅