SharePoint 母版页定制实例教程

SharePoint 2023-01-12

我们使用SharePoint做门户网站，经常需要定制母版页，但是2010提供的Ribbon的方式，定制干掉了他以后，使用起来会发生不便，很多功能接口都需要从Ribbon里面进入，编辑也会无法编辑等出现各种问题，或者弹出脚本异常等。所以，我们要考虑下其他的方式，更加合理的使用Ribbon和左侧导航。

方法一 使用JS脚步的方式

所以就想用JS隐藏的方式，处理一下母版页，把不需要的默认隐藏掉，然后通过url传参，在需要的时候，把Ribbon还原回来。这就是我的思路，给大家看看我做的例子吧。

如下图，是引用的SharePoint默认母版页的一个页面，大家很熟悉吧，V4.master就是我引用的母版页，效果就是这样的，我要处理掉Ribbon和左侧导航，因为要做门户首页嘛，这两个挺碍事儿的，呵呵。

通过IE开发工具栏，找到Ribbon和左侧导航区域的id，分别是” s4-ribbonrow”和” s4-leftpanel”，使用脚本把这两个东西隐藏掉，就变成了下图我们需要的效果，中间灰色区域是PlaceHolderMain的区域，我加了一个Div，方便识别和调整。

我们要做的不仅仅是隐藏，还要在Url上传一个参数，我这里明明为“show”，通过JS获取到参数，然后进行操作，如果有参数show并且show的值是“true”的情况下，我们把ribbon和左侧导航还显示出来。

function QueryString(item)

{

var sValue=location.search.match(new RegExp("[?&]"+item+"=([^&]*)(&?)","i"))

return sValue?sValue[1]:sValue

}

var ShowID=QueryString("ShowAll");

document.getElementById("s4-leftpanel").style.display='none';

document.getElementById("s4-ribbonrow").style.display='none';

document.getElementById("MSO_ContentTable").style.margin='0';

if(ShowID=="true")

{

document.getElementById("s4-leftpanel").style.display='block';

document.getElementById("s4-ribbonrow").style.display='block';

document.getElementById("MSO_ContentTable").style.margin='0 0 0 155px';

}

</script>

下图就是加脚本隐藏Ribbon和左侧导航后效果，大家如果想隐藏其他的东西，也可以采取这样的方法，自己感觉比直接隐藏在母版页上style=”display:none”的方法要稍微合理一点，或者直接删除是最不可取的方法了。

下面是传参数返回正常效果的图，大家可以看一下，ribbon和左侧导航都显示出来了，也可以正常的使用。当然，这样的操作，有可能在网络比较差的情况出现先加载出来ribbon和左侧导航的，然后消失掉，这样可以在母版页里隐藏掉，然后通过脚步显示出来也是可以的。

方法二通过权限进行控制

<Sharepoint:SPSecurityTrimmedControl ID="SPSecurityTrimmedControl2" runat="server" PermissionsString="AddAndCustomizePages">

JS脚步

</script>

</Sharepoint:SPSecurityTrimmedControl>

给大家权限控制的脚步，有兴趣的可以试试，其实效果和上面的是一样的，只是js执行由传参控制，变成了权限控制。当然，PermissionsString不仅仅是这一个权限的，还有很多权限，顺便给列一个吧。

微软官方PermissionsString所有值：

*************************************************************************************