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;
}