65.9K
CodeProject 正在变化。 阅读更多。
Home

8 小时循序渐进学习 SharePoint – 第 3 部分

Shivprasad koirala
starIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

1.00/5 (1投票)

2016 年 5 月 22 日

CPOL

11分钟阅读

viewsIcon

34315

在本文中，我们将学习如何自定义 SharePoint 的母版页。

目录

分步学习 SharePoint（8小时）– 第3小时
引言
母版页（理论）
步骤1：启用 SharePoint 发布基础结构
步骤2：了解当前使用的母版页
理论：HTML 母版页概念
步骤3：创建我们自己的 HTML 自定义母版页
步骤4：将 HTML 页面转换为母版页
理论：母版页代码片段
步骤5：代码片段1：用于动态内容
步骤6：代码片段2和3：垂直和水平菜单
步骤7：将 Logo 应用到母版页
步骤8：完整的 HTML 母版页
步骤9：重新上传母版页
步骤10：发布并应用母版页
步骤11：享受您的最终成果
接下来是什么？

如需查阅《分步学习 SharePoint》的完整文章索引，请访问第一篇文章 点击此处。

引言

在本文中，我们将学习如何自定义 SharePoint 母版页。

如果您是 SharePoint 学习新手，我建议您从下面的1小时 YouTube 视频开始学习。

母版页（理论）

外观和感觉的一致性是网站最重要的方面之一。当您浏览专业网站时，从一个页面到另一个页面，您会发现结构的连贯性。例如，许多专业网站的菜单在左侧，Logo 在顶部，版权页脚在底部，动态内容显示在中间。

SharePoint 理解一致性的重要性，并使用一种称为“母版页”的概念来实现这一点。如果您看过我们当前的 SharePoint 网站，它已经有一个母版页，其中包含左侧菜单、顶部 Logo、中间的动态内容和顶部的链接。

但是，现在我们想按如下方式自定义母版页：

  • 将 Logo 移动到顶部，即置于顶部链接之上。
  • 将左侧菜单移到右侧。
  • 保持顶部菜单不变。
  • 动态内容将显示在中间。

步骤1：启用 SharePoint 发布基础结构

为了自定义 SharePoint 母版页，我们需要先启用“SharePoint 发布基础结构”功能。因此，点击设置，转到网站集管理，然后点击网站集功能，如下图所示。

单击网站集功能后，您将看到该列表中的功能列表，找到“SharePoint Server 发布基础结构”并激活它。通过启用此功能，我们现在可以自定义 SharePoint 母版页了。

步骤2：了解当前使用的母版页

但在我们继续之前，我们想知道我们的 SharePoint 网站当前正在使用哪个母版页。因此，返回网站设置，在“外观和感觉”部分，您应该会看到一个名为“设计管理器”的选项，如下图所示。

注意：如果您没有看到此菜单，则表示发布基础结构未正确启用。请再次执行步骤1。

要了解使用哪个母版页，请点击“发布并应用设计”，然后点击“根据设备通道分配母版页到您的网站”。

我还想谈谈设备通道。在当今的现代世界中，我们有各种各样的设备，如手机、桌面电脑、笔记本电脑等。这些设备中的每一种都有不同的屏幕尺寸，我们希望根据其屏幕尺寸以不同的方式显示网站。这就是设备通道发挥作用的地方。我们将在稍后进行一些深入的设备通道实验。现在，暂时放下对设备通道的顾虑。

您可以看到两个下拉列表“seattle”和“oslo”，它们是现成的母版页。默认情况下，“seattle”母版页是默认的母版页。这两个母版页非常相似，但在 CSS 和布局方面有一些差异。

但最大的区别是，“oslo”在设计时考虑了匿名访问，特别适合面向公众的网站，而“seattle”则需要身份验证。

此外，我们还来看看“seattle”母版页有什么样的代码。返回设计管理器主菜单，点击“编辑母版页” -> 点击“将 HTML 文件转换为 SharePoint 母版页”，如下图所示。

