SharePoint 往事之:使用 Bootstrap 定制 SharePoint 网站页面

用户头像
手艺人杨柳
关注
发布于: 2020 年 06 月 16 日
SharePoint 往事之:使用Bootstrap定制SharePoint网站页面

翻旧账的目的



这是一篇写于 2015 年初的文章,目的是介绍在 SharePoint On-Premise 版本中怎么合理有效的引入第三方优秀的前端框架。五年时间不短不长,但立足当下回头一望,就这么几年时间,前端技术有了很大的飞跃,当年的流行框架还在于怎么做出美观的页面,现在 React,Vue,Angular 三大着重于解决数据驱动 UI 的高效性,更有 TypeScript 的加持,从工程角度为前端开发过程进行重塑。



从 2016 年开始,Office 365,特别是 SharePoint Online 的开发技术栈也开始迁移到前端,SPFx 的出现是一个标志事件,UI 渲染完全抛弃服务器,全部在客户端完成,以前的 Server Side API 用 resulful 接口全部接管(现在又增加 GraphQL版本的接口)。到现在Teams,SharePoint Online,PowerApps 这些产品的自定义开发也全部转向 TypeScript,React 为基础的技术栈(在看了前不久 Build 大会上的 Fluid Framework Preview 的介绍后,我觉得下一代 Office 的内容呈现也会全面采用基于 Web的UI技术)。因此,偶尔会暗自庆幸从 2013 年就开始对 SharePoint 页面进行前端化,让技术认知和时代同行。



翻出这篇旧账,一个目的是为 SharePoint On-Premise 做个往事录,把过去十年在 SharePoint 上做的事情记录一下;另外一个目的,现在市面上还有很庞大的SharePoint On-Premise版本在维护,还需要基于它进行新需求的开发,如果要考虑让 SharePoint 页面的用户体验更贴近当下,可以考虑下面的解决方案。



基础知识



本文涉及以下三方面内容:



* 定义及推送母版页

* 定义及推送网站页面

* 页面中使用Bootstrap前端框架



之前遇到一些SharePoint开发圈里的朋友,特别是刚接触SharePoint开发不久的朋友,总在问一个相同的问题:如何自定义SharePoint的页面?看似一个很简单的问题,但是问题如果再往深层次挖掘,提问者一般说来是想问:



  • 如何能让一个SharePoint页面看起来不那么像SharePoint页面?

  • 如何能定制一个漂亮现代的SharePoint网页?

  • 如何能定制一个母版页(MasterPage)?

  • 如何让SharePoint页面更互联网化?

  • ……



以上看是围绕自定义页面扩展出来的的各种问题,在了解了原理之后,其实也没有复杂到哪儿去。



首先了解一下SharePoint对页面的分类:



  1. 网站页面

并不存在于服务器上某个物理路径,是通过IIS调用SharePoint的服务器端机制可以访问的页面(文件内容可能位于数据库,位于Feature目录等)。



  1. 应用程序页面

应用程序页面是服务器上磁盘上的物理文件,以SharePoint 2013为例,位于 %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\15\TEMPLATE\LAYOUTS目录下。



接着,来看看一般进行SharePoint页面自定义有哪些途径。



  1. 通过SharePoint Designer进行页面自定义。



通过SharePoint Designer工具直接修改网站页面。

优点:学习成本低,快速,见效快。

缺点:只适合于修改已经存在的页面,不利于项目或者产品的部署分发。

  1. 通过Visual Studio的SharePoint项目进行页面开发部署。

通过专业开发工具VS进行页面开发部署。

优点:一次开发,任意部署;理论上没有不可能实现的网页。

缺点:学习曲线陡;依赖专业的开发环境。



看到这儿您可能都要急了:啰嗦这么久,在SharePoint上究竟如何自定义一个网页?



嗯,之所以啰嗦是想把接下来要阐述的内容定个准确的目标:接下来要阐述的内容仅适用于使用Visual Stuido进行SharePoint网站页面的自定义开发。其实这才是真正的题目。



终于,我们来到了主题:如何自定义SharePoint网站页面?既然是网站页面,通俗说就是Web开发,那么逃不离几个元素:



  • HTML

  • CSS

  • JavaScript



而SharePoint又是基于ASP.NET技术的微软产品,所以又逃不离以下N多的概念:



  • MasterPage

  • Page

  • UserControl

  • WebPart

  • ……



