文件discuz,自己制作模板

篇一 图文解说教你制作dis c u z模版

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

下

图1)

在开始前先了介绍一下dis c uz!的几个模板文件

1、 heade r.htm--------------------------------------页面头部

2 、discus.htm----------------------------------------------------------

-----论坛首页

3 、footer.htm----------------------------------------------------------

-----页面底部

4 、viewthrea d----------------------------------------------------------

----查看帖子内容

1

discuz论坛的页面通常是几个模板文件共同作用下达到的效果如图1就是heade r.htm+discus.htm+footer.htm这三个文件共同作用的效果。

He aer.htm对应的是

图2

F ooter.htm对应的是

图3

剩下的就是dis c uz.ht m文件显示的了。

当然你要将首页显示的效果就制作成一个文件模板也是可以的这里之所以分开是因为header.htm和foote r.hmt文件通常还会被其它的模版文件引用。也就是说其它的页面比如发贴的页面的头部、底部与首页的头部、底部完全一样分开来写就可以达到重复利用

减少劳动的效果。

下面我们就开始制作

首先现在我要制作的这套模板叫test那么我就在templates目录下建立一个test目录。在test目录下再新建一个images文件夹用于存放这套模板的图片把切好的所有图片保存到这个文件夹中。 templates/test文件夹用于存放这套模板的 htm文件 在这个目录中新建三个文件heade r.htm、 discuz.htm、 footer.htm打开你设计好的主页

2

ht m l文件将你

想作为头部的那一段代码复制粘贴到he ade r.ht m文件中

相应的将作为底部的那一段代码复制粘贴到fo o te r.ht m文件中其余的代码复制粘贴到d is c u z.ht m文件中。

最后在discuz.htm文件的最顶部和最底部分别加上{subtemplate header}和

{subtemplate footer}

这两句算是disc uz的语言意思是将heade r.htm和footer.htm文件包含进来这样就构

成了一个完整的主页面了。

接下来的工作要在论坛后台设置中来完成

1 进入论坛点击“系统设置——界面——模板管理” 在新增模板后填

入模板名称模板文件所在目录板权信息然后提交即可如图4

图4

2 在“界面——风格管理”中在新增界面风格后填入方案名称“test”然

后提交即可

3 提交方案名称后您就可以在界面风格中看到您所定义的新的风格方案。如

3

下图

图5

注意上面用红色圆圈圈起来的那幅模版预览图你的是不是没有显示出来这需要将你的首页的效果图做成110x120并命名为preview.jpg将这图片放到test目录下就可以了。到此一套新的风格模板方案就添加到模板库里了但还不是我们需要的最终效果接下来要

对模板文件继续进行

调整 以达到想要的最终效果

4 点击[编辑]后就可以进入该模板的风格配色方案的编辑页面按照图6把

各个对应参数填入相应位置。

图6

填写好后 点击“提交”更新一下缓存浏览论坛首页出现下图

图7

呵呵有内容出来了可是排版上却变得乱七八糟了这是因为还没有引入CSS文件。这时

将原来设计好的 CSS 文件放到你模板目录下

templates/test并将它重命名为“css_append.htm”注意改后的文件名是css_append后缀名是htm。接着打开heade r.htm文件找到你引入CSS文件的语句这会因为

4

引入的语句不同而不同 我这里是<s t y letype=text/css@import url(css/style.css);</style将这个替换为

$rsshead

$ext ra he ad

{subtemplate css_script}

这样就可以将你的CSS文件引入了。进入后台更新一下缓存现在的效果图如下

图8

这样就整齐了许多这时你是不是发觉少了点东西没错 图片没有显视出来。下面我们先将背景图也就是CSS文件中引入的图片显示出来。打开css_append.htm文件找到所

有你引入图片的地方 将路径替换为“{STYLEIMGDIR}”。例如这里有一句

#footer{padding:1em0;background:url(images/footer_bg.gif) }

将它改为

