分享人：广州华软 极简
一. 前言
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 脚本
五. 总结
母版页的修改是很有必要的，希望上面的操作过程能够帮你更清楚的知道如何去修改母版页。
閱讀更多 廣州華軟 的文章
