原創分享！SharePoint母版頁修改（實戰）

本文轉載自查看原文 2019-04-24 11:17 463 初學者/ 母版頁/ sharepoint

分享人：廣州華軟 極簡

一. 前言

SharePoint網站創建時，便自帶一份母版頁，可由開發人員重新自定義一份母版頁，關於如何轉換成母版頁，由於之前已經講述過，此篇便不再贅述了。

若自定義母版頁，你需要知道網頁頭部、底部含有哪些內容，在查看SharePoint自帶頁面后，清楚哪些是已有，哪些是需要添加的，針對性的進行修改。

本文適用於初學者。

二. 目錄

1. 前言

2. 目錄

3. 為何需要修改母版頁

4. 修改母版頁

4.1 針對各個部分進行修改

4.1.1 搜索框

4.1.2 全局導航

4.1.3 面包屑

4.1.4 左側導航

4.2 添加樣式及腳本文件

4.2.1 位置

4.2.2 樣式

4.2.3 腳本

5. 總結

三. 為何需要修改母版頁

SharePoint自帶母版頁雖頁面已有內容可滿足頁面需求，但其樣式，或展現形式等，可能無法滿足頁面需求。比如面包屑，SharePoint默認面包屑僅顯示當前頁路徑及上一級路徑，雖然簡潔明了，但若需要直接回到頂級，默認頁面面包屑是不可行的。諸如此類的需求或內容位置變更等，便需要修改母版頁了。

通過html頁面轉換為SharePoint母版頁中，是缺少SharePoint占位符（給定某個內容一個預先位置，類似於DOM結構中，某個元素的內容是動態，但它在有內容之前，是有一個位置在DOM中的）的。

如，你寫的html頁面僅僅是前端代碼，而不能直接跟SharePoint網站已有內容對接，所以，我們需要將對應SharePoint占位符內容放置在先前所寫的html中對應位置，以此讓我們自定義的母版頁可以與SharePoint內容無縫對接上。

下面簡單講解一下，比較通用部分的修改，諸如頭部（全局導航、面包屑、搜索框、左側導航）、底部。

四. 修改母版頁

4.1 針對各個部分進行修改

以之前開發過的網站為例，下面簡單講述一下過程。

通過SPD（SharePointDesigner 2013）打開網站，點擊左邊的“母版頁”欄目，找到剛剛轉換的html格式的母版頁，右鍵選擇“在高級模式下編輯文件”，如下圖：

下面說說搜索框、全局導航、面包屑、左側導航占位符的修改。

注：可能因版本不同，頁面些許代碼會有所不同，但基本是大同小異。當前版本是SharePoint 2013，請確認是同個版本，且在修改前備份好已有數據（頁面等），以備不時之需。

4.1.1 搜索框

找到html頁面中搜索框所寫位置，將下述代碼替換在html頁面搜索框位置處，其它需要替換占位符的內容處，均是此種方式。

<div class="ms-mpSearchBoxms-floatRight" id="ctl00_DeltaPlaceHolderSearchArea">

<div class="ms-webpart-chrome "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBodynoindex " OnlyForMePart="true" allowDelete="false" style=""><div componentid="ctl00_SmallSearchInputBox1_csr" id="ctl00_SmallSearchInputBox1_csr"><div id="SearchBox" name="Control"><div class="ms-srch-sbms-srch-sb-border" id="ctl00_SmallSearchInputBox1_csr_sboxdiv"><input type="text" value="搜索此網站..." maxlength="2048" accessKey="S" title="搜索此網站..." id="ctl00_SmallSearchInputBox1_csr_sbox" autocomplete="off" autocorrect="off" class="ms-srch-sb-prompt ms-helperText" /><a title="搜索" class="ms-srch-sb-searchLink" id="ctl00_SmallSearchInputBox1_csr_SearchLink" href="javascript: {}"><imgsrc="http://dweb2/_layouts/15/images/searchresultui.png" class="ms-srch-sb-searchImg" id="searchImg" alt="Search" /></a><div class="ms-qSuggest-container ms-shadow" id="AutoCompContainer"><div id="ctl00_SmallSearchInputBox1_csr_AutoCompList"></div></div></div></div></div><div componentid="ctl00_SmallSearchInputBox1_csr" id="ctl00_SmallSearchInputBox1_csr"></div><div id="ctl00_SmallSearchInputBox1"></div><div class="ms-clear"></div></div></div>