#footer{padding:1em0;backgro und:url({S TYLEIMGDIR}/foote r_bg.gif) repeat-xtop;} {S TYLEIMGDIR}实际上是disc uz的一个变量 当模板被解释时就会用一个值来替换这个变量这个变量的值

5

可以在后台设置。进入后台后点击“界面——风格管理”出现下图

篇二教你Discuz模板制作详细步骤

接触D is c uz!有一段时间了使用的风格都是别人的免费品。一来自己的美工水平实在不行二来网上很少有比较完整的模板制作教程。因为工作的需要现特写了一份模板的制作教程。小弟才疏学浅不对之处还请指正。

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

图1)

在开始前先了介绍一下dis c uz!的几个模板文件

1、 heade r.htm--------------------------------------页面头部

2 、discus.htm---------------------------------------------------------------

论坛首页

3 、footer.htm---------------------------------------------------------------

页面底部

4 、viewthrea d--------------------------------------------------------------

6

查看帖子内容d is c u z论坛的页面通常是几个模板文件共同作用下达到的效果如图1就是he ader.htm+disc us.htm+foote r.htm这三个文件共同作用的效果。

He aer.htm对应的是

图2

Footer.htm对应的是

图3

剩下的就是dis c uz.ht m文件显示的了。

当然你要将首页显示的效果就制作成一个文件模板也是可以的这里之所以分开是因为header.htm和foote r.hmt文件通常还会被其它的模版文件引用。也就是说其它的页面比如发贴的页面的头部、底部与首页的头部、底部完全一样分开来写就可以达到重复利用减少劳动的效果。

下面我们就开始制作

首先现在我要制作的这套模板叫test那么我就在templates目录下建立一个test目录。在test目录下再新建一个images文件夹用于存放这套模板的图片把切好的所有图片保存到这个文件夹中。 templates/test文件夹用于存放这套模板的 htm文件 在这个目录中新建三个文件heade r.htm、 discuz.htm、 footer.htm打开你设计好的主页ht m l文件将你想作为头部的那一段代码复制粘贴到

7

he ade r.ht m文件中

相应的将作为底部的那一段代码复制粘贴到fo o te r.ht m文件中其余的代码复制粘贴到dis c uz.h t m文件中。

最后在discuz.htm文件的最顶部和最底部分别加上{subtemplate header}和{subtemplate footer}

这两句算是disc uz的语言意思是将heade r.htm和footer.htm文件包含进来这样就构成了一个完整的主页面了。

接下来的工作要在论坛后台设置中来完成

1 进入论坛点击“系统设置——界面——模板管理” 在新增模板后填入模板名称模板文件所在目录板权信息然后提交即可如图4

图4

2 在“界面——风格管理”中在新增界面风格后填入方案名称“test”然后提交即可

3 提交方案名称后您就可以在界面风格中看到您所定义的新的风格方案。如下图

图5

注意上面用红色圆圈圈起来的那幅模版预览图你的是不是没有显示出来这需要将你的首页的效果图做成110x120并命名为preview.jpg将这图片放到test 目录下就可以了。到此一套新的风格模板方案就添加到模板库里

8

了但还不是我们需要的最终效果接下来要对模板文件继续进行

调整 以达到想要的最终效果

4 点击[编辑]后就可以进入该模板的风格配色方案的编辑页面按照图6把各个对应参数填入相应位置。

图6

填写好后 点击“提交”更新一下缓存浏览论坛首页出现下图

图7

呵呵有内容出来了可是排版上却变得乱七八糟了这是因为还没有引入CSS文件。这时将原来设计好的CSS文件放到你模板目录下 templates/test并将它重命名为“css_append.htm” 注意改后的文件名是css_append后缀名是htm。接着打开he ader.htm文件找到你引入CS S文件的语句这会因为引入的语句不同而不同我这里是<style type=text/css@import url(css/style.css);</style将这个替换为

$rsshead

$ext ra he ad

{subtemplate css_script}

这样就可以将你的CSS文件引入了。进入后台更新一下缓存现在的效果图如下

9