SharePoint Online 創建門戶網站系列之定制欄目完成圖文教程

SharePoint Online自帶的庫就帶有二級頁面和詳細頁面，也就是Allitems頁面和DispForm頁面，但是實在不夠美觀，尤其對于門戶網站這一企業門面來說，更是無法接受。

　　下面，我們就開始學習如何定制SPO的二級頁面和詳細頁面。

一、 SharePoint Online定制列表的二級頁面

　　在“新聞中心”的列表頁創建一個視圖，用來當做二級頁面，如下圖：

　　視圖類型，選擇 基于所有項目創建一個新的視圖，如下圖：

　　輸入視圖名稱為“新聞中心”，同時設置為默認視圖，如下圖：

　　選擇欄，我們選擇標題，當然后面如果有其他需要，我們還可以繼續修改，如下圖：

　　設置排序，讓最新發布的新聞，顯示在最上面，如下圖：

　　設置表格視圖，去掉選項，這樣就沒有了每個項目前面的復選框，如下圖：

　　修改視圖的網址，這樣就不會顯示View1這樣不容易理解的名字了，如下圖：

　　在Designer中打開網站，編輯新聞中心列表下面視圖，如下圖：

　　在視圖下文件上，右鍵在高級模式下編輯文件，如下圖：

　　修改母版頁，修改為我們自定義的母版頁，如下圖：

　　在瀏覽器中預覽，然后修改html，如下圖：

　　簡單調整一下樣式，如下圖：

　　其實右側部分還可以繼續使用css或者JavaScript優化，但是因為demo一下，自己也沒花費太多時間進行優化；

?

二、 SharePoint Online定制列表的詳細頁面

　　首先看看SharePoint Online默認的詳細頁展示，如下圖：

　　如上圖的展示，我們可以說是沒辦法接受，太難看了，下面，我們用Designer定制一下這個頁面。首先Designer打開新聞列表，然后找到DispForm頁面，右鍵用高級模式打開：

　　打開頁面以后，首先修改母版頁，如下圖：

　　插入顯示列表表單，如下圖：

　　在Ribbon菜單上選擇“添加和刪除列”，顯示標題、內容、創建時間和創建者，如下圖：

　　修改DispForm頁面的如下HTML，即可修改展示，如下圖：

　　然后大家可以看到我修改后的效果，不是特別好看，但是比默認好看很多，如下圖：

　　除了修改了頁面樣式，還需要創建篩選，否則頁面只顯示第一條信息，點擊Ribbon菜單上的篩選，如下圖：

　　在彈出的篩選條件上，選擇ID，并且新建參數，如下圖：

　　添加一個名稱為ID的參數，參數源選擇查詢字符串，查詢字符串變量為ID，如下圖：

　　而后點擊確定，即可。這時候切換DispForm頁上的ID，頁面上的內容就會跟著切換了。選擇ID為2就不是剛剛ID=1的測試數據了，如下圖：

總 結

　　其實，SharePoint Online中頁面定制的方法，跟SharePoint Server版本基本一致，都是通過Designer去定制，做起來也很方便美觀。這也說明，SharePoint Online是根據Server版本一個體系的。