模板文件css.htm制作教程 Discuz!模板文件的简单讲解

一、Discuz!模板风格制作：

1、在Photoshop中制作风格页面并切图保存；

2、制作html文档，css调整；

(相关资料图)

在制作html文件之前，您必须熟悉Discuz ! 模板的元素和css。需要注意的是，在定制您的css的时候建议您参考Discuz！模板文件css.htm来制作，这样您所制作出来的模板文件就可以方便的在Discuz !管理后台中作调整。

制作一套新的模板，其实并不需要将上面所有模板文件重新制作，只需要将几个必要的文件进行替换成您所制作的风格模板文件即可（当然，如果您觉得必要，可以将每个模板文件根据您的设计风格进行调整，只要保证模板文件中的程序结构完整），以下几个文件是一个论坛中最常用到的几个页面，对一套风格模板影响相对较大，详细如下:    css.htm                   --- CSS样式    header.htm                   --- 论坛头部    footer.htm                   --- 论坛底部    index.htm                   --- 论坛主页    viewthread.htm               --- 阅读主题    forumdisplay.htm               --- 论坛主题列表    forumdisplay_subforum.htm               --- 子论坛列表

当然刚开始接触模板制作也可以只修改其中的一部分，只要将css.htm，header.htm，footer.htm这三个文件按照您的风格制作出来就可以让模板风格作变换，其他文件也可以根据您对风格的要求进行调整。

本次演示就是只将css.htm，header.htm，footer.htm这三个文件按照演示的风格制作出来来达到模板风格的改变的。

Discuz!模板文件的简单讲解:

刚接触discuz！模板文件，您会发现在这些htm文件中包含着很多像：…………{template css}……$charset{lang memberlist}{MAINTABLECOLOR}这样6类在一般htm文件中不常见的语句和变量，这些语句是Discuz!模版中的特有语句，具体说明如下：

…………这类语句并非普通HTML中的注释语句，而是Discuz!特有的模板判断语法，就好比php或者其他语法中的 if,else,then等等。 通过这些语法，来控制一些功能的显示控制等效果。

{template ×××}这类语句是模板调用语句，比如在某个模板中，想调用另一个模板中的内容，可以通过上面的语句对其他模板文件进行调用，比如在header.htm模板文件中的{template css}，将css.htm模板文件调入。index.htm模板文件中最顶有 {template header}，最底有 {template footer}，分别调入的是header.htm和footer.htm两个模板文件，这样根据页面结构和功能的细分，使Discuz!模板的设计制作更为灵活，方便。

……这类语句为循环语句，循环执行内部程序，直到数据输出完毕结束。通过这些语句，能够达到把同一系列的资料进行循环显示效果，常见的如论坛列表、帖子列表等。

$×××这样以$开头的是Discuz! 参数和变量，一般情况下不建议修改。另外还有一些是Discuz! 固定参数，如：$seohead               后台设置的头部信息$charset               —— config.inc.php中设置语言字符集，必不可少，不能删除！$extrahead               —— 控制论坛自动跳转参数，必不可少，不能删除！{ updatesession();}         —— 更新论坛 session 表的参数，必不可少，不能删除！{ output();}           —— 结束论坛输出，必不可少，不能删除！

以上的参数以Discuz! 4.0为准，这些参数会因应不同版本而有所不同！还有一些 $××× 的也是一些参数如非插件作者或程序开发请勿乱修改！

{lang ×××}这类以lang开头的是Discuz!语言包调用语句，后面的变量可以在语言包文件中找到相对应的字段，在模板中所调用的大部分都是 templates.lang.php 文件中的，如下，左侧为模版文件中调用语句，右侧为语言包中对应字段：（用户可以根据自己的需求对语言包进行修改）{lang pm}               "pm" => "短消息"{lang admincp}           "admincp" => "系统设置"{lang memberlist}           "memberlist" => "会员"

{×××}{IMGDIR}这类括弧内大写的变量是Discuz!风格配色方案中的参数，可根据您的需要通过后台定义新的风格变量。

3、通过Discuz!管理后台新增模板：

图片和html文档制作好，css调整好以后我们就可以通过管理后台来定义新的风格了。

首先，将图片和htm模板文件上传到相应的目录，现在制作这套模板叫navyblue，那么我们就在images目录和

templates目录下分别建立一个navyblue目录。

images/navyblue文件夹用于存放这套模板的图片，把在第1步中切好的所有图片保存到这个文件夹中。

templates/navyblue文件夹用于存放这套模板的htm文件，先从templates/default/目录中复制css_append.htm、index.htm这三个文件，到这个文件夹中。

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

