SharePoint Online 創(chuàng)建門戶網(wǎng)站系列之導(dǎo)航

關(guān)于SharePoint Online中的導(dǎo)航，基本是由Html + Css + JavaScript組成效果以及樣式，然后在后臺列表或者SharePoint Online元數(shù)據(jù)導(dǎo)航當(dāng)做數(shù)據(jù)源進(jìn)行展示，通常數(shù)據(jù)源為列表的我們稱之為自定義導(dǎo)航。

　　下面，讓我們分別介紹SharePoint Online的元數(shù)據(jù)導(dǎo)航和自定義導(dǎo)航。

一、SharePoint Online默認(rèn)導(dǎo)航

　　如果想使用SharePoint Online默認(rèn)導(dǎo)航，可以用F12的方式，看看控件在母版頁中的位置，如下圖：

　　在Designer里找到導(dǎo)航控件，然后移動到母版頁中你導(dǎo)航的位置，即可；

　　我個人習(xí)慣，在移動了導(dǎo)航之后，在原來位置上加一個標(biāo)記，方便以后修改，如下圖：

　　這樣，我們可以看到導(dǎo)航已經(jīng)變?yōu)槲覀冃薷暮蟮腟harePoint導(dǎo)航了，如下圖：

　　默認(rèn)導(dǎo)航的修改方式比較簡單，就是在導(dǎo)航上直接編輯、添加即可，同時我們還可以點(diǎn)擊那個小眼睛一樣的圖標(biāo)，設(shè)置是否可見，如下圖：

　　SharePoint Online默認(rèn)導(dǎo)航支持三級導(dǎo)航，添加一個連接以后，將其拖動到導(dǎo)航上，即可彈出下一級位置，拖進(jìn)去即可；

　　由于我們的導(dǎo)航，可能和SharePoint Online默認(rèn)樣式有所區(qū)別，我們可以使用JavaScript和Css去強(qiáng)制樣式修改，具體可以參考之前修改導(dǎo)航的博客；

二、SharePoint Online自定義導(dǎo)航

　　我們這里采用的就是SharePoint Online的默認(rèn)導(dǎo)航，因?yàn)闃邮椒浅７奖阈薷模�編輯起來也很友好；但是，可能會遇到非常漂亮的�?dǎo)航，如果用JavaScript和Css的方式很難修改的情況，我們還是需要自定義導(dǎo)航的。

　　在這里，我們也簡單介紹一下，自定義導(dǎo)航的情況。

　　其實(shí)在SharePoint Online中自定義導(dǎo)航也非常容易，可以將導(dǎo)航的內(nèi)容存儲到自定義列表，然后用JavaScript API讀取，在前臺進(jìn)行展示。

　　在站點(diǎn)內(nèi)容中，添加應(yīng)用程序，如下圖：

　　選擇自定義列表類型，如下圖：

　　看一下導(dǎo)航設(shè)置，自定義導(dǎo)航比較靈活，可能有是否新選項(xiàng)卡打開等設(shè)置，但是默認(rèn)的導(dǎo)航，是沒有這樣設(shè)置的，我們推薦列表名和字段名，首先用英文命名，然后修改為中文顯示，這樣內(nèi)部字段名不會是中文編碼，而是一開始的英文名字，如下圖：

　　修改為中文顯示名后，我們創(chuàng)建一條導(dǎo)航數(shù)據(jù)，如下圖：

　　當(dāng)然，在編輯列表的時候，我們還可以使用快速編輯的功能，方便我們編輯和維護(hù)自定義導(dǎo)航，如下圖：

　　然后編寫讀取數(shù)據(jù)的JavaScript腳本，如下圖：

　　在母版頁中添加Script.js的引用，然后在母版頁里添加JavaScript方法的調(diào)用，即可：

　　然后，我們就可以看到首頁上，自定義導(dǎo)航的效果了，如下圖：

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

　　Query.set_viewXml("");

　　是因?yàn)槭诸^沒有生成工具，不方便，所以未填寫；但是我給出了格式，只需要在Query里面填寫一句Hidden等于False，并且按照位置排序，即可；

　　而且，后面為了能夠給導(dǎo)航排序，我還添加了位置（Position）字段，特此說明；

總 結(jié)

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