一直以來所接觸的SharePoint開發，都是Designer配合Visual Studio，前者設計頁面，後者開發功能，相互合作，完成SharePoint網站開發。直到SharePoint 2013接觸站點模板，才發現站點也可以直接通過VS來進行開發，建立母版頁、頁面、WebPart、列表、列表項、網站欄等等，完成一個站點的開發。

　　或許是自己認識過於淺薄，但是在瀏覽眾多部落格當中，暫時還未曾發現類似的部落格，所以，寫一篇部落格分享給大家。也因為是一個開發示例，所以功能比較簡單，我自己簡單寫了一個釋出站點模板，用來演示部落格。

　　不得不說的是，模板的主題是環境保護，當日漸嚴重的霧霾天氣，已經嚴重影響我們的生活和出行，我想，節能環保是每個人的義務。廢話不多說了，進入我們的主題。

首先，介紹一下演示的網站模板包括哪些內容：

　　1、一個母版頁；

　　2、一個網站首頁；

　　3、兩個列表：圖片新聞、文字新聞；

　　4、3個WebPart，包括：圖片輪播、文字新聞列表展示、文字新聞二級頁面；

其次，介紹下網站具體結構：

　　1、母版頁通過Module將頁面釋出到SharePoint站點母版頁庫中；

　　2、兩個WebPart通過Feature部署到網站中；

　　3、自定義列表通過Feature部署到網站中，並在列表例項中新增欄和資料；

　　4、使用列表模板定義列表項展示頁面（DispForm.aspx）；

　　5、使用WebPart定義列表More頁；

Visual Studio解決方案結構圖，如下圖：

　　如下圖所示，詳細描述了每個檔案的作用。

站點模板的結構，主要由三個檔案組成，如上圖Visual Studio結構圖，我們可以看到這三個檔案分別是：

　　1、default.aspx -- 站點模板的首頁；

　　2、Onet.xml -- 可以說站點模板結構的Xml描述檔案；

　　3、webtemp_PublishSiteTemplate.xml -- 站點模板的Xml描述檔案。

一、母版頁開發

　　開發站點模板，首先要建立一個母版頁，也就是在建立SharePoint空解決方案之後，新增一個新項，專案為模組，如下圖：

　　如下圖，新增母版頁目錄結構，修改模組的Xml內容，Path也就是檔案路徑，是解決方案中檔案的路徑，Url是連結地址，是將來發布到SharePoint站點的地址，通常，我們都會複製一個SharePoint已存在的母版頁，來修改成我們需要的樣子：

　　如下圖，是Div+CSS佈局的母版頁，主要包括頭部、中間內容、尾部版權資訊三個部分。而頭部還包括網站名稱、導航、使用者、網站設定幾個控制元件。

　　標題、使用者、網站設定幾個部分，就是做好母版頁佈局，留著相應位置，將SharePoint自帶的控制元件剪下過來即可。建議在之前位置，留下類似<!--原網站設定位置-->這樣的註釋，方便我們修改後還原。

　　導航一般不經常變動，可以寫死成JS指令碼的動態導航；當然，也可以使用SharePoint自帶的託管導航，支援三級導航，效果可以使用CSS樣式，重寫預設樣式，修改比較難弄，有興趣瞭解，可以參考我的另一篇關於託管導航介紹的部落格。

　　母版頁製作完成以後，可以新增到站點模板結構描述的Xml檔案（onet.xml）裡，新增到如下位置即可。因為站點模板的Feature基本是Web，所以新增到WebFeatures即可；如果是Site範圍的，需要新增到SiteFeatures裡面。

　　建議如我這樣的新增，新增Feature後，在上方寫下注釋，方便以後修改和閱讀。

<WebFeatures>
<!--自定義母板頁-->
<Feature ID="d62c0ff1-de8c-4464-a930-61a23baeee40"></Feature>
</WebFeatures>

　　站點的母版頁功能新增到站點模板以後，還需要為default.aspx頁面也就是站點模板首頁引用。

　　首先，需要修改站點模板的結構描述檔案（onet.xml）的config節點，新增如下程式碼：

MasterUrl="_catalogs/masterpage/seattle.master"
CustomMasterUrl="_catalogs/masterpage/Index.master"

　　截圖如下：

　　最後，修改default.aspx檔案的母版頁引用，改為自定義模板頁，即可，如下修改MasterPageFile節點：

<%@ Page Language="C#" MasterPageFile="~masterurl/custom.master"

二、建立自定義列表（以圖片新聞為例）

　　在專案裡新增新建項，選擇列表，如下圖：

　　建立列表比較簡單，新增欄位可以在視覺化介面，直接新增即可。只是，建議先新增英文欄位名稱，而後修改成中文，這樣內部欄位容易識別。

