分享人：廣州華軟 極簡
一. 前言
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頁面搜索框位置處，其它需要替換佔位符的內容處，均是此種方式。
添加後，如下圖：
4.1.2 全局導航
找到全局導航位置，進行替換
<link>
替換後，如下圖：
4.1.3 麵包屑
主頁
替換後，如下圖：
如需麵包屑如下圖展示，需另外添加一段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 左側導航
替換後，如下圖：
注：由於這些是SharePoint 自帶的部件，樣式會與其他地方不同，所以需要根據需求，調整樣式，直到與之前HTML所寫樣式一致為止。
4.2 添加樣式與腳本文件
4.2.1 位置
可有2種方式：
1.是在head中寫<link>添加；
2.是使用SharePoint提供的方式。如下圖：
4.2.2 樣式
4.2.3 腳本
五. 總結
母版頁的修改是很有必要的，希望上面的操作過程能夠幫你更清楚的知道如何去修改母版頁。
閱讀更多 廣州華軟 的文章
