discuzX3.4模板缓存及CSS缓存分析

discuzX3.4模板缓存及CSS缓存分析
模板缓存
模板缓存存放：所有的模板缓存均被解析成php文件存放在 ./data/template 中，以 “数字_模板标示符组合.tpl.php”形式保存页面缓存刷新原理：当开发者编辑过模板文件之后，Discuz! 模板解析器会匹配模板htm文件与缓存php文件的最后修改时间，如过模板html文件较新或无缓存文件，则更新或生成缓存，不新，则不采取任何动作手动删除此目录的缓存不会影响Discuz!系统的整体运行，Discuz! 模板缓存仍然会进行自动生成

CSS缓存
CSS缓存存放：./data/cache/目录中，以 “style_风格自增编号_应用入口关键字_所在页面的mod值.css”形式保存自建新套系模板文件可以通过创建 ./template/mytest/common/extend_common.css 或 extend_module.css 进行CSS扩展其中这两个文件的CSS样式脚本会通过 Discuz! 模板解析将风格常量统一赋值进去并合将CSS脚本复制出来放入 ./template/default/common/common.css 和 module.css 所对应的缓存中去，方便站点运行时引用extend_module.css 系统解析与缓存存放：其中可以使用下面的书写方法：/** forum::index,forum::forumdisplay **/.mycss {font: {FONTSIZE} {FONT};}/** end **/上面的写法含义是：针对 forum 的 index 和 forumdisplay 追加一个自定义的CSS样式 "mycss" ，Discuz! 模板解析将会根据 forum::index 的关键词将 mycss 分别追加在“./data/cache/style_2_forum_index.css”和“./data/cache/style_2_forum_forumdisplay.css”中(里面的数字2，根据新增的风格编号而定)这样的写法好处就是，不变更默认模板的情况下有效的扩展CSS，并可以很好的进行多站点移植

CSS 继承规范
Discuz! X系列产品中 CSS 文件会在缓存时按照以下顺序进行合并：template/default/*.css 文件当默认模版是非默认模版时，template/模版目录/extend_*.css 文件 或 template/模版目录/*.css当某插件启用时，source/plugin/插件目录/template/extend_*.css 文件因此非默认模版目录中的 CSS 属性将继承默认模版中的 CSS 属性，插件目录中的 CSS 文件将继承前二者的 CSS 属性CSS 自身的集成顺序为：当 CSS 属性名称相同是，CSS 文件中，写在后面的替换前面的代码


模板文件如何生成

访问 http://127.0.0.1/forum.php?mod=xxx  根据mod xxx找到对应调用的php

以index为例

调用source/moduel/forum/forum_index.php

在这个php里面调用template方法

include template('diy:forum/discuz:'.$gid); 对应为 /template/模板名/forum/discuz.htm


template方法部分内容

1. $cachefile = './data/template/'.(defined('STYLEID') ? STYLEID.'_' : '_').$templateid.'_'.str_replace('/', '_', $file).'.tpl.php';
   
2.         if($templateid != 1 && !file_exists(DISCUZ_ROOT.$tplfile) && !file_exists(substr(DISCUZ_ROOT.$tplfile, 0, -4).'.php')
   
3.                         && !file_exists(DISCUZ_ROOT.($tplfile = $tpldir.$filebak.'.htm'))) {
   
4.                 $tplfile = './template/default/'.$filebak.'.htm';
   
5.         }
   
6. 
   
7.         if($gettplfile) {
   
8.                 return $tplfile;
   
9.         }
   
10.         checktplrefresh($tplfile, $tplfile, @filemtime(DISCUZ_ROOT.$cachefile), $templateid, $cachefile, $tpldir, $file);
    
11.         return DISCUZ_ROOT.$cachefile;

复制代码

$cachefile 内容为 ./data/template/6_diy_forum_discuz.tpl.php  

checktplrefresh函数 为检查原来模板文件 /template/模板名/forum/discuz.htm  更新时间是否大于         6_diy_forum_discuz.tpl.php  重新生成tpl文件

这些tpl文件删除之后每次刷新页面都会重新生成  



关于css问题

在源文件/template/模板名/forum/discuz.htm 里面

       <!--{template common/header}-->

        在common/header_common.htm里有这么一个东西

       <!--{csstemplate}-->

        它在模板解析的时候会被替换为

        $template = preg_replace("/[\n\r\t]*\{csstemplate\}[\n\r\t]*/ies", "\$this->loadcsstemplate()", $template);

        调用loadcsstemplate()

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]) && strpos($_G[cookie][extstyle], TPLDIR) !== false}<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文件

