Discuz! 模板制作实例教程

文中档关键搜集了Discuz! 模版开发设计全过程中的一些材料, 关键包含：html撰写留意事宜, Discuz! 模版英语的语法标准, CSS拓展标准等一些开发设计文本文档材料。简述了在建设计风格的详尽步骤和开发设计全过程中必须留意的一些事宜, 使您更为便捷高效率的开展Discuz! 的模版前端开发开发设计工作中。

对 HTML 标识主要参数开展取值时，需应用双引号，比如：

 input type=”text” name=”test” value=”ok” / 

非成对比记务必以“/ ”末尾，比如：

 input type="" name="" id="" class="" … / 

在 Discuz! 的 *.htm 模版文档中，因为模版源码具有逻辑性构造，故不考虑到 HTML 自身的缩近，全部缩近均为逻辑性上的缩近构造。缩近选用 Tab 做为标记，不应用空格符。比如：

 !-- loop }-- 
  table cellspacing=”0” cellspadding=”0” border=”0” 
  tr td /td /tr 
  /table 
 !-- /loop}-- 

模版套系与设计风格差别 模版套系：统一的一类模版，集中化置放并装包的系列产品。 设计风格：运用了某一模版套系下的模版展现计划方案。 设计风格管理方法中常会量详细介绍 配对模版：相匹配的模版套系。 拓展颜色：在设计风格基本上，能够客户挑选的颜色计划方案，它相匹配 ./template/mytest/style/ 文件目录中的款式文档。全新升级建立颜色计划方案时，应在 ./template/mytest/style/ 文件目录中建八局立颜色计划方案文件目录及 CSS 文档，如 t1/style.css 。（mytest 为模版标志） 默认设置颜色：客户浏览站点时，最先见到的颜色计划方案。 默认设置小表情归类：相匹配 ”后台管理 - 页面 - 小表情管理方法“ 中常开启的小表情。 页面基本照片文件目录：设计风格基本照片储放的文件目录，在 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 文档中以 TESTCODE}方式启用。 模版文件目录构造 公共性模版文档夹（含有大部分分模版css）./mon/ 社区论坛模版文档夹./template/default/froum/ 群聊模版文档夹./template/default/group/ 室内空间佳园模版文档夹./template/default/home/ vip会员控制模块模版文档夹./template/default/member/ 模版文档夹./template/default/portal/ 模版文档夹./template/default/search/ vip会员控制模块模版文档夹./template/default/userapp/ 拓展新模版

社区论坛模版文档, 默认设置置放在 网站网站根目录 /template/default/ 下, 假如想改动默认设置模版得话, 立即改动此篇件夹下的模版就可以。

Discuz! X 程序载入模版的步骤为, 先载入当今模版套系文件目录下的模版文档, 如 yourstyle 文档夹下 文档, 假如沒有这一文档, 则全自动载入默认设置设计风格 /tempalte/default 文件目录下的 文档。这儿必须提示一下, 拓展的设计风格已不必须原先的 CSS 文档, 只必须在建一个以 extend_ 为作为前缀加源代码名的拓展 CSS 文档就可以, mon.css 文档、extend_module.css。拓展的 CSS 文档只必须添加拓展的 CSS 编码就可以！这拓展编码将在转化成缓存文件时, 全自动追加到模版缓存文件文档中。

最先在 template/ 文档夹下在建一个 yourstyle 文档夹置放模版设计风格文档, 随后拷贝 default 下的 discuz_style_default.xml, 重新命名为 discuz_style_ 你的设计风格名字.xml(留意这儿 discuz_style_ 是务必保存的)。这一文档配备的是下面的图中后台管理设计风格管理方法中配备的自变量內容。
注解：这一文档是设计风格模版套系原始化的配备文档, 在其中特定了拓展设计风格名字、 设计风格原始化 id、 设计风格模版所属文档夹和别的一些原始化主要参数, 如：全部模版的字体样式尺寸, 色调等一些通用性主要参数的配备。
改动文档中下列四个主要参数
item id="templateid" ![CDATA[1]] /item 特定原始化 templateid, 留意不必和目前安裝设计风格的id同样。
item id="tplname" ![CDATA[默认设置模版套系]] /item 特定拓展设计风格套系名字, 比如：默认设置设计风格套系。
item id="directory" ![CDATA[./template/yourstyle]] /item 特定拓展设计风格所属文档夹, 即 template 在建的 yourstyle。
item id="imgdir" ![CDATA[]] /item 特定模版设计风格基本照片储放文件目录, 默认设置应用详细地址 mon/ 文件目录, 一般只需空出。
item id="styleimgdir" ![CDATA[template/yourstyle/images]] /item 特定拓展文件目录详细地址, 空出表明无拓展照片文件目录, 假如增加照片得话能够在这里里事先手动式特定一个详细地址, 随后在此主要参数特定的文件目录下在建相匹配的 images 拓展照片文件目录。

将拓展设计风格 yourstyle 设定为当今模版套系, 因为这一文件目录下如今还没有有文档, 则默认设置启用默认设置模版 template/default/ 文档夹下的文档, 那样一个彻底和默认设置设计风格同样的拓展设计风格就创建完后。以下图：
1. 在 template 下在建一个文档夹, 置放拓展的模版设计风格文档。


2. 拓展出的文档夹名字必须和默认设置模版文档夹名字同样。留意：还可以自身取名, 可是要在模版文档中自身改动模版的相匹配文档启用, 不提议应用。
如圖, 现在我开展非常简单的改动, 此拓展设计风格只相匹配了默认设置模版 mon 中仅有一个 header.htm 文档, 换句话说在运用这套模版后, 因为它只相匹配默认设置模版 default 下边的 , 因此运用此套模版后只有读到 header.htm 头顶部模版文档, 而别的的假如沒有所有全自动启用 template/default 下的模版文档。

3. 后台管理运用拓展模版：

4. 在 header.htm 中适度部位加上一句话, 为此来检测载入当今模版的模版文档。

5. 相匹配与前台接待显示信息实际效果：

演试进行。

客户转换颜色计划方案的拓展, 它相匹配 ./template/yourstyle/style/ 文件目录中的款式文档。全新升级建立时要在 ./template/yourstyle/style/ 文件目录中建八局立如：t1/style.css 以后方可起效!
style.css 文档中头顶部的 [name]红[/name], [iconbgcolor]#BA350F[/iconbgcolor] 是用于配备后台管理中的颜色计划方案名字和名字前相匹配的显示信息色调值(选用16位制颜色),拓展时要要手动式配备所拓展的颜色计划方案的相匹配名字和显示信息色调。注解：此颜色的款式载入是在 header.htm 中依据默认设置或是客户的上一次设定相匹配载入的。

本人室内空间设计风格

本人室内空间设计风格模版默认设置置放在 ./static/space/ 文件目录下, 拓展方式和文档构造同社区论坛的拓展颜色方式基本一直。在建时在 ./static/space/ 文件目录中建八局立如：t9/style.css 以后方可起效! style.css 文档头顶部的 [name]当然[/name] 为配备模版名字项！别的的对比默认设置的室内空间设计风格文件目录文件格式置放相对的拓展室内空间设计风格文档！