SharePoint Online 定製左側導航

　　前言

　　以前幾篇文章，都是爲你們介紹工做流相關的知識，這一篇文章，咱們先暫別工做流，定製一下左側導航，由於實在是太醜了。

　　正文

　　1.先看看咱們定製完的左側導航吧，雖然不是特別的美觀，可是！可是跟頁面看起來很協調，有木有！

　　若是你以爲這款導航很差看，其實能夠用本文的方式，定製成你喜歡的樣子

 

　　2.首先建立一個自定義列表用來保存導航，過程比較簡單就不截圖詳解了，有前面基礎的朋友，應該很容易作到，以下圖：

　　有幾點特別說一下，MenuSort是排序，ParentMenu就是子菜單的父級，爲了實現二級導航

 

　　3.用SharePoint Designer打開站點，找到母版頁，咱們選中這個母版頁，發現不能設置爲默認和自定義，說明，這個就是咱們站點如今的默認母版頁，以下圖：

 

　　4.咱們須要簽出母版頁，而後，在高級模式下編輯文件，以下圖：

 

　　5.查找左側導航的位置，用瀏覽器的開發人員工具，以下圖：

 

　　6.根據找到的ID，很容易在母版頁裏找到這個元素，以下圖：

 

　　7.咱們不要刪除默認的節點，可能會帶來未知錯誤，我這裏是隱藏默認的，添加新的元素佔位，以下圖：

　　好奇的小夥伴也能夠刪掉試試，記得備份就好

 

　　8.在頭部引用腳本和樣式，還有添加一些自定義樣式，以下圖：

　　這個樣式全局生效，只要是引用了這個母版頁的頁面都生效

 

　　9.添加主要方法，一是讀取全部項目初始化到數組裏，二是經過篩選過濾，拼成咱們須要的HTML，輸出到佔位符，三就是用layui控件初始化這個左側導航，以下圖：

 

　　結束語

　　至此，全部操做就完成了，就作成了文章第一張圖的左側導航了。其實，整個操做對於熟悉前端的小夥伴，是很是簡單的，這就是SharePoint Online的便捷性。