</div>

</div>

</div>

添加后，如下圖：

4.1.2 全局導航

找到全局導航位置，進行替換

<!--SPM:<asp:SiteMapDataSource

ShowStartingNode="False"

SiteMapProvider="SPNavigationProvider"

id="topSiteMap"

runat="server"

StartingNodeUrl="sid:1002"/>-->

</a>

<!--SPM:<SharePoint:AspMenu

ID="TopNavigationMenu"

Runat="server"

EnableViewState="false"

DataSourceID="topSiteMap"

AccessKey="<%$Resources:wss,navigation_accesskey%>"

UseSimpleRendering="true"

UseSeparateCss="false"

Orientation="Horizontal"

StaticDisplayLevels="2"

AdjustForShowStartingNode="true"

MaximumDynamicDisplayLevels="2"

SkipLinkText=""/>-->

<link rel="stylesheet" type="text/css" href="http://dweb2/_layouts/15/2052/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindexms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInlinems-navedit-linkNode" tabindex="0" title="默認發布網站" href="#" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">默認發布網站</span></span></a></li></ul></div>

替換后，如下圖：

4.1.3 面包屑

<!--SPM:<SharePoint:PopoutMenu

Visible="true"

runat="server"

ID="GlobalBreadCrumbNavPopout"

IconUrl="/_layouts/15/images/spcommon.png?rev=23"

IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"

ThemeKey="v15breadcrumb"

IconOffsetX="215"

IconOffsetY="120"

IconWidth="16"

IconHeight="16"

AnchorCss="ms-breadcrumb-anchor"

AnchorOpenCss="ms-breadcrumb-anchor-open"

MenuCss="ms-breadcrumb-menu ms-noList">-->

</div>

<!--SPM:<SharePoint:ListSiteMapPath

runat="server"

SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"

RenderCurrentNodeAsLink="false"

PathSeparator=""

CssClass="ms-breadcrumb"

NodeStyle-CssClass="ms-breadcrumbNode"

CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"

RootNodeStyle-CssClass="ms-breadcrumbRootNode"

NodeImageOffsetX="0"

NodeImageOffsetY="289"

NodeImageWidth="16"

NodeImageHeight="16"

NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"

RTLNodeImageOffsetX="0"

RTLNodeImageOffsetY="312"

RTLNodeImageWidth="16"

RTLNodeImageHeight="16"

RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"

HideInteriorRootNodes="true"

SkipLinkText=""/>-->

</div>

<!--SPM:<SharePoint:SPTitleBreadcrumb

runat="server"

RenderCurrentNodeAsLink="true"

SiteMapProvider="SPContentMapProvider"

CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">-->

<span id="ctl00_DeltaPlaceHolderPageTitleInTitleArea">主頁</span>

</span>

</a>

</span>

</h5>

替換后，如下圖：

如需面包屑如下圖展示，需另外添加一段css與js，若不需要，則不用添加。

Css:

ul.ms-breadcrumb{

display:inline-block;

list-style-type:none;

color: #666666;

padding:0;

position:relative;

}

ul.ms-breadcrumb a{

color: #666666;

}

ul.ms-breadcrumb ul{

display:inline-block;

}

.s4-breadcrumb-arrowcont{

display:none;

}

ul.ms-breadcrumb li{

display:inline-block;

list-style-type:none;

}

ul.ms-breadcrumb img{

display:none;

}

ul.ms-breadcrumbRootNode, ul.ms-breadcrumbNode{

margin-left:0px;

margin-top:0px;

}

ul.ms-breadcrumbRootNode li, ul.ms-breadcrumbNodeli{

margin-left:0px;

margin-top:-2px;

}

#DeltaPlaceHolderPageTitleInTitleArea{

display:none;

}

#DeltaPlaceHolderPageDescription{

display:none;

}

div.ms-breadcrumb-dropdownBox{

display:none !important;

}

Js:

$(function() {

if( $('ul.ms-breadcrumb').length == 0 ){

$(".ms-breadcrumb-dropdownBox").css('display','none');

}else{

$(".ms-breadcrumb-dropdownBox").css('display','none');

$('ul.ms-breadcrumb').clone().prependTo( $("這里填寫想要把面包屑導航添加的位置比如：添加到類名為‘nav_mbx’的div中即填寫”div.nav_mbx”") );

$('ul.ms-breadcrumbRootNode').before(" >");

$('ul.ms-breadcrumbNode').before(" >");

}

});

