前 言
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版本一個體系的。
好了，很晚了，就到這里，休息，休息一下。