1. <link rel="stylesheet" type="text/css" href="data/cache/style_6_common.css?Wvn" /><link rel="stylesheet" type="text/css" href="data/cache/style_6_forum_index.css?Wvn" /><script type="text/javascript">

复制代码

其中common.css是公用的  为forum_index.css生成是根据module.css根据规则生成的

  我们看一下 部分原始的module.css  

1. /** forum::index **/
   
2. #pt .y { width: 550px; height: 29px; overflow: hidden; }
   
3. #chart { margin-bottom: 5px; }
   
4.         .chart { padding-left: 22px; background: url({IMGDIR}/chart.png) no-repeat 0 50%; color: {LIGHTTEXT}; }
   
5.                 .chart em { color: {TABLETEXT}; }
   
6. /*
   
7.         Name:                        mod_announcement
   
8.         Level:                        Function
   
9.         Explain:                公告。放置在不同位置时注意调整 #anc, #an li 的高度
   
10.         Last Modify:        Pony 1203191111
    
11. */
    
12.         #an { margin-bottom: 5px; }
    
13.                 #an dt { display: none; }
    
14.                 #an li { float: right; clear: both; width: 526px; text-align: right; }
    
15.                         #an li span { float: left; width: 450px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    
16.                         #an li em { float: left; width: 75px; color: {LIGHTTEXT}; }
    
17.                         #anc, #an li { height: 29px; overflow: hidden; }
    
18.                         #anc i { font-style: italic; }
    
19. 
    
20. /* 在线会员列表 */
    
21.         .oll li { float: left; overflow: hidden; white-space: nowrap; width: 19.9%; height: 24px; line-height: 24px; }
    
22.                 .oll img { vertical-align: middle; }
    
23. 
    
24. /* 论坛首页热点 by Pony */
    
25.         .heat { width: 370px; }
    
26.         .heatl { padding-left: 15px; margin-left: 385px; background: url({IMGDIR}/vline.png) repeat-y 0 0; }
    
27. 
    
28. /* 论坛首页四格 by Alice */
    
29.         #category_grid { padding: 0; border-top:1px solid {COMMONBORDER}; }
    
30.                 #category_grid table { width:100%;table-layout: fixed; }
    
31.                         #category_grid td { width: 25%; }
    
32.                 .category_l1, .category_l2, .category_l3, .category_l4 { line-height: 25px; background: #fff; overflow: hidden; }
    
33.                         .category_l1 { line-height: normal; }
    
34.                 .category_l1, .category_l2, .category_l3 { background: url({IMGDIR}/category_lbg.png) no-repeat right center; }
    
35.                         .ie6 .category_l4 { margin-right: -3px; }
    
36.                         .slidebox_grid { position: relative; margin: 10px; border: 1px #ccc solid; }
    
37.                         #category_grid h4 { width:100%; height: 30px; line-height: 30px; text-indent:10px; font-size: 12px; cursor: pointer; background: url({IMGDIR}/tb.png) repeat-x; position:relative; }
    
38.                 .category_newlist { padding: 10px; }
    
39.                         .category_newlist li { background:url({IMGDIR}/dot.gif) no-repeat left center;  height: 21px; line-height:21px; overflow: hidden; padding-left:10px; }
    
40.                         #category_grid h4 span { background:#CDCDCD; width:1px; height:30px; display:inline-block; position:absolute; left:0; top:0; }
    
41.                         #category_grid h4 span.tit_newimg { background:#FFF; }
    
42.                         #category_grid .newimgbox:hover h4 span, #category_grid .subjectbox:hover h4 span, #category_grid .replaybox:hover h4 span, #category_grid .hottiebox:hover h4 span, #category_grid .goodtiebox:hover h4 span { width:6px; background:url({IMGDIR}/grid.png) no-repeat 0 0;transition:width 0.2s ease 0s; overflow:hidden; }
    
43.                         #category_grid .newimgbox:hover h4 span.tit_newimg { background-position:0 -30px; }
    
44.                         #category_grid .subjectbox:hover h4 span.tit_subject { background-position:0 0; }
    
45.                         #category_grid .repalybox:hover h4 span.tit_replay { background-position:0 -30px; }
    
46.                         #category_grid .hottiebox:hover h4 span.tit_hottie { background-position:0 -60px; }
    
47.                         #category_grid .goodtiebox:hover h4 span.tit_goodtie { background-position:0 -90px; }
    
48. /** end **/

复制代码

其中开头结尾 /** forum::index **/   /** end **/ 这一部分 会被追加到 forum_index.css里面

转载于:https://my.oschina.net/u/153475/blog/345494