[精]DISCUZ模板教程

4、 将默认 header.htm 里的以下语句： <script type="text/javascript">var STYLEID = '{STYLEID}', IMGDIR = '{IMGDIR}', VERHASH = '{VERHASH}', charset = '$charset', discuz_uid = $discuz_uid, cookiedomain = '$cookiedomain', cookiepath = '$cookiepath', attackevasive = '$attackevasive', allowfloatwin = '$allowfloatwin', creditnotice = '{if $creditnotice}$creditnames{/if}', {if in_array(CURSCRIPT, array('viewthread', 'forumdisplay'))}gid = parseInt('$thisgid'){elseif CURSCRIPT == 'index'}gid = parseInt('$gid'){else}gid = 0{/if}, fid = parseInt('$fid'), tid = parseInt('$tid')</script> <script type="text/javascript" src="include/js/common.js?{VERHASH}"></script> 复制粘贴到 header.htm 文件相应的位置（至于这些有什么作用，自己查一下吧） 5、 将头部的 logo“动”起来
Discuz 模板教程
接触 Discuz! 有一段时间了，使用的风格都是别人的免费品。一来自己的美工水平实在不 行，二来网上很少有比较完整的模板制作教程。因为工作的需要，现特写了一份模板的制作 教程。小弟才疏学浅，不对之处还请指正。 模板制作前请将你的界面设计好，并制作成 html+CSS 的格式。这里我就以大魔王的 “蓝色经典”作为样版（知识共享，希望大魔王不要介意，如有侵权，请及时通知我）。效 果图如下：
（图 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：
（图 13） <div id="umenu"> <ul> <li> <span class="quicklink_login">欢迎回来，<a href="space.php?uid=1" class="noborder">zncai</a>| <span id="loginstatus"><a href="member.php?action=switchstatus" title="我要隐身 ">在线</a></span>| <a href="logging.php?action=logout&formhash=7edab246">退出</a></span>| <a href="pm.php" id="pm_ntc" target="_blank">短消息</a> <a id="task_ntc" href="task.php" target="_blank">论坛任务</a>| <a href="http://127.0.0.1/UCenter_Home/space.php?uid=1" target="_blank">空间</a> <a href="memcp.php">个人中心</a>|
（图 6） 填写好后，点击“提交”，更新一下缓存，浏览论坛首页出现下图：
（图 7）
呵呵，有内容出来了，可是排版上却变得乱七八糟了，这是因为还没有引入 CSS 文件。这时 将原来设计好的 CSS 文件放到你模板目录下（templates/test），并将它重命名为 “css_append.htm”（注意：改后的文件名是 css_append，后缀名是 htm）。接着打开 header.htm 文件，找到你引入 CSS 文件的语句，这会因为引入的语句不同而不同，我这里 是<style type="text/css">@import url(css/style.css);</style>将这个替换为： $rsshead $extrahead {subtemplate css_script} 这样就可以将你的 CSS 文件引入了。进入后台更新一下缓存，现在的效果图如下：
（图 4）
（2） 在“界面——> 风格管理” 中，在新增界面风格后填入方案名称 “test”然后提交即可！
（3） 案。如下图：
提交方案名称后，您就可以在界面风格中看到您所定义的新的风格方
（图 5）
注意上面用红色圆圈圈起来的那幅模版预览图， 你的是不是没有显示出来？这需要将你的首 页的效果图做成 110x120 并命名为 preview.jpg，将这图片放到 test 目录下就可以了。到 此，一套新的风格模板方案就添加到模板库里了，但还不是我们需要的最终效果，接下来要 对模板文件继续进行 调整，以达到想要的最终效果 （4） 点击 [编辑] 后就可以进入该模板的风格配色方案的编辑页面，按照 图 6 把各个对应参数填入相应位置。
（图 12） 找到显示 logo 的地方，我这里是： <div class="logo"><a href="index.php">搜球论坛</a></div> 将“index.php”和“搜球论坛”分别用$indexname 和$bbname 代替 （$indexname 是首页文 件名的变量，$bbname 是论坛名称变量，其它相同的地方都可以用这两个变量作替换，以增 加模版的适应性。） 6、 让登陆状态“动”起来
（图 8）
这样就整齐了许多，这时你是不是发觉少了点东西？没错，图片没有显视出来。下面我们先 将背景图（也就是 CSS 文件中引入的图片）显示出来。打开 css_append.htm 文件，找到所 有你引入图片的地方，将路径替换为“{STYLEIMGDIR}”。例如：这里有一句： #footer{padding:1em 0;background:url(images/footer_bg.gif) } 将它改为： #footer{padding:1em 0;background:url({STYLEIMGDIR}/footer_bg.gif) repeat-x top;} {STYLEIMGDIR}实际上是 discuz 的一个变量， 当模板被解释时， 就会用一个值来替换这个变 量，这个变量的值可以在后台设置。进入后台后点击“界面——> 风格管理”出现下图：
（图 1)
在开始前，先了介绍一下 discuz!的几个模板文件： 1、 header.htm --------------------------------------页面头部 2、 discus.htm--------------------------------------------------------------论坛首页 3、 footer.htm--------------------------------------------------------------页面底部 4、 viewthread-------------------------------------------------------------查看帖子内容 discuz！论坛的页面通常是几个模板文件共同作用下达到的效果，如图 1 就是 header.htm+discus.htm+footer.htm 这三个文件共同作用的效果。 Heaer.htm 对应的是：