　　而後，為列表新增測試資料，雙擊列表例項的xml檔案（本例為PictureNewsInstance中xml），新增相應資料，如下圖

　　建立列表完畢後，我們還需要定製一下列表的More頁和展示頁，因為Allitems頁面不僅僅是展示頁，而且還是資料維護頁面，所以不要去修改AllItems頁面，新新增一個More頁用來做二級頁面。同事，列表項的展示頁，直接修改DispForm也即可。

　　不知道你是否瞭解，SharePoint列表模板，如果不瞭解，聽我科普一下。SharePoint所有的列表，都會繼承一個模板，存在物理目錄TEMPLATE\CONTROLTEMPLATES下，名字叫做DefaultTemplates.ascx。當然，很多SharePoint的控制元件也都存在這裡，由於這些控制元件都是全域性的，強烈建議不要修改，即使修改，必須備份。

　　Sharepoint的列表，不僅僅繼承一個模板，還單獨繼承一個頁面，預設位置為物理路徑TEMPLATE\Pages下，名字叫做form.aspx。下面，我們通過這個頁面和模板，來定製列表的展示頁。

　　首先，我們對映上面介紹的兩個SharePoint資料夾（別說不知道如何對映SharePoint資料夾，如若不知道，請參考我之前的部落格，SharePoint 2013圖文開發系列）。

　　在Pages對映的資料夾中，新增兩個頁面分別用來定製DispForm和More頁，新增一個模板的ascx控制元件，用來展示DispForm頁面。由於More頁和SharePoint原來頁面相差很大，所以我選擇開發一個視覺化webpart，並不需要修改模板，只要隱藏掉之前的模板即可。

　　然後，修改一下More也的引用頁面（PublishSiteMoreForm.aspx），主要修改引用的母版頁為自定義母版頁（上面那個不算太好看的），新增More頁的視覺化WebPart（如何建立後面介紹）。

　　1、在頭部註冊控制元件，如下：

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

　　2、在頁面新增webpartzone，並新增webpart，如下：

<WebPartPages:WebPartZone runat="server" Title="NewsMoreWebPartZone" ID="NewsMoreWebPartZone">
<ZoneTemplate>
<VisualWebPartNewsMore:VisualWebPartNewsMore ChromeType="None" runat="server" title="NewsMore" id="NewsMore">
</VisualWebPartNewsMore:VisualWebPartNewsMore>
</ZoneTemplate>
</WebPartPages:WebPartZone>

　　3、隱藏預設自帶的部件區域，如下：

<td style="display:none">
<WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main" />
</td>

　　4、如下圖，即修改後的頁面，同時，我們修改DispForm繼承的Page頁（PublishSiteDispForm.aspx），這個頁面，我們只需要修改母版頁引用為自定義母版頁即可，因為展示需要繼承自帶的模板，而非視覺化webpart：

　　接下來，修改DispForm頁繼承的模板，如下圖，展示的只有標題和新聞內容兩個欄位，中間有一段點化線作為分隔：

　　展示效果，如下圖，還不算太難看吧，我不是美工，大家不要吐槽：

三、建立視覺化webpart

　　相比之前介紹的內容，視覺化webpart就非常簡單了，建立三個視覺化webpart，分別用作圖片輪播、文字新聞列表展示、文字新聞More頁。

　　圖片新聞是一段JS，讀取標題、圖片連結，拼好指令碼前臺輸出即可；文字新聞更簡單，拼成HTML前臺資料，就可以了；More頁也非常簡單，讀取列表資料，繫結前臺GridView，自帶分頁。功能就不多言了，看看展示效果吧。

　　圖片新聞和文字新聞的首頁

　　More頁的顯示效果

　　詳細頁之前已經截圖了，在這裡就不碼圖了。新增完這三個WebPart以後，要做的就是把這三個WebPart新增到一個Feature裡，然後加到站點模板的SiteFeatures裡去，就可以了。

　　特別要說的是，之前新增的列表，也需要載入這裡，但是為了省事兒，我加到母版頁的Feature裡了，所以這裡沒有單獨列出來，希望不要引起誤會。

　　以上，便是SharePoint模板開發過程的簡單描述，開發完成後，使用Visual Studio自帶的打包功能，部署到伺服器上，即可。在新增網站集的時候，就會看到相應的站點模板，如下圖。

　　站點模板的屬性，在其描述檔案中（webtemp_PublishSiteTemplate.xml）修改：

　　站點模板描述檔案，分別有站點模板的標題、描述、所示分組等，如下圖：

總 結

        SharePoint站點模板的開發，基本如上所示，當然，時間和精力所限，自己用很短的時間，寫了上面的東西作為演示，如果需要，可以開發更加複雜的站點模板，以滿足對於客戶的需求。

附解決方案包下載