CSS and Javascript 重新整理和优化

• since Seagull 0.6.3

还记得每个seagull主题(文件夹)中的style.php文件吗？我们开发一种新方法，这种方法可以“优化”Javascript和CSS文件。优化器位于”SGL_WEB_ROOT/optimizer.php”.

如何调用优化器:

• 在mgr中和以前一样添加CSS,JS文件,如

          $output->addCssFile('themes/theme/css/my.css') or 
          $output->addJavascriptFile('js/my.js') 

• 在你的主题(文件夹)中的header.html模板文件中，添加以下几行

          <link rel="stylesheet" type="text/css" 
          href="{makeCssOptimizerLink()}" /> 
          <script type="text/javascript" src="{makeJsOptimizerLink()}"></script> 

这样就行了。

它是什么工作的：

• optimizer 接收要加载的文件名和文件类型(css or javascript),
• 它检查文件是否修改,

      o 如果末被修改, 它就直接让浏览器使用缓存

• 如果文件被修改过，它会将所有指定的文件创建成一个文件(将这些文件的内容输出到一个文件，只是在一个请求中输出它们的内容，并确保下次浏览器使用缓存来接收这个文件。
• 对于CSS的”优化”，我们也加载了csshelpers.php(在SGL_WEB_ROOT/themes中)，这个文件中的函数(辅助方法)可以在CSS中使用,如isBrowserFamily.

但是两边都会发生缓存的¹⁾.优化器确保浏览器在缓存存在时为相应的文件使用缓存.但是浏览器本身也会缓存整个optimizer link的内容,所以即使服务顺端的文件发生了变化浏览器却只会使用旧的缓存的内容,因为浏览器实在太酷了.要避免这个问题,我们为optimizer link添加了修正号,这样浏览器每次请求的是不一样的URL((不会使用缓存了),这样确保CSS/JS发生变化时被载入更新.注意:

• “csshelpers.php” 只不过是旧的 “vars.php” 和 “helpers.php”的替代物
• 我们不需要开启/关闭优化的功能,这个功能对调试有效(如,关掉优化,那么每个文件是要分开的.
• 在你的CSS文件中不要使用import语句,使用PHP的include.

最后,事实上优化器并没做任何优化.当然可以将它改进成动态压缩Javascript代码,gzip或其它的格式.CSS也一样,比如删除所有的无用的空格.但是这个特性应该是在开启或关闭功能实现后来实现,否则将无法调试,所以我们也就给你留了一些工作.

我想你们大家都认为GL_WEB_ROOT/js有点乱,里面的函数有点多余.我们修改了.现在所有的Seagull Javascript文件要么放在模块的各个的js目录或者是SGL_WEB_ROOT/js/SGL.那里还有些基本的库文件,不过几乎没什么东西了,所以我们就开始发布(生成),如从我们的私人项目移植.注意:

• 值得阅读 (有可能已经关闭了) http://trac.seagullproject.org/ticket/1468,
• 所有旧的Javascript文件(如 “mainPublic.js”)被移到”SGL_WEB_ROOT/themes/default_admin/js”目录, 正如你所认为的那样,这样做是为了兼容不同版本的”default_admin”主题.
• “js/SGL.js” 文件应该总是载入-它是Seagull的主要的Javascript文件(也就是旧的 “global.js”).

在我看来,这是最大的改进.其实它最初被我们称作default2,没有人认为我必须做将两个步骤.首先我要说的是default主题的外观没有变化.它是完全一样的,只是CSS代码完全不一样了.想要了解新实现方法,请看http://www.contentwithstyle.co.uk/Articles/17/a-css-framework/.Mike Stenhouse就是那个我们把他的方法集成到seagull中的那个人.主要的观点是使用开发新的主题更加容易.我们使用模块来将CSS划分多个文件,每个文件做它自己的事情.默认的CSS文件列表如下:

• “themes/default/css/reset.css”,
• “themes/default/css/tools.css”,
• “themes/default/css/typo.css”,
• “themes/default/css/forms.css”,
• “themes/default/css/layout.css”,
• “themes/default/css/blocks.css”,
• “themes/default/css/common.css”.

同时我们在default2主题中提供了16中布局.目前默认的布局是layout-navtop-3col.css.如果你需要你可以创建自己的主题.

• 修改”typo.css” 和 “forms.css” (颜色,字体,大小 –相关的东西)
• “layout.css” 是你主要要修改的地方 (header, footer 等)
• 随便选择一个布局

请注意,你并不需要对主模板做优修改.目前所有可用的布局的主模板都是一样的.进一步说,目前的master.html是专门为了对搜索引擎(SEO)和屏幕阅读器而特地设计的.

• 先是内容
• 然后是版块(block)
• 最后才是导航菜单

所就让它们从我们的页面读取最有用的东西吧.要为某个特定的action修改布局,只需在代码中添加下列几行:

$output→masterLayout = 'layout-navtop-2col.css';

不然的话SGL会使用默认的布局,一些需要注意的地方:

• 目前SGL的默认CSS文件在SGL_Output::makeCssOptimizerLink()写死,我们正在寻找一个最好的方法以让用户可以配置它,这样你就载入你的全局文件列表.
• 一样的默认的布局layout-navtop-3col.css也是在SGL_Output::makeCssOptimizerLink()写死的,所以如果你不指直接指定,你会使用默认的布局,我们也正在寻找一个更好的方法来提供一个配置的途径.
• 旧的default1主题可以”SGL_WEB_ROOT/themes/default1”找到
• 所有模块的模板文件仍然是来自default1这个主题 ,所有新的文件可以在”SGL_WEB_ROOT/themes/default”找到,一旦我们解决了上述的问题我想我们会使用新的文件替换模块中的文件.