Sharepoint前端 - Sharepoint站點開發 - 創建一個Site Page

Sharepoint Team Collection中有一個叫Site Pages的文件夾，這里添加的.apsx頁面其實可以被sharepoint 服務端管理並供你的sharepoint站點訪問，如Index.apsx，可以通過路徑訪問：https:/xx.yy.com/teams/TESTING/SitePages/Index.aspx.

1.創建Index.apsx

點擊New 按鈕，在Add a page表單輸入頁面的名字，並點擊Create，此時一個空頁面就創建成功了，SharePoint自動跳轉到編輯頁面。默認為Format Text，在文本框輸入你想呈現的內容即可。這里解釋一下編輯欄，Check Out，使你單獨編輯這個Team Page，你的團隊其他成員打開頁面時會知道是你在編輯；Save可以預覽效果，此時得到的頁面會包含你的站點上的樣式菜單和鏈接，如下圖右； check in使你釋放當前編輯並提交你的內容。保存發布之后，可以在Sharepoint頂部的設置下拉點擊Edit Page按鈕繼續編輯。

   

 

2.創建Web PArt

在Insert Tab，選擇Web Part，這里有很多種類的Webpart，你可以按照你的需求添加，這些web part中都可以自由編寫html，js，css以實現和當前站點資源（文件，List）的交互。此處是按添加一個表單Part.

點擊Add，成功創建一個表單web part，SP為該表單默認添加一個input 和一個button，選擇Edit Web Part->選擇Source Editor，你就可以編輯這個web part的代碼了. 我們簡單的添加一段js，一個input和一個button。

此時，點擊Save就可以看到你剛才設計的頁面了。

 

3. 深度定制SharePoint頁面

在整個頁面上，其實默認的菜單，鏈接，都是一些web part，如果你都不需要這些，而是想只呈現你所設計的頁面，此時我們建議為該頁面添加Embed Code來實現。在Insert Tab，添加Embed Code。在此處引入控制頁面默認part的隱藏的css，添加頁面設計的代碼。

我們建議在另一個Site Assets中添加css/js/html已在embed code中引用，那我們只要將對應的代碼文件發布到sites assets即可。

以下是隱藏頁面一些部分的代碼，在開發中我們可以通過審查元素發現需要隱藏的元素的id，或者class。

.s4-notdlg {
  display: none !important;
}

#suiteBar {
  display: none !important;
}

#s4-ribbonrow {
  display: none !important;
}

#s4-titlerow {
  display: none !important;
}

#sideNavBox {
  display: none !important;
}

#contentBox {
  margin:0;
  min-width: 703px;
}

#contentRow {
  padding: 0 !important;
}
#page-footer {
  display:none !important;
}
.ms-core-overlay {
  background-color: transparent !important;
}

#suiteBarDelta {
  display: none !important;
}
#suiteBarTop {
  display:none !important;
}