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

時間 2019-12-12

標籤原創分享 sharepoint 修改實戰欄目 Java開源简体版

原文原文鏈接

分享人：廣州華軟 極簡
javascript

一. 前言

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

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

本文適用於初學者。前端

二. 目錄

1. 前言java

2. 目錄web

3. 爲什麼須要修改母版頁chrome

4. 修改母版頁ide

4.1 針對各個部分進行修改網站

4.1.1 搜索框ui

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所寫樣式一致爲止。