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

SharePoint Online的欄目，簡單描述即顯示在首頁上的各個模塊信息，這里，我們主要介紹我們首頁上的欄目，包括簡介類型、新聞列表類型、圖片類型；

　　下面，讓我們開始在SharePoint Online的門戶網站中創建欄目吧 。

一、 SharePoint Online 為欄目創建列表

　　創建新聞中心列表，如下圖：

　　我們創建一個內容（多行文本）字段，用來保存新聞的內容：

　　創建聯系我們列表，如下圖：

　　字段：聯系人、電話、手機、郵編、網址，類型均為單行文本；

二、 SharePoint Online 在首頁顯示欄目

　　首先，在首頁上各個模塊的位置上，插入WebPartZone，將來插入WebPart使用，特表要說，先保存頁面然后才能添加WebPartZone，如下圖：

　　公司簡介 – 內容編輯器

　　打開首頁，在頁面上WebPartZone上添加內容編輯器部件，如下圖：

　　選中公司簡介的WebPart，點擊Ribbon菜單上面的編輯源，添加HTML代碼，因為是靜態文本，修改頻率非常小，所以這里添加靜態內容，如下圖：

　　添加完畢HTML效果，如果將來有需要修改，編輯頁面，修改HTML代碼即可以所見即所得的方式，進行編輯，效果如下圖：

　　新聞中心 – 部件

　　在新聞中心處添加web部件，選擇新聞中心，如下圖：

　　在新聞中心列表創建一個視圖，當做新聞中心應用程序的數據源；

　　選擇基于所有項目創建，如下圖：

　　視圖里面的欄選擇我們要展示的標題(這里截圖不當，后來改為鏈接到項目的標題了，因為需要點擊)、創建時間，如下圖：

　　修改排序為按照創建時間排序，當然我們需要的話，可以修改為其他排序，如下圖：

　　項目限制選擇5條，按照需要限制即可，如下圖：

　　表格視圖去掉復選框，這樣就不會有選擇項目前面的復選框了，如下圖：

　　修改新聞中心web部件的屬性，修改視圖為我們剛剛創建的首頁展示，修改工具欄類型為沒有工具欄，如下圖：

　　修改完畢后，新聞中心效果如下圖：

　　我們還需要隱藏標題欄和翻頁，然后使用Css或者JavaScript對樣式進行調整，這里都是前臺的內容了，我們就不多介紹了。

　　聯系我們 – JavaScript

　　首先需要編寫讀取列表信息的腳本，具體腳本如下：

　　然后在頁面上添加腳本的調用，下圖紅框中所示：

　　使用JavaScript讀取的聯系我們，內容已經來自列表了，如下圖：

　　至此，首頁上的四個欄目，通過不同方式添加進行展示已經介紹完了；

　　? 公司簡介通過內容編輯器直接填寫在頁面上，修改的時候直接編輯即可；

　　? 新聞中心用的自帶應用程序，讀取自定義好的視圖，用Css方式去修飾；

　　? 聯系我們使用JavaScript對象模型讀取自列表，進行展示；

　　? 產品展示，之前的博客已經介紹了，通過沙盒解決方案部署WebPart進行展示；

總 結

　　其實，SharePoint Online中導航的添加和Server版本非常類似，要么使用自帶導航修改樣式，要么使用自定義導航，數據保存列表或者以Xml形式保存在文檔庫，然后在前臺通過JavaScript方式或者沙河解決方案讀取導航進行展示。

　　好了，SharePoint Online的自定義導航，我們就介紹到這里，下一篇，我們將介紹入戶為門戶網站創建欄目。