SharePoint 2010自定義母版頁小技巧——JavaScript和CSS引用 - Sunmoonfire－IT工程師數位筆記本

文章出處

通常在我們的項目中，都會涉及到母版頁的定制。并且必不可少的，需要配合以一套自己的JavaScript框架和CSS樣式。
你有沒有遇到過這樣的情況呢，在開發環境和UAT時都還算順利，但是當最終部署到生產服務器場時，運行完PS 腳本后，發現網頁的其他部分似乎都沒事，唯獨樣式和Ajax不正常，。

當我們調出我們最好的朋友（IE的F12開發人員工具，或者Firebug和Chrome瀏覽器開發控制臺），就會發現問題是由于我們在生產環境中改變了網站集的URL結構導致絕對路徑不能正常工作。

那么問題就來了，我們如何能寫出一個最佳的URL引用，來替代硬編碼或絕對地址。從SDK里一通尋找后，終于找到如下的解決方案：

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

文章列表