由于我进入站群的权限到期了，所以有些内容没有截图... 只能在发给我的培训资料中找一些 "合适" 的，毕竟资料上印着 保密资料 。
站群系统
该项目是为学院重建一个学院网站，第一次接触这种在站群建站的开发模式，还记得信息中心的老师一直强调 "这很简单，这很简单!"
这个站群系统采用的是 模板 + 栏目 + 资料 生成一个完整的动态站点。
动态网站与静态网站
动态网站：当用户发起请求时，服务器根请求附带的条件动态生成，并向用户展示的网站，一般以 asp ，jsp ，php 等为后缀。
静态网站：与动态网页相反，在服务器上预先写好，在收到请求时直接返回给用户的网站，一般以 html 为后缀。
动态网站含有较多脚本生成的内容，以及和数据库的交互，所以访问速度会较慢，对搜索引擎的友好程度会下降，但是相对于静态网站固定的内容而言，动态网页又能完成静态网页不及的功能。
模板
模板采用 jsp 格式，使用的是 FreeMarker 模板引擎 (这是 Java Template Engine，是做完网站之后才知道的这是啥 -_- )。
这里的模版至少需要三个：首页，列表页，内容页。
首页模版充当首页的脚手架，根据用户在首页上点击的链接，进入对应的列表页，如用户点击 "学院新闻" 栏目则进入新闻列表，或者直接进入所点击的内容详情展示页面。
模板是由 html 的页面框架 和 组件 构成 ，给的模版页面布局基本上都是 table 表格布局，已经比较老旧，模板的语法比较简单，加上该站群后台的封装，容易上手，看一下同类型的组件写法就会了，例如一篇文章的接口就包含：news.url , news.title , news.thowTitle 等等，将它们替代为文章对应部分在组件中的位置即可。
该站群的组件必须要在组件库中选择，为了方便定制，就需要选 DIV + CSS 的组件，这样就能自己修改代码，结合例如 Bootstrap 这样的框架进行定制 (我就是这样做的)。
栏目
栏目是连接模板和资料的桥梁。
在栏目页可以设置一级栏目和对应栏目下的子栏目，新建栏目可以同时自动生成资料库中相同名称和层级的资料库。通过在页面上放置 "导航组件" 可以将栏目显示在页面上。
该站群系统的栏目分为：
- 首页：一个网站只有一个首页栏目，可以建子栏目；
- 普通栏目：可以建子栏目；
- 专题栏目：不可建子栏目；
- 链接：可以建子栏目，可以链接到任意位置。
在栏目下，可以设置某个栏目的模板，以及该栏目对应的资料库 (不设置默认为同名同层的资料库)，也可以设置资料库的继承关系 (当该没有该资料库或者资料库没有所需的资料时，系统选取资料的方式，也就是同层选取还是父级选取)。
通过设置栏目是否在导航中显示，可以调整业务上或者排版上的需求。但是我的实现方式是在写模版时，规定死了只显示前9个栏目，一方面是学院说不会再调整了，另一方面，也是最重要的是，当选择了不在导航中显示时，页面中其他需要该栏目名称的时候，无法通过调用系统提供的接口将其显示。
实际情况是，我需要在某一栏目的页面中设置面包屑导航，而该栏目又不需要在主导航中显示，导致尴尬的矛盾发生，无奈下只得通过渲染模版时规定 list_index < 9 来实现隐藏该栏目。关于这一点我不知道是否还有更好的办法。
资料库
后期对站点内文章的发布，修改等操作都在这里完成，资料库还包含了轮播图等其他页面组件的资料。
资料库分为文章集和图片集。文章集和图片集的区别在于模版中调用该文章的具体内容是使用 news 还是 image，例如文章或者图片的标题分别为 news.showTitle 和 image.showTitle。
资料库中一个比较重要的部分，或者说比较重要的任务就是"文章采集"。
文章采集是类似于爬虫机制，爬取目标页面指定部分的内容，并解析，存入自己的资料库中。指定内容的方式是靠指定起始和结束的标签来完成，同时可以指定下一页的链接，或者是指定固定数量分页和有规则的 URL 地址来完成。
由于指定起始或结束的标签有时候不方便，该系统可以选择使用强大的正则来助阵。
兼容性
兼容性是我遇到的最麻烦的问题，首先要兼容到 xp ，也就是说至少要到 IE8，实际上要考虑到 IE7 ，在以前的 coding 的时候并没有过多的去考虑到兼容性的问题，最多就是在心里念叨一遍，考虑一下是不是不能用 canvas 或者 WebGL 之类的，这次算是一点亲身经历吧。
media query
这个是硬伤，不过还好解决，已经有人为其写过Respond.js来弥补 IE8 的不兼容性，BootCDN 地址奉上。translate
这个问题在于Bootstrap的轮播图插件，为了达到轮播图流畅滑行效果，Bootstrap@3为图片添加了transform-3d效果，其实这个可以使用改变margin-left的值来实现，或者直接使用JQuery的动画实现，但是由于时间原因，另外考虑到学校图书馆和办公室那些大头娃娃电脑的性能，宁愿放弃这一点。(学校领导也总是对我耳濡目染，不在乎美不美观，能用就行...)。border-radius
其实这个兼容性问题也是体现在轮播图上，轮播图下方会有一排点来表示当前图片是第几张，那些个圆圆的点就是用border-radius实现的，如果要解决，就用做好的图片来代替，也不是很必要，所以就没去抠图了。::before 与 ::after
这个影响到了字体图标了，只能用 PS 或 AI 做图标喽。
还有啥？不记得了，想起来的时候再更新吧 ... 就是这么任性。
心得
其实整个过程在站群系统的环境下完成，所以显得不是很吃力，大部分规则和接口都已经准备好，只需要开发者熟悉一下就能上手。
虽然这个站点是动态网页技术实现的，但是本身对于我来讲，并没有接触到 jsp 的一些知识点，恰当一点地说，这就是那种用 Dreamweaver 拼起来的网站 (确实在写代码的时候看到了页面有安装 DW 插件的选项)，而我理解的前端开发，已经不是 Dreamweaver 的时代了。
对于这个网站，在设计方面有挺多遗憾，一方面是时间紧，另一方面是学院领导的要求 (shĕn mĕi)，毕竟是建筑学的孩纸，对这方面多少还是挺在乎的！