然后您会看到文件列表，按“HTML 母版页”过滤，如下图所示。

然后您会看到现成的母版页“oslo.html”和“seattle.html”，如下图所示。点击“Seattle.html”，下载并查看代码。

您可以看到其中有很多晦涩难懂的代码，修改这个母版页会非常复杂。那么，何不从头开始创建我们自己的母版页并将其应用到我们的网站呢？

理论：HTML 母版页概念

HTML 母版页只是一个简单的 HTML 文件，它概述了 SharePoint 网站的结构。因此，要创建自定义母版页，我们首先需要创建一个简单的 HTML 文件，该文件具有包含所有占位符的初始结构，然后将此 HTML 文件上传到 SharePoint。

然后，SharePoint 会将此 HTML 母版页转换为 SharePoint 母版页。在转换过程中，它会注入 SharePoint 代码片段，以便该母版页可以在 SharePoint 环境中运行。

步骤3：创建我们自己的 HTML 自定义母版页

因此，正如步骤1中所讨论的，我们将创建一个自定义母版页，如下所示：

  • 将 Logo 移动到顶部，即置于顶部链接之上。
  • 将左侧菜单移到右侧。
  • 保持顶部菜单不变。
  • 动态内容将显示在中间。

因此，根据上述需求，让我们创建一个简单的 HTML 页面（您可以使用 Visual Studio 来完成此操作），并为我们的部分创建必要的占位符。您可以在下面的 HTML 代码中看到，我们有一个表格，其中包含三行，在其中又有四个部分：

  • Logo 部分，我们将在此处放置我们的 Logo 图片。
  • 水平菜单部分，将在此处显示水平菜单的链接。
  • 页面部分，将显示用户正在浏览的当前页面。此部分是动态的，将随着用户导航而变化。其他部分将保持不变。
  • 垂直菜单部分，将放置我们的垂直菜单链接。

因此，下面的 HTML 页面定义了我们母版页的结构。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to Our Company Portal</title>
</head>
<body>
<table>
<tr><td><img src="" /></td></tr>
<tr><td>Horizontal Menu</td></tr>
<tr><td>Our Page Data</td><td>Vertical Menu</td></tr>
</table>
</body>
</html>

步骤4：将 HTML 页面转换为母版页

为了将 HTML 页面转换为 SharePoint 母版页，我们需要将上述 HTML 页面上传到 SharePoint。因此，转到设计管理器部分，点击编辑母版页，然后点击“将 HTML 文件转换为 SharePoint 母版页”链接。如果您不确定如何进入设计管理器部分，请再次阅读步骤1。

点击添加新项，然后上传 HTML 母版页。

上传页面时，请确保将其选择为“HTML 母版页”。

SharePoint 已经存在很长时间了，母版页的概念从一开始就存在。因此，如果您希望您的母版页与之前的 SharePoint 版本兼容，您可以相应地选择版本复选框。

4：检查母版页与 SharePoint 2010 及更早版本的兼容性。

15：检查母版页与 SharePoint 2013 的兼容性。

16：检查母版页与 SharePoint 2016 的兼容性。

目前我们将选择所有版本，因为我们的母版页非常简单。

添加母版页后，点击插入。

页面插入后，它将显示为草稿版本，如下图所示。草稿版本意味着母版页已转换，但尚未生效，无法应用于 SharePoint 网站。

我们来浏览一下我们的母版页。因此，右键点击页面并选择打开。

当您查看母版页时，您可以看到我们母版页的所有占位符部分。这确保了我们的母版页正在工作，并且转换成功。

黄色部分是当用户在页面之间导航时加载和卸载网站动态内容的区域。该黄色部分中的注释表明您的母版页结构应围绕此黄色部分进行设计。

如果您浏览所有页面，您可以看到“HTML”母版页以及 SharePoint 转换的“MasterPage”。

理论：母版页代码片段