我隐约记得我们是想做点儿漂亮的页面,如何能让网页更漂亮?我想列位心里都透亮透亮的:找个好美工,找个好前端,搞定!因为我们做SharePoint属于程序猿物种大类,而且可以划分为服务器端程序猿物种小类,向来和美工,前端被世人有意无意隔绝开(包括我们自己潜意识里,看到这里的SharePoint&前端大拿勿喷我,您属于超凡物种)。尘世间做漂亮网页无外乎这么几件事情:



  • 合理的网页内容布局

  • 合理的网页配色

  • 合理的交互方式



这么几件事情,我们SharePoint程序猿究竟能不能?我的回答是:能。互联网在如今发展得如火如荼,借助一些优秀的前端开发框架,SharePoint程序猿也能做出美观大方的网页,下面我们请出今天的主角:Bootstrap。



Bootstrap是谁?



Bootstrap是一个Web前端开发框架。



Bootstrap是Twitter开源的一套前端框架。



Bootstrap是最受欢迎的Web前端开发框架(没有之一,到目前2015-1-30为止,Bootstrap在github上是7.7w+ star, 2.9w+ forks)。



Bootstrap提供了一套CSS,JS帮助实现网页内容布局,页面配色,提供丰富的网页组件。在此基础上,有很多优秀的开发者贡献了自己的力量,在github上也开源了不少基于Bootstrap的页面布局,网页组件等。这些都是我们的福音。



Bootstrap主要包含三个方面的内容:



  1. 全局CSS样式



设置全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果,直白说就是页面的布局配色都帮您做好了,只需要在需要使用的地方设置css classname即可;还有先进的栅格系统。

  1. 组件

组件其实就是一组Html元素+CSS组层的可复用的代码片段,Bootstrap包含了很多可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

  1. JavaScript插件

jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件,或者逐个引入到页面中。



Bootstrap:Why me?



这节标题借用了Bootstrap的口吻说:why me?其实不然,这种前端大拿们做出来的框架才不理你,它的态度其实是:你用,或者不用,我就在这里。所以,我们得凑上去,看看为什么要选择这个优秀的前端框架来增加SharePoint网站页面的用户体验?



  1. 优秀的网页布局解决方案,这正好是不太熟悉前端开发的同学所欠缺的。通过Bootstrap的栅格系统,导航组件,页头页脚组件,能快速拼装一个页面布局。

  2. 完善的全局CSS定义。各种Html元素都有对应的CSS定义,并且自成体系,轻松配置出合理的网页配色方案。

  3. 丰富的网页组件。涵盖了常见的网页组件:下拉菜单,导航,弹出框等等,同时也是自成体系。

  4. 强大的Javascript插件。框架本身提供了丰富的基于jQuery插件格式的组件,比如我们可以使用下面很轻松的定义一个下拉菜单``$('.dropdown-toggle').dropdown();``,并能获取客户端对象模型,以便使用其中的事件,方法等。同时,还有很多优秀的开发者基于此提供了更加丰富的插件,所谓只有想不到,没有做不到。

  5. 跨平台支持,主流IE,Chrome,Firefox,Safari支持(SharePoint从2013开始,也已经做到多平台浏览器支持),妈妈再也不用担心我们陷入浏览器黑洞了。

  6. 同时,Bootstrap框架从3.0版本开始,是一个移动优先的前端框架,也就是说,只要正确合理利用了框架,我们实现的网页是大小屏默认支持。在手机浏览器打开同样的网址可以观察到,内容从PC端浏览器和手机端浏览器看上去差不多,但是内容排版上大相径庭,而页面真的就是只有一个,这就是响应式Web设计带来的好处。



它的好怎么说也说不完,我们还是在接下来使用的过程中慢慢体会。俗话说,是骡子是马,拉出来溜溜,光说不练是个假把式,下面我们就在实例案例中看看如何使用Visual Studio结合Bootstrap框架来进行SharePoint网站页面开发。



拉出来溜溜

这部分内容主要三个方面的重点:



1. 使用Visual Studio定义并推送母版页。

2. 使用Visual Studio定义并推送网站页面。

2. Bootstrap风格页面呈现。



开发环境使用Visual Studio 2013 + SharePoint 2013。



既然要溜溜,我们就来真格的:程序猿,一切以实际代码为准则。



代码下载地址:https://github.com/shuishan-tech/sharepoint.withbootstrap



定义及推送母版页

关键点:使用SharePoint的Feature schema定义来推送母版页等。



  1. 新建空模块(Module),起名字为MasterPages。

成功后目录结构下包含以下文件: Elements.xml, simple.txt, 修改simple.txt为simple.master。

