SharePoint 2010自定义母版页小技巧——JavaScript和CSS引用

时间:2023-03-08 17:16:52
SharePoint 2010自定义母版页小技巧——JavaScript和CSS引用

通常在我们的项目中,都会涉及到母版页的定制。并且必不可少的,需要配合以一套自己的JavaScript框架和CSS样式。
你有没有遇到过这样的情况呢,在开发环境和UAT时都还算顺利,但是当最终部署到生产服务器场时,运行完PS 脚本后,发现网页的其他部分似乎都没事,唯独样式和Ajax不正常,。

当我们调出我们最好的朋友(IE的F12开发人员工具,或者Firebug和Chrome浏览器开发控制台),就会发现问题是由于我们在生产环境中改变了网站集的URL结构导致绝对路径不能正常工作。

那么问题就来了,我们如何能写出一个最佳的URL引用,来替代硬编码或绝对地址。从SDK里一通寻找后,终于找到如下的解决方案:

SharePoint 2010自定义母版页小技巧——JavaScript和CSS引用

JavaScript文件的引用

<asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false"
EnablePartialRendering="true" EnableScriptGlobalization="false"
EnableScriptLocalization="true">
<Scripts>
<asp:ScriptReference
Path="<%$SPUrl:~SiteCollection/Style Library/ProjectPortal/js/jquery-1.5.2.js%>">
</asp:ScriptReference>
<asp:ScriptReference
Path="<%$SPUrl:~SiteCollection/Style
Library/ProjectPortal/js/ProjectPortalLoadAfterJquery.js%>">
</asp:ScriptReference>
</Scripts>
</asp:ScriptManager>

CSS样式文件的引用

<SharePoint:CssRegistration ID="CssRegistration1"
name="<% $SPUrl:~sitecollection/Style Library/ProjectPortal/ppb-styles.css %>"
After="corev4.css" runat="server"/>

如上所示,实现这一魔法的关键在于$SPUrl:~sitecollection这个Token,它会随着网站集URL而变。所以保证了整个文件引用路径的正确。

很有用的一个小技巧吧。

参考资料

SharePoint 2010 Custom Master Page Tips and Tricks -> JavaScript and StyleSheet Reference