在我们将 SharePoint 代码片段放入占位符部分之前，我们的 HTML 母版页是无效的。目前我们需要四样东西（3个代码片段和 Logo），如下所示：

  • 代码片段1：我们需要代码片段，以便在用户从一个页面导航到另一个页面时加载母版页的动态部分。
  • 代码片段2：我们需要垂直菜单的代码片段
  • 代码片段3：我们需要水平菜单的代码片段。
  • 我们还需要通过上传图片并将其链接到母版页来修复 Logo。

步骤5：代码片段1：用于动态内容

那么，让我们先获取动态内容部分的这个代码片段。动态部分的此代码片段可以在由 HTML 母版页创建的 SharePoint 母版页中找到。

要获取该母版页，请转到设置并点击母版页链接，如下图所示。

您可以看到我们母版页有两个文件：一个是“MyCustomMasterPage.html”，这是我们创建的 HTML 母版页；第二个是“MyCustomMasterPage.master”，这是 SharePoint 创建的。

动态代码片段在“.master”文件中。

因此，让我们右键点击并下载文件。

当您打开“.Master”文件时，您会看到一个名为“ContentPlaceHolderMain”的“div”标签，其中包含一些代码片段。此代码片段负责加载动态部分。

因此，复制上面的“div”标签，并将其移动到您的 HTML 母版页的动态占位符部分，如下面的代码片段所示。

<body>
<table>
<tr><td>This placeholder for image</td></tr>
<tr><td>This placeholder for Vertical menu</td></tr>
<tr><td><div data-name="ContentPlaceHolderMain">
<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">
<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
</div></td>
<td>This placeholder for Horizontal menu</td></tr>
</table>
</body>

步骤6：代码片段2和3：垂直和水平菜单

对于垂直和水平菜单的代码片段，我们需要预览您的母版页。如果您不确定如何预览母版页，请再次阅读“步骤4：将 HTML 页面转换为母版页”。

预览母版页后，点击“代码片段”链接，如下图所示。

点击代码片段链接后，您会看到一个工具栏和一个代码片段部分，用于获取代码片段。对于垂直代码片段，点击工具栏中的垂直图标，然后复制代码片段并将其放置在适当的占位符中。

对水平菜单重复此操作，并将代码片段放置在相应的占位符中。

步骤7：将 Logo 应用到母版页

现在，我们需要做的最后一件事是修复我们的 Logo。因此，找一张不错的图片，然后从母版页部分上传。转到母版页，点击添加图片，如下图所示。

为图片起一个好名字。

图片上传后，浏览到该图片并获取图片 URL。

但是，图片 URL 位于图片占位符中，如下图所示的代码片段。

<table>
<tr><td><img 
src="https://stepbystepschools.sharepoint.com/sites/MyITCompany/_catalogs/
masterpage/Preview%20Images/QuestPond.jpg" /></td></tr>

步骤8：完整的 HTML 母版页

HTML 母版页的最终代码如下所示。我已在代码中注释了开始和结束部分。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to Our Company Portal</title>
</head>
<body>
<table>
<tr><td>
<!—Image section  starts -- >
<imgsrc="https://stepbystepschools.sharepoint.com/sites/MyITCompany/_catalogs/
masterpage/Preview%20Images/QuestPond.jpg" />
<!—Image section  ends -- >
</td></tr>
<!—Top navigation section  starts -- >

