首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

DiscuzX 前端模板界面css加载分析

ARCHY 2015-5-27 [Discuz开发] 来自PC 复制链接
146897
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

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

Discuz! X的前端css基本上都是通过header_common.htm中的<!--{csstemplate}-->标签加载进来的。作为模板标签的一种放置在公共的头部样式中,以便每个页面都能调用到足够的样式。我这里说足够的样式,是因为Discuz! X对css也进行了模块化处理。除了公共的必须用到的样式,统一放置在./template/default/common/common.css中,其他的模块化的样式都统一放置在module.css文件中。下面我们来看看,Discuz! X是怎么对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文件加载代码。
游客,如果您要查看本帖隐藏内容请回复

  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.         .oll li { float: left; overflow: hidden; white-space: nowrap; width: 19.9%; height: 24px; line-height: 24px; }
  8.                 .oll img { vertical-align: middle; }
  9. /** 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]很熟悉呢。$_G[uid]用户ID如是否登录等,这就是加载用户自定义style风格的样式。这样所有的css就这样被加载了。不知道大家是否清楚了呢。

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



上一篇:Discuz 门户数据调用中添加自定义的表数据
下一篇:Discuz! X 模板开发中的一些基本语法分析
爱爱爱你 发表于 2015-6-14 00:34:32 来自PC
来学习啦  感谢分享
小花兒 发表于 2015-7-1 17:11:13 来自PC
强烈支持,站帮网有你更精彩
洋洋 发表于 2015-7-2 11:21:40 来自PC
强烈支持,站帮网有你更精彩
http://www.02lx.com http://www.xcyy0451.com
langcongjie 发表于 2015-7-5 17:53:52 来自PC
很给力,希望分享更多给力的帖子啊。
caocaocao 发表于 2015-7-15 14:41:03 来自PC
dddddd
巴中热线 发表于 2015-7-16 12:34:11 来自PC

学习啦,谢谢站帮分享
fdcyf 发表于 2015-7-21 13:29:42 来自PC
强烈支持,站帮网有你更精彩
wm2zfei 发表于 2015-9-8 10:17:58 来自PC
强烈支持,站帮网有你更精彩!!!
123aaa 发表于 2015-11-10 13:13:55 来自PC
Discuz! X 模板开发中的一些基本语法分析
miseu 发表于 2016-1-28 22:43:19 来自PC
很给力,希望分享更多给力的帖子啊。
honghong 发表于 2016-2-2 10:02:24 来自PC
谢谢分享!~~~~
kzhan 发表于 2016-2-9 23:16:17 来自PC
很给力,希望分享更多给力的帖子啊。
小江南 发表于 2016-2-13 01:20:44 来自PC
强烈支持,站帮网有你更精彩
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表