模板管理系统总结.pdfVIP

模板管理系统使用说明 一、 发展史及产生背景 之前的代码管理方式 在模板管理系统出现之前，我们网站一直采用统一管理的方式进行管理。其 中有一个名为global.css 的文件，它负责存储所有的CSS 样式。 模板管理系统出现的原因 global.css 文件随着网站的壮大越来越大，维护困难，代码混乱，修正困难， 于是被老板臭骂一顿，说我们吃干饭的啊！于是，yy 在强哥，硕哥，波波哥的 协助下，用两个星期的时间写出了今天的模板管理系统。 二、 模板管理系统的思路 模板管理系统分为几个部分，template 管理，widget 管理，样式文件，一句 话提示，code 发布等。以上为主要的模块。 系统的管理思路是：一个页面建立一个template，每个template 由 多个widget 组成。每个widget 中的CSS 样式最后会汇总到样式文件中。每个模 板有一个layout，包含的widget 则是这个layout 的一部分。 一句话提示，是组内部用于简单通信的方式，可以指定一个或多个人发 送一句话提示。 Code 发布，是我们在更新过服务器上的某些资源后，用于刷新。 三、 页面加载widget的方法 加载原理 每个template 中包含widget 的名称，当template 加载的过程中就会加载相 应widget 中的HTML 和CSS 代码。 widget 的最新升级和相应作用 通过升级，widget 现在有版本区别，其作用为： ·可以找回某一时刻widget 的记录，方便恢复。 ·因为widget 可能用于不同的模板，而每个模块的进度有可能不同，这样就 可以用版本来统一widget 的使用，保持进度的正确性。 四、 页面CSS 概况 网页css 构成 ： ·每个template 的layout 有一段CSS 样式 ·每个widget 有自己的CSS 样式 ·网站会有自己默认的CSS 样式，例如reset 文件 网页加载原则： ·首先，将网站的default 样式打印出来； ·然后将template 自身layout 的样式打印出来； ·再将每个widget 的样式按顺序打印出来； ·再打印skin 的样式，控制此网页的皮肤风格等； ·最后打印lang 的样式，即语言样式，控制网页的语言状况。 五、 页面JS 效果的控制 （待修正） 肢解原则： 如果只出现在首页里，则写在widget 里更方便。不到迫不得已不要修改JS 代码，肢解JS 的目的是为了避免页面其他部分出现问题。 六、 在模板管理系统中工作的步骤、注意事项及实例 工作步骤： 新建模板 （*主要是模板的layout） widget version=0litb-header/widget /*template 的头，不是widget*/ widget version=0 main-nav/widget /*template 的主要*/ div id= wrapper class=widget(具体见 “添加widget eg”)/div widget version=0 litb-footer/widget /*template 的页脚，不是widget*/ 添加widgets （*head，foot不算widget） eg： div id= wrapper class=widget div id=”wrapper-l” widget version=0 name/widget widget version=0 name /widget widget version=0 name /widget /div div id=”wrapper-r-l” widget version=0 name /widget widget version=0 name /widget /d