<tr><td><div data-name="TopNavigationNoFlyoutWithStartNode">
<!--CS: Start Top Navigation Snippet--><!--SPM:<%@Register 
Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" 
Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxDelta 
ID="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-
core-navigation ms-dialogHidden" runat="server">--><!--PS: Start of READ-
ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--
MS:<SharePoint:DelegateControl runat="server"
ControlId="TopNavigationDataSource" Id="topNavigationDelegate">--><!--PS: 
Start of READ-ONLY PREVIEW (do not modify)--><span
style="display:none"><table cellpadding="4" cellspacing="0" 
style="font:messagebox;color:buttontext;background-color:buttonface;border: 
solid 1px;border-top-color:buttonhighlight;border-left-
color:buttonhighlight;border-bottom-color:buttonshadow;border-right-
color:buttonshadow"><tr><td nowrap="nowrap"><span style="font-
weight:bold">PortalSiteMapDataSource</span> -
topSiteMap</td></tr><tr><td></td></tr></table></span><!--PE: End of READ-
ONLY PREVIEW--><!--MS:<Template_Controls>--><!--MS:<asp:SiteMapDataSource
ShowStartingNode="True" SiteMapProvider="SPNavigationProvider"
ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">--><!--
ME:</asp:SiteMapDataSource>--><!--ME:</Template_Controls>--><!--
ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a><!--
MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">--><!--
MS:<SharePoint:AspMenu ID="TopNavigationMenu" runat="server"
EnableViewState="false" DataSourceID="topSiteMap"
AccessKey="&#60;%$Resources:wss,navigation_accesskey%&#62;"
UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal"
StaticDisplayLevels="2" AdjustForShowStartingNode="false"
MaximumDynamicDisplayLevels="0" SkipLinkText="">--><!--PS: Start of READ-
ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" 
href="/_layouts/15/1033/styles/menu-21.css" /><div 
id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox" 
onclick="return AjaxNavigate$OnClickHook(event, this);"><ul
id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li
class="static"><a class="static menu-item ms-core-listMenu-item ms-
displayInline ms-navedit-linkNode"
href="/sites/MyITCompany/SitePages/DevHome.aspx" accesskey="1"><span 
class="additional-background ms-navedit-flyoutArrow"><span class="menu-
item-text">MyITCompany</span></span></a><ul class="static"><li 
class="static"><a class="static menu-item ms-core-listMenu-item ms-
displayInline ms-navedit-linkNode" href="/sites/MyITCompany/HR"><span 
class="additional-background ms-navedit-flyoutArrow"><span class="menu-
item-text">HR</span></span></a></li><li class="static"><a class="static 
menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" 
href="/sites/MyITCompany/Accounts"><span class="additional-background ms-
navedit-flyoutArrow"><span class="menu-item-
text">Accounts</span></span></a></li></ul></li><li class="static ms-
verticalAlignTop ms-listMenu-editLink ms-navedit-editArea"><span class="ms-
navedit-editSpan" id="zz7_TopNavigationMenu_NavMenu_Edit"><a
id="zz7_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-
editLinksText" href="#" onclick="g_QuickLaunchMenu = null;
EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode',
'zz7_TopNavigationMenu', 1, 0, 0, '\u002fSITES\u002fMYITCOMPANY');
cancelDefault(event); return false;" title="Edit Links"><span class="ms-
displayInlineBlock"><span class="ms-navedit-editLinksIconWrapper ms-
verticalAlignMiddle"><img class="ms-navedit-editLinksIcon" 
src="/_layouts/15/images/spcommon.png?rev=43" alt="Edit Links" 
/></span><span class="ms-metadata ms-verticalAlignMiddle">Edit
Links</span></span></a><span id="zz7_TopNavigationMenu_NavMenu_Loading
class="ms-navedit-menuLoading ms-hide"><a 
id="zz7_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears();
return false;" title="This animation indicates the operation is in
progress. Click to remove this animated image."><img
id="zz7_TopNavigationMenu_NavMenu_GearsImage" 
src="/_layouts/15/images/loadingcirclests16.gif?rev=43" alt="This animation
indicates the operation is in progress. Click to remove this animated 
image." /></a></span><div id="zz7_TopNavigationMenu_NavMenu_ErrorMsg" 
class="ms-navedit-errorMsg"></div></span></li></ul></div><!--PE: End of 
READ-ONLY PREVIEW--><!--ME:</SharePoint:AspMenu>--><!--
ME:</asp:ContentPlaceHolder>--><!--PS: Start of READ-ONLY PREVIEW (do not 
modify)--><!--PE: End of READ-ONLY PREVIEW--><!--
ME:</SharePoint:AjaxDelta>--><!--CE: End Top Navigation Snippet-->
</div>
<!—Top navigation section  end -- >

