Discuz-x系列教程 DX的css命名规则、缓存、加载机制

Discuz-x系列教程 DX的css命名规则、缓存、加载机制,第1张

Discuz-x系列教程DX的css命名规则、缓存、加载机制

在DISCUZ-x版本号中,对css的解决方案比之前的版本号更加智能化和系统化。为了更好的让大量同学有一个充分的了解,我们特意整理了《黎明破晓》的资料发给大家。

最先,每一个网页页面都是会载入下列2个相近的css:
data/cache/style_1_common.css
data/cache/style_1_forum_index.css

一、2个文件名的命名规范

style_1_common.css
|--是整站源码通用性的全局性css,因此取名为【style_1_common.css】
|--前边的编号是当今应用这套设计风格的ID,因此style_1_common.css也就是第一套设计风格的同用的css

style_1_forum_index.css
|--是【forum】城市广场BBS频道主页的css样式,那麼forum和index各自相匹配这CURSCRIPT和CURMODULE的变量定义值,这一在每一个频|--道的通道脚本制作里都是有界定,例如forum频道网页页面相匹配的是forum.php。

之上详细介绍的是css的缓存载入文件,自然,也有一些在独特网页页面的css,这儿也不详细说明了。

这两个css文件的生成

最先,那两个css是程序流程生成的css缓存文件,因此假如要改css得话,不可以立即改那2个文件,不然一升级缓存,以前的修改就失效了。
拿内置的default模板举例说明吧,default模板中,含有一个common的文件夹,这一文件夹储放的是全局性模板文件,
里边有css文件:
style_1_common.css是【common.css】生成的缓存
style_1_forum_index.css是【module.css】生成的缓存

二、module.css的缓存和载入体制

开启module.css,能够见到有那样的表明

复制代码编码以下:
/**forum::index**/城市广场频道:主页css代码刚开始
这儿是css代码
/**end**/城市广场主页css代码完毕

这就是常常在模板中采用的分辨,程序流程载入这一css文件的內容,根据标志开展分辨,最终把满足条件内的全部css生成在一个相匹配的缓存文件中。

再举个事例:
/**forum::index,forum::viewthread**/城市广场频道:主页控制模块和贴子阅读页CSS编码刚开始
这儿是css代码
/**end**/完毕
第二个事例大伙儿应当知道,便是再提升一个标准,这儿能够不仅2个:
/**forum::index,forum::viewthread,forum::forumdisplay,XXXX**/

ok,依据自身的必须加进来就可以了,还记得标记【,】
大伙儿能够参考这一学习培训一下,包含你要拓展他,都能够立即在里面立即加上就可以。

下边讲下缓存css是怎样生成的

common.css非常简单,便是立即载入,随后生成到data/cache文件目录下。

每一个频道控制模块单独的css,会先将module.css在data/cache下生成一个相匹配的设计风格id下的缓存的css,随后如果你浏览某一频道时,会生成相匹配频道下的css,这时,刚刚详细介绍的这些标志就起功效了。程序流程会依据/**group::index**/和/**end**/这类标志,分拆出什么频道、什么控制模块该必须什么css。

程序流程一部分也不详细介绍了,程序流程的编码关键在source/class/class_template.php文件解决,有兴趣爱好的同学们能够深入分析一下。


三、在模板制做中充足的应用好css载入体制,提升网页页面的载入速率

新创建模板后学生们能够在【模板文件夹\common】中创建额外css样式表并取名为:
extend_module.css
extend_common.css
这两个css文件便是彻底改变common.css与module.css里边的款式,这两个额外款式与上边讲的两个css文件各自合拼,最后就生成css缓存文件了

extend_module.css这里边务必依据上边第二节里讲的,写好标志!!

假如想彻底改变默认设置模板中的一些css,那麼立即在这里2个文件中调用就可以了。

留意:假如你的模板合理布局是彻底要调用的,那么就取名为:common.css和module.css那样程序流程就只解决新模板中的css,不容易与default里边的合拼了

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/773906.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-03
下一篇 2022-05-03

发表评论

登录后才能评论

评论列表(0条)

保存