Discuz!X2模版教程，扩展模板创建
一、创建模板套系
1、首先进入后台 - 界面 - 模板管理，扩展制作模板时需要创建一个专属套系用来后期修改
2、基于“模板套系”可以扩展针对 ./template/default/ 目录中对的模板文件
3、创建套系的原则是不破坏原有模板基础上进行全新的扩展模板设计
实例
1.在站点根目录 ./template/中创建新的目录如" ./template/mytest"
2.在 mytest 目录中创建必要子目录与文件如：
./template/mytest/common/
./template/mytext/common/extend_common.css
./template/mytext/common/extend_module.css
其中common目录为公共模板目录，其内部新建的extend_common.css、extend_module.css为扩展型CSS文件，它们可以在./template/default/common/common.css的和module.css的基础上进行CSS代码的覆盖性扩展
如果需要替换论坛首页模板，可以新建 ./template/mytext/common/forum/discuz.htm，或复制./template/default中的对应文件放在 mytext 对应目录，以在缓存生成时覆盖原有模板缓存，达到修改模板而不破坏原生模板的目的
二、DISCUZ X2后台风格管理
进入后台 - 界面 - 风格管理
“风格管理”可以对已有风格进行风格变量的编辑，也可以基于前面创建的“模板套系”来全新开辟新的风格
三、新建风格
后台风格管理中，可以通过新增和复制原有风格进行新建风格的操作
新建风格之后，需要编辑它，调整里面的“匹配模板”为上面创建的新套系即可
四、风格管理编辑页面中重点风格常量介绍
匹配模板：对应的模板套系
扩展配色：此风格基础上可用于用户切换配色方案的扩展，它对应 ./template/mytest/style/ 目录中的样式文件。全新创建时应在./template/mytest/style/目录中建立如t1/style.css之后方能生效
默认配色：指定站点访问时，用户首先看到的配色方案
默认表情分类：对应后台 - 界面 - 表情管理中所启用的表情
界面基础图片目录：可用于更改模板图片目录，在CSS文件中使用{IMGDIR}的常量进行输出，在Discuz! X2版本之后的模板中需要使用$_G['style']['imgdir']
扩展图片目录：用来更改扩展图片目录，在CSS文件中使用{STYLEIMGDIR}的常量进行输出，在Discuz! X2版本之后的模板中需要使用$_G['style']['styleimgdir']
其他风格常量：以上没有提到风格常量，均可以在后台取得以花括号框选的常量用以在CSS文件中使用（X2以后的模板中均需要$_G['style']中对应的数组键值），涉及到CSS样式的动态变更，可以在修改对应设置如：正常字体大小 {FONTSIZE}:12px/1.5，则直接修改程序运行中CSS缓存中的值
自定义模板变量 - 新增：可以根据扩展需求，针对个性化的CSS进行全局的定义
五、CSS部分
CSS缓存存放：./data/cache/目录中，以 “style_风格自增编号_应用入口关键字_所在页面的mod值.css”形式保存
自建新套系模板文件可以通过创建 ./template/mytest/common/extend_common.css 或 extend_module.css 进行CSS扩展
/** forum::index,forum::forumdisplay **/
.mycss {font: {FONTSIZE} {FONT};}
/** end **/
1.上面的写法含义是：针对 forum 的 index 和 forumdisplay 追加一个自定义的CSS样式 "mycss" ，Discuz! 模板解析将会根据 forum::index 的关键词将 mycss 分别追加在“./data/cache/style_2_forum_index.css”和“./data/cache/style_2_forum_forumdisplay.css”中(里面的数字2，根据新增的风格编号而定)
2.这样的写法好处就是，不变更默认模板的情况下有效的扩展CSS，并可以很好的进行多站点移植
Discuz! X系列产品中 CSS 文件会在缓存时按照以下顺序进行合并：
1.template/default/*.css 文件
2.当默认模版是非默认模版时，template/模版目录/extend_*.css 文件 或 template/模版目录/*.css
3.当某插件启用时，source/plugin/插件目录/template/extend_*.css 文件
因此非默认模版目录中的 CSS 属性将继承默认模版中的 CSS 属性，插件目录中的 CSS 文件将继承前二者的 CSS 属性
CSS 自身的集成顺序为：当 CSS 属性名称相同是，CSS 文件中，写在后面的替换前面的代码
CSS书写规范
1.属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间须有空格，例如：.class { width: 400px; height: 300px; }
2.属性的书写顺序：
1.针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;
2.按照元素模型由外及内，由整体到细节书写，大致分为五组：
1.位置：position,left,right,float
2.盒模型属性：display,margin,padding,width,height
3.边框与背景：border,background
4.段落与文本：line-height,text-indent,font,color,text-decoration,...
5.其他属性：overflow,cursor,visibility,...
3.谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式
4.选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl -> Clearfix
5.勿使用冗余低效的 CSS 写法，例如：ul li a span { ... }
6.慎用 !important
7.建议使用在 class/id 名称中的词语
1.表示状态：a->active
2.表示结构：h->header,c->content,f->footer
3.表示区域：mn->main,sd->side,nv-navigation,mu->menu
4.表示样式：l-list,tab,p_pop
常用CSS
左浮动、右浮动
.z { float: left; }
.y { float: right; }
因为左右浮动造成的父级浮动溢出，及使用方法
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }
<div class="cl">
<div class="z"></div>
</div>
大标题字体
.wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; }
行内分割竖线
.pipe { margin: 0 5px; color: #CCC; }
文字字体大小
.xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; }
.xs1 { font-size: 12px !important; }
.xs2 { font-size: 14px !important; }
.xs3 { font-size: 16px !important; }
灰色文字
.xg1, .xg1 a { color: {LIGHTTEXT} !important; }
.xg1 .xi2 { color: {HIGHLIGHTLINK} !important; }
.xg2 { color: {MIDTEXT}; }
高亮文字，1为橙色，2为蓝色
.xi1, .onerror { color: {NOTICETEXT}; }
.xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK} ; }
文字粗体
.xw0 { font-weight: 400; }
.xw1 { font-weight: 700; }
层下边线
.bbda { border-bottom: 1px dashed {COMMONBORDER}; }
.bbs { border-bottom: 1px solid {COMMONBORDER} !important; }
去除边框
.bw0 { border: none !important; }
.bw0_all, .bw0_all th, .bw0_all td { border: none !important; }
去除背景
.bg0_c { background-color: transparent !important; }
.bg0_i { background-image: none !important; }
.bg0_all { background: none !important; }
外边距样式
.mtn { margin-top: 5px !important; }
.mbn { margin-bottom: 5px !important; }
.mtm { margin-top: 10px !important; }
.mbm { margin-bottom: 10px !important; }
.mtw { margin-top: 20px !important; }
.mbw { margin-bottom: 20px !important; }
内边距样式
.ptn { padding-top: 5px !important; }
.pbn { padding-bottom: 5px !important; }
.ptm { padding-top: 10px !important; }
.pbm { padding-bottom: 10px !important; }
.ptw { padding-top: 20px !important; }
.pbw { padding-bottom: 20px !important; }
DIY模块模板语法详解
基本语句
[loop]...[/loop]标签来循环显示模块中的数据；如果要在模板中多处循环可以使用[loop1]...[/loop1]的方式扩展（只能扩展1-9个）
[order=N]...[/order]标签来替代默认loop中的第N个位置数据的展示，你可以使用[order1=N]...[/order1]的方式来扩展（对应[loop1]，只能扩展1-9个）
其中：[order=odd]为奇数行，[order=even]为偶数行
[index=N]...[/index]的方式来指定第N条数据的展示方式，由该语法指定的数据不再在loop循环中出现，可以通过[index1]...[/index1]的方式来扩展（只能扩展1-9个）以实现同一条数据多处展示
通用变量
当前数据的链接地址：{url}
当前数据的标题：{title}
当前数据的图片地址：{pic}
当前数据的简介：{summary}
当前数据顺序：{currentorder}
当前数据是否在奇数行：{parity}，奇数行为1，偶数行为0
可设置打开方式的链接：<a href="{url}"{target}>{title}</a>
可设置缩略图大小的图片：<img src="{pic}" width="{picwidth}" height="{picheight}" />
特殊字段变量
在PHP数据类的fields方法中定义的变量都可以使用，如帖子类有{author}，{authorid}，{forumname}，{dateline}等等
变量只在[loop]、[order]、[index]标签内生效
以上内容共享给朋友们，你也可以做自己的模板，即使不去做，在修改模板的时候看一下这个文档也是对你帮助多多的，跟帖支持一下吧~
|
上一篇： DX1.5 DX2 漂亮的悬浮Tip制作教程下一篇： Tools 1.9M for Discuz X 20110727 更新: 整合搬家助手
|
