SharePoint 2010 母版頁深度解析：類型、必要預留位置、功能區整合與客製化實戰

前言

SharePoint 2010 母版頁沿用 ASP.NET 2.0 技術，實現版面與內容分離。從 2007 升級而來的概念雖相似，但 2010 引入 Ribbon（功能區）、最小母版頁、Starter 母版頁等重大變化。本文系統整理母版頁類型、必要 ContentPlaceHolder、Ribbon 整合步驟、捲動固定功能區、模式對話框隱藏區域、Web 部件置放等實戰技巧。

一、SharePoint 2010 母版頁類型對照

二、升級至 v4.master 關鍵點

• 許多功能移入 Ribbon，舊母版頁若無 Ribbon 將導致命令不可用
• 升級步驟參考 MSDN《Upgrading to SharePoint 2010 Master Pages》

三、Ribbon 區域必要控制項

<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
  <div id="s4-ribboncont">
    <SharePoint:SPRibbon runat="server" PlaceholderElementId="RibbonContainer" CssFile="">
      <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowLeft" CssClass="ms-siteactionscontainer s4-notdlg">
        <span style="background:#ffff99"><%-- 網站動作選單 --%></span>
      </SharePoint:SPRibbonPeripheralContent>
      <span style="background:#ffff99"><%-- 全域導覽 --%></span>
      <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowRight" ID="RibbonTabRowRight" CssClass="s4-trc-container s4-notdlg">
        <span style="background:#ffff99"><%-- 右上角控制項 --%></span>
      </SharePoint:SPRibbonPeripheralContent>
    </SharePoint:SPRibbon>
  </div>
  <div id="notificationArea" class="s4-noti">
    <span style="background:#ffff99"><%-- 通知區域 --%></span>
  </div>
  <asp:ContentPlaceHolder ID="SPNavigation" runat="server">
    <SharePoint:DelegateControl runat="server" ControlId="PublishingConsole" />
  </asp:ContentPlaceHolder>
  <div id="WebPartAdderUpdatePanelContainer">
    <asp:UpdatePanel ID="WebPartAdderUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="false" runat="server">
      <ContentTemplate><WebPartPages:WebPartAdder ID="WebPartAdder" runat="server" /></ContentTemplate>
      <Triggers><asp:PostBackTrigger ControlID="WebPartAdder" /></Triggers>
    </asp:UpdatePanel>
  </div>
</div>

四、頁面捲動時固定 Ribbon

1. 內容區域包裹於：

   <div id="s4-workspace">
     <div id="s4-bodyContainer"> 內容 </div>
   </div>

2. 固定寬度加上 `class="s4-nosetwidth"`
3. 標題列移入 `
   標題區
   `
4. `` 關閉 body 捲動

五、必要 ContentPlaceHolder 完整清單

六、母版頁必要控制項註冊

<!-- Head 區域 -->
<SharePoint:SPPageManager runat="server" />
<SharePoint:ScriptLink defer="true" runat="server" />

<!-- Form 區域，Ribbon 之前 -->
<asp:ScriptManager ID="ScriptManager" runat="server"
    EnablePageMethods="false" EnablePartialRendering="true"
    EnableScriptGlobalization="false" EnableScriptLocalization="true" />

七、防止區域出現在模式對話框

加入 CSS 類別 `s4-notdlg`：

<div class="cccontent s4-notdlg">你的內容</div>

• 適用於自訂系統母版頁（發布頁面同母版頁）
• 避免彈出視窗（新增文件、屬性）顯示不需區域

八、在母版頁預留 Web 部件區域

1. 母版頁加入唯一 ContentPlaceHolder：

   <asp:ContentPlaceHolder ID="PlaceHolderCopyright" runat="server" />

2. 頁面版面配置對應填入：

   <asp:Content ContentPlaceholderID="PlaceHolderCopyright" runat="server"></asp:Content>

3. SharePoint Designer 在該區域插入 Web 部件（勿放入 WebPartZone 以固定顯示）

九、總結

掌握 v4.master 架構、Ribbon 整合、必要預留位置、捲動固定、模式對話框隱藏與 Web 部件預留，即能建立符合 SharePoint 2010 UX 標準、可維護性高的客製化母版頁。