模板制作
===========================================
前言介绍您在开始进行社区模板的设计之前,有必要了解一下我们模板开发设计的方式,将使得您设计出更加规范的模板,对于前端工程师而言,也有助于形成良好的编码习惯,实现自身能力的提升。如果您有意编写 Discuz! 社区模板,请按照先后顺序仔细阅读本文档,以避免造成一些代码文件上的重复和结构的不合理,下面我讲为大家具体的介绍一些快捷的对模板进行扩展修改的方法和一些注意事项!
HTML
所有HTML标记参数赋值需使用双引号包含,例如,应当使用
- <input type=”text” name=”test” value=”ok” />
复制代码
而绝对不能使用
- <input type=text name=test value=ok />
复制代码
在任何情况下,产品中的模板文件必须采用手写HTML代码的方式,而绝对不能使用DreamWeaver、FrontPage等自动网页制作工具进行撰写或修改。 非成对标记必须以“/>”结尾,如 、<input …/>,<input /> 标记的属性必须按照以下顺序书写:
- <input type="" name="" id="" class="" … />
复制代码
语法缩进
在Discuz!的*.htm模板文件中,由于具备逻辑结构,故不考虑任何HTML本身的缩进,所有缩进均意为着逻辑上的缩进结构。缩进采用TAB方式,不使用空格作为缩进符号,仅需适当断行即可。例如:
- <!--{loop $threadlist $thread}-->
- <table cellspacing=”0” cellspadding=”0” border=”0”>
- <tr><td>$thread[message]</td></tr>
- </table>
- <!--{/loop}-->
复制代码
模板套系与风格区别- 模板套系:统一的一类模板,集中放置并打包的系列。
- 风格:应用某个模板套系,并改变其中变量设置的一个方案。
风格管理编辑页面中重点风格常量介绍- 匹配模板:对应的模板套系。
- 扩展配色:此风格基础上可用于用户切换配色方案的扩展,它对应 ./template/mytest/style/ 目录中的样式文件。全新创建时应在./template/mytest/style/目录中建立如t1/style.css之后方能生效。
- 默认配色:指定站点访问时,用户首先看到的配色方案。
- 默认表情分类:对应后台 - 界面 - 表情管理中所启用的表情。
- 界面基础图片目录:可用于更改模板图片目录,在CSS文件中使用{IMGDIR}的常量进行输出,在Discuz! X2版本之后的模板中需要使用$_G['style']['imgdir']。
- 扩展图片目录:用来更改扩展图片目录,在CSS文件中使用{STYLEIMGDIR}的常量进行输出,在Discuz! X版本之后的模板中需要使用$_G['style']['styleimgdir']。
- 其他风格常量:以上没有提到风格常量,均可以在后台取得以花括号框选的常量用以在CSS文件中使用(X2以后的模板中均需要$_G['style']中对应的数组键值),涉及到CSS样式的动态变更,可以在修改对应设置如:正常字体大小 {FONTSIZE}:12px/1.5,则直接修改程序运行中CSS缓存中的值。
- 自定义模板变量 - 新增:可以根据扩展需求,针对个性化的CSS进行全局的定义。
模板套系模板文件存储结构- 公共模板文件夹(内含大部分模板css)./template/default/common/
- 论坛模板文件夹./template/default/froum/
- 群组模板文件夹./template/default/group/
- 空间家园模板文件夹./template/default/home/
- 会员模块模板文件夹./template/default/member/
- 首页模板文件夹./template/default/portal/
- 首页模板文件夹./template/default/search/
- 会员模块模板文件夹./template/default/userapp/
扩展新模板如果你想直接在默认模板的基础上修改的话那就到 网站根目录/template/default/ 目录下面直接修改文件就可以了,论坛所有的模板都放在这个文件夹下! Discuz! X程序读取模板的机制是,读取当前模板套系目录下的模板文件,如yourstyle文件夹下common/header.htm文件,如果没有这个文件,则自动读取默认风格/tempalte/default目录下的common/header.htm文件。这里需要提醒一下,扩展的风格不再需要原来的css文件,只需要新建一个以extend_为前缀加源文件名的扩展css文件即可,例如:extend_common.css文件、extend_module.css这里面只需要加入你自定义的扩展css文件即可!这部分代码将在生成缓存css时,自动追加到你当前模板的common.css缓存文件中。
|