DiscuzX前端界面css加载分析Discuz! X1.5

对于Discuz! X1.5的前端界面来说，相信有很多用户都有需要修改的需求，对于不熟悉Discuz! X1.5模板结构的人来说，往往当修改前台样式的时候无从下手，下面我就给大家介绍一下Discuz! X1.5是如何加载它的css文件的。

对于一个前端人员来说，discuz的前端代码应是很值得学习与借鉴的。

Discuz! X1.5的前端css基本上都是通过header_common.htm中的<!--{csstemplate}-->标签加载进来的。作为模板标签的一种放置在公共的头部样式中，以便每个页面都能调用到足够的样式。我这里说足够的样式，是因为Discuz! X1.5对css也进行了模块化处理。除了公共的必须用到的样式，统一放置在./template/default/common/common.css中，其他的模块化的样式都统一放置在module.css文件中。下面我们来看看，Discuz! X1.5是怎么对css进行模块化处理的。

1. function loadcsstemplate() {
   
2.                 global $_G;
   
3.                 $scriptcss = '<link rel="stylesheet" type="text/css" href="data/cache/style_{STYLEID}_common.css?{VERHASH}" />';
   
4.                 $content = $this->csscurmodules = '';
   
5.                 $content = @implode('', file(DISCUZ_ROOT.'./data/cache/style_'.STYLEID.'_module.css'));
   
6.                 $content = preg_replace("/\[(.+?)\](.*?)\[end\]/ies", "\$this->cssvtags('\\1','\\2')", $content);
   
7.                 if($this->csscurmodules) {
   
8.                         $this->csscurmodules = preg_replace(array('/\s*([,;:\{\}])\s*/', '/[\t\n\r]/', '/\/\*.+?\*\//'), array('\\1', '',''), $this->csscurmodules);
   
9.                         if(@$fp = fopen(DISCUZ_ROOT.'./data/cache/style_'.STYLEID.'_'.$_G['basescript'].'_'.CURMODULE.'.css', 'w')) {
   
10.                                 fwrite($fp, $this->csscurmodules);
    
11.                                 fclose($fp);
    
12.                         } else {
    
13.                                 exit('Can not write to cache files, please check directory ./data/ and ./data/cache/ .');
    
14.                         }
    
15.                         $scriptcss .= '<link rel="stylesheet" type="text/css" href="data/cache/style_{STYLEID}_'.$_G['basescript'].'_'.CURMODULE.'.css?{VERHASH}" />';
    
16.                 }
    
17.                 $scriptcss .= '{if $_G[uid] && isset($_G[cookie][extstyle])}<link rel="stylesheet" id="css_extstyle" type="text/css" href="$_G[cookie][extstyle]/style.css" />{elseif $_G[style][defaultextstyle]}<link rel="stylesheet" id="css_extstyle" type="text/css" href="$_G[style][defaultextstyle]/style.css" />{/if}';
    
18.                 return $scriptcss;
    
19.         }
    

复制代码

这个函数主要负责了对缓存中css的读取工作。所以我们在header_common.htm中没有见到<link rel="stylesheet" type="text/css"href=" " />这样的css文件加载代码。

这个函数返回的是return $scriptcss;这个变量里面封装了我们需要的css文件。

首先是加载了，当前模板套系下的common.css文件

$scriptcss = '<link rel="stylesheet" type="text/css"href="data/cache/style_{STYLEID}_common.css?{VERHASH}" />';

而Discuz! X1.5是怎么实现对模块化的css进行读取的呢，我们打开module.css文件，经常会发现形如:

1. /** forum::index **/
   
2. .chart { padding-left: 22px; background: url({IMGDIR}/chart.png) no-repeat 0 50%; }
   
3. /* 公告 #an --> announcement */
   
4.         #an li { white-space: nowrap; }
   
5.                 #anc { height: 20px; overflow: hidden; }
   
6. 
   
7. /* 在线会员列表 */
   
8.         .oll li { float: left; overflow: hidden; white-space: nowrap; width: 19.9%; height: 24px; line-height: 24px; }
   
9.                 .oll img { vertical-align: middle; }
   
10. /** end **/
    

复制代码

这样的模块化css,这种模块化的css是被单独加载的。只有在/**forum::index **/定义的模块里才会生效。这样避免了冗余css的加载。下面我们来看这段代码：

1. $content = $this->csscurmodules = '';
   
2.                 $content = @implode('', file(DISCUZ_ROOT.'./data/cache/style_'.STYLEID.'_module.css'));
   
3.                 $content = preg_replace("/\[(.+?)\](.*?)\[end\]/ies", "\$this->cssvtags('\\1','\\2')", $content);
   
4.                 if($this->csscurmodules) {
   
5.                         $this->csscurmodules = preg_replace(array('/\s*([,;:\{\}])\s*/', '/[\t\n\r]/', '/\/\*.+?\*\//'), array('\\1', '',''), $this->csscurmodules);
   
6.                         if(@$fp = fopen(DISCUZ_ROOT.'./data/cache/style_'.STYLEID.'_'.$_G['basescript'].'_'.CURMODULE.'.css', 'w')) {
   
7.                                 fwrite($fp, $this->csscurmodules);
   
8.                                 fclose($fp);
   
9.                         } else {
   
10.                                 exit('Can not write to cache files, please check directory ./data/ and ./data/cache/ .');
    
11.                         }
    
12.                         $scriptcss .= '<link rel="stylesheet" type="text/css" href="data/cache/style_{STYLEID}_'.$_G['basescript'].'_'.CURMODULE.'.css?{VERHASH}" />';
    
13.                 }
    

复制代码

这段代码将对应模板套系下的module.css引入，然后通过$content = preg_replace("/\[(.+?)\](.*?)\[end\]/ies","\$this->cssvtags('\\1','\\2')", $content);分别将每个模块化的css写入到每个模块的缓存css文件中，然后程序会自动根据当前模块加载相应的css代码。这样就完成了代码的模块化封装和按需加载，避免了冗余加载。

这个函数还有最后一段让我们来看看

1. $scriptcss .= '{if $_G[uid] && isset($_G[cookie][extstyle])}<link rel="stylesheet" id="css_extstyle" type="text/css" href="$_G[cookie][extstyle]/style.css" />{elseif $_G[style][defaultextstyle]}<link rel="stylesheet" id="css_extstyle" type="text/css" href="$_G[style][defaultextstyle]/style.css" />{/if}';
   

复制代码

你是否对$_G[uid]很熟悉呢。呵呵没错，这就是加载用户自定义style风格的样式。这样所有的css就这样被加载了。不知道大家是否清楚了呢。

具体的加载过程，如果你对程序了解的话去看看，你懂得。

希望多一些此类教程

很NX啊

x

很不错哦

www.43sq.com友情支持