Discuz 模板风格制作:
1 、在 Photoshop 中制作风格页面并切图保存;
2 、制作 html 文档,css 调整;
在制作 html 文件之前,您必须熟悉 Discuz ! 模板的元素和 css 。需要注意的是,在定制您的 css 的时候建议您参
考 Discuz!模板文件 css.htm 来制作,这样您所制作出来的模板文件就可以方便的在 Discuz ! 管理后台中作调整。
制作一套新的模板,其实并不需要将上面所有模板文件重新制作,只需要将几个必要的文件进行替换成您所制作的风格模板文件即可 (当然,如果您觉得
必要,可以将每个模板文件根据您的设计风格进行调整,只要保证模板文件中的程序结构完整),以下几个文件是一个论坛中最常用到的几个页面,对一套风格模
板影响相对较大,详细如下:
1 、 header.htm ---页面头部
2 、 discus.htm ---论坛首页内容部分
3 、 index_header.htm ---头部发帖按钮,和公告内容页。
4 、 footer.htm --- 页面底部
5 、 viewthread.htm --- 查看帖子内容
6 、 css_common.htm ---公共样式 css 样式页面
7 、 css_script.htm ---其他常用 css 样式页面
8 、 viewthread.htm --- 阅读主题
9 、 forumdisplay.htm --- 论坛主题列表
10 、 forumdisplay_subforum.htm --- 子论坛列表
当然刚开始接触模板制作也可以只修改其中的一部分,只要将 css.htm,header.htm,footer.htm 这三个文件按照您的风格制作出来就可以让模板风格作
变换,其他文件也可以根据您对风格的要求进行调整。
Discuz! 模板文件的简单讲解:
刚接触 discuz!模板文件,您会发现在这些 htm 文件中包含着很多像:
<!--{if $discuz_uid}-->……<!--{else}-->……<!--{/if}-->
{template css}
<!--{loop $plugins['links'] $plugin}-->……<!--{/loop}-->
$charset
{lang memberlist}
{MAINTABLECOLOR}
这样 6 类在一般 htm 文件中不常见的语句和变量,这些语句是 Discuz! 模版中的特有语句,具体说明如下:
<!--{if ×××}-->……<!--{else}-->……<!--{/if}-->
这类语句并非普通 HTML 中的注释语句,而是 Discuz! 特有的模板判断语法,就好比 php 或者其他语法中的 if,else,then 等等。 通过这些语法,来控制一些功能的显
示控制等效果。
{template ×××}
这类语句是模板调用语句,比如在某个模板中,想调用另一个模板中的内容,可以通过上面的语句对其他模板文件进行调用,比如在 header.htm 模板文件中的
{template css},将 css.htm 模板文件调入。 index.htm 模板文件中最顶有 {template header},最底有 {template footer},分别调入的是 header.htm 和
footer.htm 两个模板文件,这样根据页面结构和功能的细分,使 Discuz! 模板的设计制作更为灵活,方便。
<!--{loop ×××}-->……<!--{/loop}-->
这类语句为循环语句,循环执行内部程序,直到数据输出完毕结束。通过这些语句,能够达到把同一系列的资料进行循环显示效果,常见的如论坛列表、帖子列表
等。
$×××
这样以 $开头的是 Discuz! 参数和变量,一般情况下不建议修改。另外还有一些是 Discuz! 固定参数,如:
$seohead 后台设置的头部信息
$charset —— config.inc.php 中设置语言字符集,必不可少,不能删除!
$extrahead —— 控制论坛自动跳转参数,必不可少,不能删除!
{lang ×××}
这类以 lang 开头的是 Discuz! 语言包调用语句,后面的变量可以在语言包文件中找到相对应的字段,在模板中所调用的大部分都是 templates.lang.php 文件中的
,如下,左侧为模版文件中调用语句,右侧为语言包中对应字段:(用户可以根据自己的需求对语言包进行修改)
{lang pm} 'pm' => '短消息'
{lang admincp} 'admincp' => '系统设置'
{lang memberlist} 'memberlist' => '会员'
{×××}
{IMGDIR} 这类括弧内大写的变量是 Discuz! 风格配色方案中的参数,可根据您的需要通过后台定义新的风格变量。
3 、通过 Discuz! 管理后台新增模板:
图片和 html 文档制作好,css 调整好以后我们就可以通过管理后台来定义新的风格了。
首先,将图片和 htm 模板文件上传到相应的目录,现在制作这套模板叫 test,那么我们就在 images 目录和
templates 目录下分别建立一个 test 目录。
images/test 文件夹用于存放这套模板的图片,把在第 1 步中切好的所有图片保存到这个文件夹中。
templates/test 文件夹用于存放这套模板的 htm 文件,先从 templates/default/目录中复 css.htm 、 header.htm 、
footer.htm 这三个文件,到这个文件夹中。
接下来的工作都要在论坛后台设置中来完成
(1) 进入论坛点击 「界面——> 模板管理」, 在新增模板后填入模板名称,模板文件所在目录,板权信息然后提交即可!
(2) 在 「界面 ——> 风格管理」 中,在新增界面风格后填入方案名称然后提交即可!
(3) 提交方案名称后,您就可以在界面风格中看到您所定义的新的风格方案。
到此,一套新的风格模板方案就添加到模板库里了,但还不是我们需要的最终效果,接下来要对模板文件继续进行调整,以达到模板的最终效果。
(4) 点击 [详情] 后就可以进入该模板的风格配色方案的编辑页面,您会发现,页面中的文本框内大部分都是空白的,这是因为我们之前添加到
templates/test 中的 css.htm 是默认模板,需要根据我们所设计的风格把各个对应参数填入相应位置就可以了。
(5) 在制作界面方案 navy blue 的时候作者自定义了几个 css,主要是用来控制用登陆信息部分的文字颜色、背景,为了方便调整,将这些颜色和背景图片
通过后台定义成变量。 ({HMIMG1}-menu_left.gif,{HMIMG2}-menu_right.gif,hmtextcolor-#FFFFFF)
注意:Discuz!管理后台的编辑界面方案功能,可以很方便的定义新的变量,用来控制设计者所定义的 css 样式表,所以在写 css 的时候 如果您需要按照
您的需求来制作新的 css,在后台中将您所定义的 css 中的颜色、字体、字号、等参数值 (宽度、高度、百分比等) 定 义成新的变量,这样在制作风格模 板的时
候方便调整
(6) 需要注意的是,在 css.htm 模板文件中,需要把右侧的替换内容用这些自定义变量名来替代,这些变量才可以起到作用。我们打开 「界面 ——> 模
板管理」,点击 test 模板后面的 [详情] ,进入模板维护界面。
(7) 您会看到,这这个页面中包含 css,footer,header 三个模板文件,这三个文件是我们之前通过 default 目录复制过来的默认模板文件。我们要将这些
文件的内容替换成我们自己的模板文件内容才可以,点击 css 后的 [编辑] 进入模板文件编辑页面,将自己定义的 css 粘贴到默认 css 模
板文件。
(8) 接下来,我们将自定义 css 中的颜色值和背景图片用之前在风格配色方案定义的变量替换,提交后,这样这些变量就可以通过后台来调
整了。
(9) 最后一步,因为这套模板 footer 部分未作调整,只要将 header 部分替换成自己制作的内容就可以了,点击 header 后的 [编辑] 进入模板文件编
辑页面,将自己制作好的 header.htm 代码替换原始 header.htm 代码,提交。
(10) 进入 「工具 ——> 更新缓存」,在前台选择你做好色风格浏览就可以了。
自此,整套模板的制作到此结束。如果您的编码能力比较强,模板文件这部分完全可以在 Discuz! 后台直接进行编辑,不过还是建议先在一些工具软件
里编辑后检验一下,这样能避免一些不必要的错误。