SharePoint Online 建立門戶網站系列之導航

標籤：

前 言

　　關於SharePoint Online中的導航，基本是由Html + Css + JavaScript組成效果以及樣式，然後在後台列表或者SharePoint Online中繼資料導航當做資料來源進行展示，通常資料來源為列表的我們稱之為自訂導航。

　　下面，讓我們分別介紹SharePoint Online的中繼資料導航和自訂導航。

一、SharePoint Online預設導航

　　如果想使用SharePoint Online預設導航，可以用F12的方式，看看控制項在主版頁面中的位置，如：

　　在Designer裡找到導航控制項，然後移動到主版頁面中你導航的位置，即可；

<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" Orientation="Horizontal" StaticDisplayLevels="1" DynamicHorizontalOffset="0" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2" StaticPopoutImageUrl="/_layouts/15/images/menudark.gif?rev=38" StaticPopoutImageTextFormatString="" SkipLinkText="" StaticSubMenuIndent="0" />

　　我個人習慣，在移動了導航之後，在原來位置上加一個標記，方便以後修改，如：

　　這樣，我們可以看到導航已經變為我們修改後的SharePoint導航了，如：

　　預設導航的修改方式比較簡單，就是在導航上直接編輯、添加即可，同時我們還可以點擊那個小眼睛一樣的表徵圖，設定是否可見，如：

　　SharePoint Online預設導航支援三級導航，添加一個串連以後，將其拖動到導航上，即可彈出下一級位置，拖進去即可；

　　由於我們的導航，可能和SharePoint Online預設樣式有所區別，我們可以使用JavaScript和Css去強制樣式修改，具體可以參考之前修改導航的部落格；

　　參考：SharePoint 2013 受管理導覽及相關配置 <二>

　　http://www.cnblogs.com/jianyus/p/3520623.html

二、SharePoint Online自訂導航

　　我們這裡採用的就是SharePoint Online的預設導航，因為樣式非常方便修改，編輯起來也很友好；但是，可能會遇到非常漂亮的導航，如果用JavaScript和Css的方式很難修改的情況，我們還是需要自訂導航的。

　　在這裡，我們也簡單介紹一下，自訂導航的情況。

　　其實在SharePoint Online中自訂導航也非常容易，可以將導航的內容儲存到自訂欄表，然後用JavaScript API讀取，在前台進行展示。

　　在網站內容中，添加應用程式，如：

　　選擇自訂欄表類型，如：

　　看一下導航設定，自訂導航比較靈活，可能有是否新選項卡開啟等設定，但是預設的導航，是沒有這樣設定的，我們推薦列表名和欄位名，首先用英文命名，然後修改為中文顯示，這樣內部欄位名不會是中文編碼，而是一開始的英文名字，如：

　　修改為中文顯示名後，我們建立一條導航資料，如：

　　當然，在編輯列表的時候，我們還可以使用快速編輯的功能，方便我們編輯和維護自訂導航，如：

　　然後編寫讀取資料的JavaScript指令碼，如：

　　在主版頁面中添加Script.js的引用，然後在主版頁面裡添加JavaScript方法的調用，即可：

　　然後，我們就可以看到首頁上，自訂導航的效果了，如：

　　特別要說，細心的朋友可能看到我有一句Caml語句沒有填寫完整：

　　Query.set_viewXml("<View><Query></Query></View>");

　　是因為手頭沒有產生工具，不方便，所以未填寫；但是我給出了格式，只需要在Query裡面填寫一句Hidden等於False，並且按照位置排序，即可；

　　而且，後面為了能夠給導航排序，我還添加了位置（Position）欄位，特此說明；

總 結

　　其實，SharePoint Online中導航的添加和Server版本非常類似，要麼使用內建導航修改樣式，要麼使用自訂導航，資料儲存列表或者以Xml形式儲存在文件庫，然後在前台通過JavaScript方式或者沙河解決方案讀取導航進行展示。

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

SharePoint Online 建立門戶網站系列之導航