Discuz！模板制作教程（一）

2013-10-15 13:12| 发布者: John| 查看: 220| 评论: 0|来自: 站科论坛

摘要: 模板制造前请将你的界面设计好，并制造成html+CSS的格式。这里我就以大魔王的“蓝色经典”作为样版（学问共享，希望大魔王不要介意，如有侵权，请及时通知我）。效果图如下：（图1) 在开端前，先了引见一下di ...

模板制造前请将你的界面设计好，并制造成html+CSS的格式。这里我就以大魔王的“蓝色经典”作为样版（学问共享，希望大魔王不要介意，如有侵权，请及时通知我）。效果图如下：

（图1)

在开端前，先了引见一下discuz!的几个模板文件：
1、       header.htm --------------------------------------页面头部
2、       discus.htm---------------------------------------------------------------论坛首页
3、       footer.htm---------------------------------------------------------------页面底部
4、       viewthread--------------------------------------------------------------查看帖子内容

discuz！论坛的页面通常是几个模板文件共同作用下抵达的效果，如图1就是header.htm+discus.htm+footer.htm这三个文件共同作用的效果。
Heaer.htm对应的是：

（图2）

Footer.htm对应的是：

（图3）

剩下的就是discuz.htm文件显现的了。
当然你要将首页显现的效果就制造成一个文件模板也是能够的，这里之所以分开，是由于header.htm和footer.hmt文件通常还会被其它的模版文件援用。也就是说，其它的页面（比如发贴的页面）的头部、底部与首页的头部、底部完整一样，分开来写就能够抵达重复应用，减少劳动的效果。
下面我们就开端制造：
首先，往常我要制造的这套模板叫test，那么我就在templates目录下树立一个test目录。在test目录下再新建一个images文件夹用于寄存这套模板的图片，把切好的一切图片保管到这个文件夹中。templates/test文件夹用于寄存这套模板的htm文件，在这个目录中新建三个文件 header.htm、discuz.htm、footer.htm，翻开你设计好的主页html文件，将你想作为头部的那一段代码复制粘贴到 header.htm文件中，
相应的将作为底部的那一段代码复制粘贴到footer.htm文件中，其他的代码复制粘贴到discuz.htm文件中。
最后在discuz.htm文件的最顶部和最底部分别加上：{subtemplate header} 和{subtemplate footer}
这两句算是discuz的言语，意义是将header.htm和footer.htm文件包含进来，这样就构成了一个完好的主页面了。
接下来的工作要在论坛后台设置中来完成
（1）       进入论坛点击 “系统设置 ——> 界面——> 模板管理”，在新增模板后填入模板称号，模板文件所在目录，板权信息然后提交即可！如图4：

（图4）

（2）       在“界面——> 风格管理” 中，在新增界面风格后填入计划称号“test”然后提交即可！
（3）       提交计划称号后，您就能够在界面风格中看到您所定义的新的风格计划。如下图：

（图5）

留意上面用红色圆圈圈起来的那幅模版预览图，你的是不是没有显现出来？这需求将你的首页的效果图做成110x120并命名为preview.jpg，将这图片放到test目录下就能够了。到此，一套新的风格模板计划就添加到模板库里了，但还不是我们需求的最终效果，接下来要对模板文件继续中止
调整，以抵达想要的最终效果
（4）       点击 [编辑] 后就能够进入该模板的风格配色计划的编辑页面，依照图6把各个对应参数填入相应位置。

（图6）

填写好后，点击“提交”，更新一下缓存，阅读论坛首页呈现下图：

（图7）

呵呵，有内容出来了，可是排版上却变得乌七八糟了，这是由于还没有引入CSS文件。这时将原来设计好的CSS文件放到你模板目录下（templates/test），并将它重命名为“css_append.htm”（留意：改后的文件名是css_append，后缀名是htm）。接着翻开header.htm文件，找到你引入CSS文件的语句，这会由于引入的语句不同而不同，我这里是将这个交流为：
$rsshead
$extrahead
{subtemplate css_script}
这样就能够将你的CSS文件引入了。进入后台更新一下缓存，往常的效果图如下：

（图8）

http://www.discuz.net/thread-1906721-1-1.html