打开Elements.xml, 按照以下配置修改其中内容:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="MasterPages" Url="_catalogs/masterpage/bootstrap">
<File Path="MasterPages\simple.master" Url="simple.master" Type="GhostableInLibrary"/>
</Module>
</Elements>



说明:

Module节点上的Url属性值是指网站对应的存放母版页的路径,例子中的值_catalogs/masterpage/bootstrap 表示在网站的母版页存放路径下创建一级目录,名字叫做bootstrap

File节点属性Path表示被推送文件在当前项目中得路径,例子中的MasterPages\simple.master, 前面MasterPages表示当前模块目录,由此可以引申,一个模块可以推送其他模块包含的文件。

File节点属性Url表示用户访问的文件名字,例子中和当前推送文件名一直,也可以不一致,根据需要设置。

File节点属性Type表示缓存文件的类型,由于存放母版页的是文档库,因此设置为GhostableInLibrary,把推送的文件作为文档库的一个文件缓存,也就是说会写入数据库,否则文件只是存在于Feature在服务器上的文件目录,SharePoint启动后缓存在内存里。浅显点说,如果Type=Ghostable,打开母版页文档库你看不到对应的文件项目,只有设置为GhostableInLibrary才能看到。

关于模块的具体说明请参考 [MSDN](https://msdn.microsoft.com/zh-cn/library/office/ms453137(v=office.14).aspx)。

  1. 完善母版页内容。

代码示例中创建了一个极度简单的母版页,可以说没有输出任何视觉内容,主要定义了三个PlaceHolder,用作html head区域重构,html title重构,以及html body内容填充。

定义及推送网站页面



  1. 新建空模块(Module),起名为SitePages。参考定义及推送母版页第一步。

  2. 完善网站页面内容。

例子中我们创建了一个叫做Demo.aspx的网站页面,推送到网站的SitePages目录下。此页面中重要的四部分内容:

  • 引用母版页

Demo.aspx页面的头部,我们注意到此文件引用了上一步定义的母版页。

MasterPageFile="~/_catalogs/masterpage/bootstrap/simple.master"



  • 注入html title

<asp:Content ID="ContentTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
ShuiShan Bootstrap Demo
</asp:Content>



  • 在html head区域注入资源引用

<asp:Content ID="ContentHead" ContentPlaceHolderID="PlaceHolderPageHead" runat="server">
<!-- Bootstrap Core CSS -->
<link href="~/_layouts/15/ShuiShan.SharePoint.WithBootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/_layouts/15/ShuiShan.SharePoint.WithBootstrap/css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/_layouts/15/ShuiShan.SharePoint.WithBootstrap/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</asp:Content>



  • 在html body区域注入网页内容

在body区域注入了真正视觉意义上的网页内容,使用浏览器访问此页面,body区域的内容会呈现在用户面前。



引入Bootstrap



在这里才开始介绍Bootstrap的引入,和传统的SharePoint开发一致,只需要把Bootstrap相关的资源文件存放在Layouts目录下即可,为了方便管理,不对同一服务器场的其他项目照成影响,在Layouts目录下创建了一个叫做ShuiShan.SharePoint.WithBootstrap的目录用来存放项目对应的资源文件。



我们在回过头看看代码中对于Bootstrap相关资源的引用



  • html head区域,引用样式文件

<!-- Bootstrap Core CSS -->
<link href="~/_layouts/15/ShuiShan.SharePoint.WithBootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/_layouts/15/ShuiShan.SharePoint.WithBootstrap/css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/_layouts/15/ShuiShan.SharePoint.WithBootstrap/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">



  • html body区域,引用脚本文件,执行脚本

<!-- jQuery Version 1.11.0 -->
<script src="~/_layouts/15/ShuiShan.SharePoint.WithBootstrap/js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="~/_layouts/15/ShuiShan.SharePoint.WithBootstrap/js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>



后记

  • 示例代码使用的是场解决方案,请谨慎使用。

  • 本文相关代码:https://github.com/shuishan-tech/sharepoint.withbootstrap。

  • 部署解决方案包后,示例页面的访问地址: http://yoursite/SitePages/Demo.aspx。



更多Office 365 开发和应用相关资讯,请关注公众号:

Office 365 漫谈



发布于: 2020 年 06 月 16 日 阅读数: 98
用户头像

手艺人杨柳

关注

光荣的 Debugger! 2020.04.30 加入

企业应用开发实践者。

评论

发布
暂无评论
SharePoint 往事之:使用Bootstrap定制SharePoint网站页面