</td></tr>

<!—Dynamic section  starts -- >


<tr><td><div data-name="ContentPlaceHolderMain">

<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" 
runat="server">
<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>
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>

</div>
<!—Dynamic section  ends -- >

</td>
<!—vertical section  starts -- >
<td><div data-name="QuickLaunch">

<!--CS: Start Vertical Navigation Snippet--><!--SPM:<%@Register 
Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls
Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c"%>--><!--SPM:<%@Register 
Tagprefix="PublishingNavigation" 
Namespace="Microsoft.SharePoint.Publishing.Navigation" 
Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, 
Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><div id="sideNavBox"
class="ms-dialogHidden ms-forceWrap ms-noList"><!--MS:<SharePoint:AjaxDelta
ID="DeltaPlaceHolderLeftNavBar" BlockElement="true" CssClass="ms-core-
navigation" runat="server">--><!--MS:<asp:ContentPlaceHolder 
ID="PlaceHolderLeftNavBar" runat="server">--><!--MS:<asp:ContentPlaceHolder
ID="PlaceHolderLeftNavBarTop" runat="server">--><!--
ME:</asp:ContentPlaceHolder>--><!--MS:<asp:ContentPlaceHolder
ID="PlaceHolderQuickLaunchTop" runat="server">--><!--
ME:</asp:ContentPlaceHolder>--><!--MS:<asp:ContentPlaceHolder 
ID="PlaceHolderLeftNavBarDataSource" runat="server">--><!--
ME:</asp:ContentPlaceHolder>--><!--MS:<asp:ContentPlaceHolder 
ID="PlaceHolderCalendarNavigator" runat="server">--><!--
ME:</asp:ContentPlaceHolder>--><!--MS:<asp:ContentPlaceHolder 
ID="PlaceHolderLeftActions" runat="server">--><!--
ME:</asp:ContentPlaceHolder>--><!--MS:<SharePoint:SPNavigationManager 
ID="QuickLaunchNavigationManager" runat="server" 
QuickLaunchControlId="v4QuickLaunchMenu" ContainedControl="QuickLaunch" 
EnableViewState="false">--><!--MS:<SharePoint:DelegateControl
runat="server" ControlId="QuickLaunchDataSource">--><!--
MS:<Template_Controls>--><!--
MS:<PublishingNavigation:PortalSiteMapDataSource runat="server" 
ID="SiteMapDS" SiteMapProvider="CurrentNavigation" EnableViewState="false" 
StartFromCurrentNode="true" ShowStartingNode="false" 
TrimNonCurrentTypes="Heading">--><!--
ME:</PublishingNavigation:PortalSiteMapDataSource>--><!--
ME:</Template_Controls>--><!--ME:</SharePoint:DelegateControl>--><!--
MS:<SharePoint:AspMenu ID="V4QuickLaunchMenu" runat="server" 
EnableViewState="false" DataSourceId="QuickLaunchSiteMap" 
UseSimpleRendering="true" Orientation="Vertical" StaticDisplayLevels="3" 
AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="0" 
SkipLinkText="">--><!--ME:</SharePoint:AspMenu>--><!--
ME:</SharePoint:SPNavigationManager>--><!--
MS:<SharePoint:SPNavigationManager ID="TreeViewNavigationManagerV4" 
runat="server" ContainedControl="TreeView" CssClass="ms-tv-box">--><!--
MS:<SharePoint:SPLinkButton runat="server"
NavigateUrl="~site/{0}/viewlsts.aspx" ID="idNavLinkSiteHierarchyV4"
Text="&lt;%$Resources:wss,treeview_header%&gt;"
accesskey="&lt;%$Resources:wss,quiklnch_allcontent_AK%&gt;" CssClass="ms-
tv-header">--><!--ME:</SharePoint:SPLinkButton>--><!--
MS:<SharePoint:DelegateControl runat="server" 
ControlId="TreeViewAndDataSource">--><!--MS:<Template_Controls>--><!--
MS:<SharePoint:SPHierarchyDataSourceControl runat="server" 
D="TreeViewDataSourceV4" RootContextObject="Web" 
IncludeDiscussionFolders="true">--><!--
ME:</SharePoint:SPHierarchyDataSourceControl>--><!--
MS:<SharePoint:SPRememberScroll runat="server" 
ID="TreeViewRememberScrollV4" 
onscroll="javascript:_spRecordScrollPositions(this);" style="overflow: 
auto;">--><!--MS:<SharePoint:SPTreeView ID="WebTreeViewV4" runat="server" 
ShowLines="false" DataSourceId="TreeViewDataSourceV4" ExpandDepth="0"   
SelectedNodeStyle-CssClass="ms-tv-selected" NodeStyle-CssClass="ms-tv-item" 
SkipLinkText="" NodeIndent="12" ExpandImageUrl="/{0}/images/tvclosed.png" 
ExpandImageUrlRtl="/{0}/images/tvclosedrtl.png" 
CollapseImageUrl="/{0}/images/tvopen.png" 
CollapseImageUrlRtl="/{0}/images/tvopenrtl.png" 
NoExpandImageUrl="/{0}/images/tvblank.gif">--><!--
ME:</SharePoint:SPTreeView>--><!--ME:</SharePoint:SPRememberScroll>--><!--
ME:</Template_Controls>--><!--ME:</SharePoint:DelegateControl>--><!--
ME:</SharePoint:SPNavigationManager>--><!--MS:<asp:ContentPlaceHolder 
ID="PlaceHolderQuickLaunchBottom" runat="server">--><hr /><!--
MS:<SharePoint:ClusteredSPLinkButton ID="idNavLinkViewAllV4" runat="server" 
Permissions="ViewFormPages" NavigateUrl="~site/{0}/viewlsts.aspx" 
Text="&lt;%$Resources:wss,quiklnch_allcontent_short%&gt;"
accesskey="&lt;%$Resources:wss,quiklnch_allcontent_AK%&gt;" CssClass="ms-
core-listMenu-item">--><!--ME:</SharePoint:ClusteredSPLinkButton>--><!--
ME:</asp:ContentPlaceHolder>--><!--ME:</asp:ContentPlaceHolder>--><!--
ME:</SharePoint:AjaxDelta>--></div><!--CE: End Vertical Navigation Snippet-->
</div>
<!—vertical section  ends -- >
</td></tr>
</table>
</body>
</html>

步骤9：重新上传母版页

现在我们已经在 HTML 母版页上进行了许多更改，是时候上传更改后的 HTML 母版页了。因此，重复步骤4，再次创建母版页。

如果查看您的母版页预览，您应该会看到以下母版页，具有您想要的结构。您可以看到 SharePoint 代码片段的魔力是如何被注入到我们的 HTML 母版页中的。

步骤10：发布并应用母版页

现在我们的 HTML 母版页已完成并以草稿版本保存，让我们发布并应用该母版页。

为了发布母版页，请选择 MyCustomMasterPage.html -> 选项 -> 高级 -> 发布主要版本，如下图所示。

现在您可以看到您的母版页状态已从草稿更改为已批准。

为了应用母版页，我们需要转到设计管理器 -> 选择发布并应用设计 -> 选择根据设备通道分配母版页到您的网站。

现在您可以看到“oslo”和“seattle”母版页旁边的下拉列表中出现了我们的母版页。因此，让我们选择我们的母版页并应用。

步骤11：享受您的最终成果

这样一切就完成了。现在浏览您的网站，您应该会看到已应用更改后的母版页。

接下来是什么？

在下一篇文章中，我们将学习如何向列表和文档添加自定义字段。

© . All rights reserved.