（1）进入论坛点击 “系统设置 ——> 界面风格 ——> 模板编辑”，在新增模板后填入模板名称，模板文件所在       目录，板权信息然后提交即可！

（2）在“界面风格 ——>界面风格” 中，在新增界面风格后填入方案名称然后提交即可！

（3）提交方案名称后，您就可以在界面风格中看到您所定义的新的风格方案。    到此，一套新的风格模板方案就添加到模板库里了，但还不是我们需要的最终效果，接下来要对模板文件       继续进行调整，以达到模板的最终效果。

（4）点击 [详情] 后就可以进入该模板的风格配色方案的编辑页面，您会发现，页面中的文本框内大部分都是空       白的，这是因为我们之前添加到 templates/navyblue 中的 css.htm 是默认模板，需要根据我们所设计的风       格把各个对应参数填入相应位置就可以了。

（5）在制作界面方案 navy blue 的时候作者自定义了几个 css，主要是用来控制用登陆信息部分的文字颜色、       背景，为了方便调整，将这些颜色和背景图片通过后台定义成变量。（{HMIMG1}－menu_left.gif，             {HMIMG2}－menu_right.gif，hmtextcolor－#FFFFFF）

注意：Discuz！管理后台的编辑界面方案功能，可以很方便的定义新的变量，用来控制设计者所定义的css式样       表，所以在写css的时候如果您需要按照您的需求来制作新的css，在后台中将您所定义的css中的颜色、       字体、字号、等参数值（宽度、高度、百分比等）定义成新的变量，这样在制作风格模板的时候方便调整

（6）需要注意的是，在 css.htm 模板文件中，需要把右侧的替换内容用这些自定义变量名来替代，这些变量才       可以起到作用。我们打开“界面风格 ——> 模板编辑”，点击 navyblue 模板后面的 [详情] ，进入模板维护界       面。

（7）您会看到，这这个页面中包含 css，footer，header 三个模板文件，这三个文件是我们之前通过 default 目       录复制过来的默认模板文件。我们要将这些文件的内容替换成我们自己的模板文件内容才可以，点击 css       后的 [编辑] 进入模板文件编辑页面，将自己定义的 css 粘贴到默认 css 模板文件。

（8）接下来，我们将自定义 css 中的颜色值和背景图片用之前在风格配色方案定义的变量替换，提交后，这样       这些变量就可以通过后台来调整了。

（9）最后一步，因为这套模板 footer 部分未作调整，只要将 header 部分替换成自己制作的内容就可以了，点       击 header 后的 [编辑] 进入模板文件编辑页面，将自己制作好的 header.htm 代码替换原始 header.htm 代码       ，提交。

（10）进入“系统设置 ——> Discuz!工具－>更新缓存”，首页－>控制面板－>编辑个人资料－论坛个性化设置      －>界面风格：选择您制作好的风格即可。

自此，整套模板的制作到此结束。如果您的编码能力比较强，模板文件这部分完全可以在 Discuz! 后台直接进行编辑，不过还是建议先在一些工具软件里编辑后检验一下，这样能避免一些不必要的错误。

二、风格的导出及安装方法：

1、风格的导出：

以上面制作好的模板风格的导出为例：

首页，“系统设置 ——> 界面风格“：点击“导出”栏下的[下载]，将导出的文件保存到命名为“showstyle”的文件夹目录下；

然后，将..   emplates下的navyblue目录下的文件拷贝到“showstyle”目录下的templates文件夹下；

其次，将..images下的navyblue目录下的文件拷贝到“showstyle”目录下的images文件夹下；

最后，将命名为“showstyle”的风格打包即可发布共享了。  （也可重新定义风格名称，此处为了方便区分将风格名称命名为showstyle）

2、风格的安装：（也是以上面导出的风格为例做一下演示）

（1）打开 discuz_style_navyblue.txt 文件，把里面所有内容复制出来，

到论坛“系统设置 -> 界面风格 -> 界面风格”内，在 “导入界面方案”内粘帖上复制出来的内容，然后点 “提交”；

（2）把风格包中的 images 内的 navyblue 目录上传到论坛目录下 images 目录内；

（3）把风格包中的 templates 内的 navyblue 目录上传并覆盖到论坛目录下 templates 目录内的 navyblue；

（4）到论坛“系统设置 -> Discuz!工具 -> 更新缓存”；

（5）首页－>控制面板－>编辑个人资料－论坛个性化设置－>界面风格：选择您制作好的风格即可。