SharePoint 2010母版頁所用的還是ASP.NET 2.0中的技術。通過該功能,實現了頁面框架布局與實際內容的分離。雖然在本質上自定義母版頁的過程和以前版本的SharePoint大致相同,但是從 2007到2010仍然有許多重要的值得我們關注的變化。
本文將試圖:
鞏固和掌握SharePoint 2010裡母版頁相關的一些基本操作
突出描述新版本和以前的版本之間的一些變化
了解一些有用的或比較常見的自定義方式
SharePoint 2010 母版頁的類型
首先,讓我們快速的看一下在SharePoint 2010中母版頁的類型:
v4.master
默認的工作組站點的母版頁。提供了功能區和其他用戶界面上的改變。
特征
網站操作在2010中更新。現在放在左側。
功能區可用。
default.master
從SharePoint 2007升級的網站使用該母版頁,除非我們手工改成v4版本。
特征
SharePoint 2007版本的 網站操作在右側
沒有功能區。
minimal.master
母版頁中幾乎什麼也沒有。通常用於搜索中心和Office Web應用程序的頁面。這個母版頁不應該與2007裡的開發人員自己修剪下來的最簡單的自定義母版頁混淆。minimal.master現在是一個開箱即用的母版頁。在SharePoint 2010裡那些修剪完的自定義母版頁通常是指Starter母版頁。
特征
不包括導航
Starter母版頁
SharePoint 2007裡通常稱為minimal母版頁。這些母版頁往往是由開發人員創建的,用於快速開始母版頁的定制,基於其上擴充功能,做出實際需要的母版頁。
simple.master
這個母版頁是用在登錄和錯誤頁面。要自定義該頁面,必須替換存放在服務器_layouts目錄下的相應頁面文件。若要了解更多信息,請參考MSDN上的文章“SharePoint中的默認母版頁”。
使用simple.master 的網頁
Login.aspx
SignOut.aspx
Error.aspx
ReqAcc.aspx
Confirmation.aspx
WebDeleted.aspx
AccessDenIEd.aspx
其他母版頁
以下這些雜七雜八的母版頁,在定制網站時一般不會去動。
包括:
application.master
applicationv4.master
dialog.master
layouts.master
layoutsv3.master
pickerdialog.master
rtedialog.master
simple.master simple.master
simplev4.master
mwsdefault.master
mwsdefaultv4.master
admin.master
popup.master
升級至SharePoint 2010母版頁
詳細內容請參考這一篇MSDN文章 。
許多以前在菜單和工具欄裡面的命令現在存放在功能區裡。因此,如果現有的母版頁中不包含功能區,許多命令將不可用。
功能區裡的控件
SharePoint 2010裡的下列控件放置在功能區裡:
發布控制台- <PublishingConsole:Console>
網站操作菜單- <PublishingSiteAction:SiteActionMenu>
登錄和登錄控制(如果使用自定義登錄,被移到功能區裡了)。
所需內容占位符
PlaceHolder控件 描述 新增 <asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" runat="server"> 快速啟動菜單頂部。 是 <asp:ContentPlaceHolder id="PlaceHolderQuickLaunchBottom" runat="server"> 快速啟動菜單底部。 是 <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server"/> 該網站的標題。 否 <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/> 頁面head部分的占位符,用於在頁面對應的HTML的head標記中添加額外例如ECMAScript(JavaScript,JScript)和層疊樣式表(CSS)。 否 <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server"/> 在body區域中的類。 否 <asp:ContentPlaceHolder ID="SPNavigation" runat="server"> 該控件用於放置頁面編輯類的控件。 否 <asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server"> 當前頁面所在站點的名稱。 否 <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" /> 出現在標題區域的當前頁的標題。 否 <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/> 當前頁的說明。 否 <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"> 頁面中放置搜索控件的位置。 否 <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server"> 頁面上的面包屑控件。 否 <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server"> 面包屑控件上的面包屑文本。 否 <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server"> 頁面上子網站和兄弟網站的全局導航。 否 <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server"> 用於放置頂部導航欄的容器。 否 <asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server"> 頂部導航欄中的導航菜單。 否 <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" runat="server" /> 放置填充左側導航所需數據源的容器。 否 <asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat="server" /> 日期選擇器,用於包含日歷的頁面。 否 <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" runat="server"/> 左側導航欄頂部區域。 否 <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server"> 快速啟動欄。 否 <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat="server"> 快速啟動欄上的其他對象。 否 <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"> 頁面的主要內容。 否 <asp:ContentPlaceHolder id="PlaceHolderFormDigest" runat="server"> 存儲頁面中 Form Digest控件的容器。 否 <asp:ContentPlaceHolder id="PlaceHolderUtilityContent" runat="server"/> 附加在頁面底部的內容在。從HTML角度來說,是Form標記以外的部分。 否 <asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server"/> title部分的類(現在是在head標記裡)。對其定制時如果添加一個WebPartZone到這個palceholder會報錯。 否 <asp:ContentPlaceHolder id="PlaceHolderPageImage" runat="server"/> 不屬於用戶界面的組成部分,是為了向後兼容。 否 <asp:ContentPlaceHolder id="PlaceHolderTitleLeftBorder" runat="server"> 不屬於用戶界面的組成部分,是為了向後兼容。 否 <asp:ContentPlaceHolder id="PlaceHolderMiniConsole" runat="server"/> 不屬於用戶界面的組成部分,是為了向後兼容。 否 <asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" runat="server"/> 不屬於用戶界面的組成部分,是為了向後兼容。 否 <asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" runat="server"/> 不屬於用戶界面的組成部分,是為了向後兼容。 否 <asp:ContentPlaceHolder id="PlaceHolderNavSpacer" runat="server"> 不屬於用戶界面的組成部分,是為了向後兼容。 否 <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" runat="server"> 不屬於用戶界面的組成部分,是為了向後兼容。 否 <asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" runat="server"> 不屬於用戶界面的組成部分,是為了向後兼容。 否 <asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server"> 不屬於用戶界面的組成部分,是為了向後兼容。 否
添加功能區
功能區是用戶界面裡一個新增加的特性。SPRibbonPeripheralContent控件會顯示在這一區域,但如果需要也可以將其移到功能區外面。
步驟
復制並粘貼下面的代碼到你的母版頁。
01 <div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
02 <div id="s4-ribboncont">
03 <SharePoint:SPRibbon runat="server" PlaceholderElementId="RibbonContainer" CssFile="">
04 <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowLeft" CssClass="ms-siteactionscontainer s4-notdlg">
05 <span style="background-color: rgb(255, 255, 153);"> <%-- 在這裡插入網站操作菜單 --%> </span>
06 </SharePoint:SPRibbonPeripheralContent>
07 <span style="background-color: rgb(255, 255, 153);"><%-- 在這裡插入全局導航 --%></span>
08 <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowRight" ID="RibbonTabRowRight" CssClass="s4-trc-container s4-notdlg">
09 <span style="background-color: rgb(255, 255, 153);"><%-- 在這裡插入右上角的控件 --%> </span>
10 </SharePoint:SPRibbonPeripheralContent>
11 </SharePoint:SPRibbon>
12 </div>
13 <div id="notificationArea" class="s4-noti">
14 <span style="background-color: rgb(255, 255, 153);"><%-- 通知內容將出現在這個div裡 --%></span>
15 </div>
16 <asp:ContentPlaceHolder ID="SPNavigation" runat="server">
17 <SharePoint:DelegateControl runat="server" ControlId="PublishingConsole">
18 </SharePoint:DelegateControl>
19 </asp:ContentPlaceHolder>
20 <div id="WebPartAdderUpdatePanelContainer">
21 <asp:UpdatePanel ID="WebPartAdderUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="false” runat="server">
22 <ContentTemplate>
23 <WebPartPages:WebPartAdder ID="WebPartAdder" runat="server" />
24 </ContentTemplate>
25 <Triggers>
26 <asp:PostBackTrigger ControlID="WebPartAdder" />
27 </Triggers>
28 </asp:UpdatePanel>
29 </div>
30 </div>
頁面滾動時固定功能區
在母版頁上進行以下更改,以保證頁面內容滾動時不會影響功能區的使用。
將頁面內容部分移動到下面的div內
1 <div id="s4-workspace">
2 <div id="s4-bodyContainer">
3 內容
4 </div>
5 </div>
如果您的頁面是固定寬度的,添加 s4-nosetwidth類到s4-workspace div裡。
1 <div ID="s4-workspace" class="s4-nosetwidth">
將標題區域移動到如下id的div裡。
1 <div id="s4-titlerow">標題區</div>
更新body標記和CSS規則,使其不滾動。Body標記和規則將類似於下面這樣:
1 <body scroll="no" ...>主體內容</body>
將控件添加到母版頁
有一組控件是SharePont功能必須的,包括:SPPageManager, ScriptManager和 ScriptLink。
將這些控件添加到您的母版頁
打開您的母版頁文件。
復制並粘貼以下代碼,以便添加ScriptManager控件。必須放在form標記內,並且在功能區前面。
1 <asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true" />
復制並粘貼以下代碼,以便添加SPPageManager控件。必須放在head標記內。
1 <SharePoint:SPPageManager runat="server" />
復制並粘貼以下代碼,以便添加ScriptLink控件。必須放在head標記內。
1 <SharePoint:ScriptLink defer= "true" runat="server"/>
保存您的母版頁文件。
防止某些區域在模式窗口中顯示
為了防止您的母版頁中的某些div塊或其他定義好的塊顯示在模式窗口(也就是那些彈出窗口,往往出現在添加文件,查看文件屬性時)中,可以添加類“s4-notdlg”。
這個問題應該只發生在下列情況下:
網站使用了自定義的系統母版頁(通常與發布頁面用的母版頁相同)。
自定義母版頁中在模式窗口中應隱藏的區域對應的標記遺漏了s4-notdlg類。
比如,以下區域將出現在模式窗口中:
1 <div class=”cccontent”>
2 你的內容
3 </div>
添加s4-notdlg至該類將阻止這種情況的發生
1 <div class=”cccontent s4-notdlg”>
2 你的內容
3 </div>
添加一個Placeholder以便在母版頁中使用Web部件
雖然我們無法直接在母版頁中插入一個WebPart,但是可以通過在母版頁中創建一個自定義的(空的)ContentPlaceholderId,由頁面布局使用該Id,從而實現在指定位置插入WebPart。
在SharePoint Designer 2010中的步驟
在你的自定義母版頁中添加一個唯一命名的內容占位符。例如:
1 <asp:ContentPlaceHolder id="PlaceHolderCopyright" runat="server"/>
在頁面布局中的為該占位符插入自定義內容
1 <asp:Content ContentPlaceholderID="PlaceHolderCopyright" runat="server"></asp:Content>
使用SharePoint Designer在新建的區域中插入一個WebPart。如果希望所有繼承自該頁面布局的頁面上都顯示該WebPart,不要把WebPart放在WebPartZone裡,直接放在該區域內即可。