4.1.4 左側導航

</a>

<!--SPM:<SharePoint:SPNavigationManager

id="QuickLaunchNavigationManager"

runat="server"

QuickLaunchControlId="V4QuickLaunchMenu"

ContainedControl="QuickLaunch"

EnableViewState="false"

>-->

<!--SPM:<SharePoint:DelegateControlrunat="server"

ControlId="QuickLaunchDataSource">-->

<!--SPM:<asp:SiteMapDataSource

SiteMapProvider="SPNavigationProvider"

ShowStartingNode="False"

id="QuickLaunchSiteMap"

StartingNodeUrl="sid:1025"

runat="server"

/>-->

<!--SPM:<SharePoint:AspMenu

id="V4QuickLaunchMenu"

runat="server"

EnableViewState="false"

DataSourceId="QuickLaunchSiteMap"

UseSimpleRendering="true"

Orientation="Vertical"

StaticDisplayLevels="3"

AdjustForShowStartingNode="true"

MaximumDynamicDisplayLevels="0"

SkipLinkText=""

/>-->

<!--SPM:<SharePoint:SPNavigationManager

id="TreeViewNavigationManagerV4"

runat="server"

ContainedControl="TreeView"

CssClass="ms-tv-box"

>-->

<!--SPM:<SharePoint:SPLinkButtonrunat="server" NavigateUrl="~site/_layouts/15/viewlsts.aspx" id="idNavLinkSiteHierarchyV4" Text="<%$Resources:wss,treeview_header%>" accesskey="<%$Resources:wss,quiklnch_allcontent_AK%>"

CssClass="ms-tv-header"/>-->

<!--SPM:<SharePoint:SPHierarchyDataSourceControl

runat="server"

id="TreeViewDataSourceV4"

RootContextObject="Web"

IncludeDiscussionFolders="true"

/>-->

<!--SPM:<SharePoint:SPRememberScrollrunat="server" id="TreeViewRememberScrollV4" onscroll="javascript:_spRecordScrollPositions(this);"

style="overflow: auto;">-->

<!--SPM:<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="/_layouts/15/images/tvclosed.png?rev=23"

ExpandImageUrlRtl="/_layouts/15/images/tvclosedrtl.png?rev=23"

CollapseImageUrl="/_layouts/15/images/tvopen.png?rev=23"

CollapseImageUrlRtl="/_layouts/15/images/tvopenrtl.png?rev=23"

NoExpandImageUrl="/_layouts/15/images/tvblank.gif?rev=23"

>-->

<!--SPM:<SharePoint:ClusteredSPLinkButton

runat="server"

id="idNavLinkViewAll"

PermissionsString="ViewFormPages"

NavigateUrl="~site/_layouts/15/viewlsts.aspx"

Text="<%$Resources:wss,AllSiteContentMore%>"

accesskey="<%$Resources:wss,quiklnch_allcontent_AK%>"

CssClass="ms-core-listMenu-item ms-core-listMenu-heading"/>-->

<a id="ctl00_idNavLinkViewAll" accesskey="3" class="ms-core-listMenu-item ms-core-listMenu-heading" href="#"><span class="ms-splinkbutton-text">所有網站內容</span></a>

</div>

</div>

</div>

替換后，如下圖：

注：由於這些是SharePoint 自帶的部件，樣式會與其他地方不同，所以需要根據需求，調整樣式，直到與之前HTML所寫樣式一致為止。

4.2 添加樣式與腳本文件

4.2.1 位置

可有2種方式：

1.是在head中寫<link /><script></script>添加；

2.是使用SharePoint提供的方式。如下圖：

4.2.2 樣式

4.2.3 腳本

五. 總結

母版頁的修改是很有必要的，希望上面的操作過程能夠幫你更清楚的知道如何去修改母版頁。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 簡單又實用的分享！SharePoint母版頁引用（實戰） SharePoint 2013 母版頁取消和HTML頁關聯 SharePoint 2013 入門教程之創建及修改母版頁 SharePoint 2013 中將 HTML文件轉換為母版頁主題和母版頁（母版頁） SharePoint 2010 母版頁制作的簡單介紹嵌套母版頁無廢話SharePoint入門教程四[創建SharePoint母版頁] django母版頁的使用 jsp母版頁組裝