写在前面:学校采用的webplus模式(或者叫站群,个人觉得都是一个东西),要求开发人员使用 html+css+js 原生开发,因此学校的网站不支持框架,不管是 react
还是 vue
,都是无法直接放到站群的。同时还要强调的是,html文件,必须有且仅有以下三个html文件。
main.html
listcolumn.html
displayinfo.html
下面重点讲一下后两个。
由于上面提到的webplus的限制,网站想要做出想爱特展示网那样天马行空的展示效果不被允许的。同时正好海大各个学院想要在官网上展示的东西不太多,也够用。从这一点来说,也算是相(chou)得(wei)益(xiang)彰(tou)。
这里要指出,采用站群模式的各个学院官网的 listcolumn
页在设计上非常一致,因为站群只支持做到这个地步。因此,要提醒UI的同学在涉及稿子之前,浏览各个官网 listcolumn
的样子,大概也就心里有数了。这里给出几个典型的官网。
再继续往下讲之前,需要说明一下,listcolumn 页的工作量和想要实现的效果关系很大。如果站群直接就支持这样的展示,那么就是无脑易操作;如果不支持,那就完求了 只能自己写。
通常来说,以下几种需求实现起来是比较简单的。
展示一段固定的文字,或者文字加图片(例如学院介绍)
展示新闻列表
新闻列表的样式的问题不是很大,可以用dom操作元素的 style 样式,抑或是使用css强行覆盖。
下面说几个我碰到的几个比较棘手的需求,只求能给后来者提供一些实现的思路。
通常来说,在展示的老师的时候,会希望每个老师的信息包括老师的照片、老师的姓名、研究领域、研究方式等信息。
这个需求很正常,但是问题出在站群无法提供这样的数据。
站群能提供给我们的数据只有老师的名字和一段包含老师各种信息的文本(我当时是这样的),做不到各种信息一一对应(比如姓名是什么,照片的url是什么,研究领域是什么……)。总而言之,站群无法提供信息的键值对,前端也就没有办法渲染。
我当时解决这个问题的方法是,在js文件中新建一个 teacherInfo.js
专门用来存放老师的数据。既然后台无法提供,那就写死在前端,需要渲染时从我自己的数据文件中寻找键值对渲染。