全新discuz模版制作

1、模板制作前请将你的界面设计好，并制作成html+CSS的格式。这里我就以大魔王的“蓝色经典”作为样版（知识共享，希望大魔王不要介意，如有侵权，请及时通知我）。效果图如下：（图 1）本文由 HYPERLINK 整理在开始前，先了介绍一下discuz!的几个模板文件：1、header.htm页面头部2、discus.htm论坛首页3、footer.htm页面底部4、viewthread查看帖子内容discuz ！论坛的页面通常是几个模板文件共同作用下达到的效果，如图1就是 header.htm+discus.htm+footer.htm这三个文件共同作用的效果。Heaer.htm对应的是：Foot

2、er.htm对应的是:（图3）剩下的就是discuz.htm文件显示的了。当然你要将首页显示的效果就制作成一个文件模板也是可以的，这里之所以分开，是因为 header.htm和footer.hmt文件通常还会被其它的模版文件引用。也就是说，其它的页面（比 如发贴的页面）的头部、底部与首页的头部、底部完全一样，分开来写就可以达到重复利用， 减少劳动的效果。下面我们就开始制作：首先，现在我要制作的这套模板叫test，那么我就在templates目录下建立一个test目录。 在test目录下再新建一个images文件夹用于存放这套模板的图片，把切好的所有图片保存 到这个文件夹中。templates/

3、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文件包含进来，这样就构 成了一个完整

4、的主页面了。接下来的工作要在论坛后台设置中来完成（1）进入论坛点击“系统设置一一 界面一一 模板管理”，在新增模板后填入模板名称，模板文件所在目录，板权信息然后提交即可！如图4：h：而而后疝ME（2）在“界面一一 风格管理”中，在新增界面风格后填入方案名称“test”然 后提交即可！（3）提交方案名称后，您就可以在界面风格中看到您所定义的新的风格方案。如 下图：（图5）本文由 HYPERLINK 整理注意上面用红色圆圈圈起来的那幅模版预览图，你的是不是没有显示出来？这需要将你的首 页的效果图做成110 x120并命名为preview.jpg,将这图片放到test目录下就可以了。到 此，一套新的

5、风格模板方案就添加到模板库里了，但还不是我们需要的最终效果，接下来要 对模板文件继续进行调整，以达到想要的最终效果（4）点击编辑后就可以进入该模板的风格配色方案的编辑页面，按照图6把 各个对应参数填入相应位置。Discuz!Control Panel爨面-r尊畀面府置iC8理 n哩导入rmnissis别做哩做畀面片秉足51界朋蜜名作：主驱有|testMSRX左技-I弗IW麻理陛溟目.百百夺局何一膺蜘版块 Hl户帖tTJMPls目蒙 isrrLriMGDiHj: ciWiriD（图6）填写好后，点击“提交”，更新一下缓存，浏览论坛首页出现下图:if :UR Eh 心-SMi-i-33 Jf.-f

6、fJ电子宣挂Hfe奁停日. L Jpai M渤也gm M芦kw - J E 府 & 呵呵，有内容出来了，可是排版上却变得乱七八糟了，这是因为还没有引入CSS文件。这时将原来设计好的CSS文件放到你模板目录下(templates/test)，并将匕重命名为 “css_append.htm”(注意：改后的文件名是 css_append，后缀名是htm)。接着打开 header.htm文件，找到你引入CSS文件的语句，这会因为引入的语句不同而不同，我这里 是style type=text/cssimport url(css/style.css);/style 将这个替换为： $rsshead $ex

7、trahead subtemplate css_script这样就可以将你的CSS文件引入了。进入后台更新一下缓存，现在的效果图如下：（图8）这样就整齐了许多，这时你是不是发觉少了点东西？没错，图片没有显视出来。下面我们先 将背景图(也就是CSS文件中引入的图片)显示出来。打开css_append.htm文件，找到所 有你引入图片的地方，将路径替换为“STYLEIMGDIR”。例如：这里有一句： #footerpadding:1em 0;background:url(images/footer_bg.gif) 将它改为：#footerpadding:1em 0;background:url(S

8、TYLEIMGDIR/footer_bg.gif) repeat-x top; STYLEIMGDIR实际上是discuz的一个变量，当模板被解释时，就会用一个值来替换这个变 量，这个变量的值可以在后台设置。进入后台后点击“界面一一 风格管理”出现下图：Discuz!三细i找到你正在制作的test风格，点击“编辑”按钮，出现下图:Discuz!GcmiIidI Panel艮格曲IMH沦既蜡界血方器！ niJBQH!HIE砌可廉（Htifest曲比n芋（STTLLIMGDIRfr- |tnTpltn=/twEtyhwiflgE（图 10）看到了吧，当模板被解释时，就会用上面所填的路径来替换这个变

9、量。好了，现在更新缓存再看一下效果：（图 11）本文由 HYPERLINK 整理哈哈，和原来设计的效果图一样了，是否有一种成功的喜悦？虽然，到这里已经迈出了成功 的一步，但革命尚未成功，同志仍需努力！现在制作的模版是静态的，也就是说就算你发贴 了，里面的内容也不会改变的，甚至你点个连接都会出错的。下面我们就来让它“动”起来。一、修改头部文件header.htm1、打开正在制作的模板header.htm文件(以下简称header.htm)，以及默认模板 templatesdefault 的 header.htm 文件(以下简称“默认 header.htm”)。2、将 header.htm 文件的

10、标题用 $navtitle $bbname $seotitle 来代替。例如： 我这里是：“ 搜球论坛 ”改后就变成了“ $navtitle $bbname $seotitle ”3、看 header.htm 里是否有类似“ ”这样 的语句，有就删除。然后，将默认header.htm里的以下语句：复制粘贴到header.htm文件相应的位置(注这些对界面没什么影响，但对SEO优化有帮助)4、将默认header.htm里的以下语句：var STYLEID = STYLEID, IMGDIR = IMGDIR, VERHASH = ,VERHASH, charset = $charset, dis

11、cuz_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 = indexgid = pa

12、rseInt($gid)elsegid =0/if, fid = parseInt($fid), tid = parseInt($tid) 复制粘贴到header.htm文件相应的位置（至于这些有什么作用，自己查一下吧）5、将头部的logo“动”起来（图 12）找到显示logo的地方，我这里是： 搜球论坛 将“index.php”和“搜球论坛”分别用$indexname和$bbname代替（$indexname是首页文 件名的变量，$bbname是论坛名称变量，其它相同的地方都可以用这两个变量作替换，以增 加模版的适应性。）6、让登陆状态“动”起来如峥ZF1C1J砌谄出值踵泊坛任劳空司叩人中心

13、系缓瞄（图 13） 欢迎回来，zncai| 在线 | 退出| 短消息 论坛任务| 空间 个人中心 | 系统设置 上面是我设计的效果图和相应的代码，这是登陆时的显示状态，当然我还希望没登陆的时候 、工 JAZ. t=r * 这样显示：(图 14)在默认header.htm文件中找到：$discuz_usersslanglogin_invisible_modelanglogin_normal_mode|lang my_postslangspace_shortlang space_shorta href=pm.php id=pm_ntcclass=new title=lang pm_newtarge

14、t=_blanklangpm($_DCOOKIEpmnum)lang task|lang user_center 1lang modcplang admincplang logout$_DCOOKIEToginuserlang activationlang logout$reglinknamelang login用这一段代码替换上面红色黑体部份，并在的后面加上这一句：还是那句话，想知到上面代码具体的意思，只能你自己去查找，我不可能一个一个的来解释。7、让菜单“动”起来娘坛柳嚣拈。 险奖系说 天室奏摘血心潮（图 15） 搜索 聊天室 竞拍中心 帮助 导航 搜球网社区 在默认header.htm文

15、件中找到： 0 if(top = self) if ($_DCACHEsettingsframeon = 2 & !defined(CACHE_FILE) & in_array(CURSCRIPT, array(index, forumdisplay, viewthread) & ($_DCOOKIEframeon = yes & $_GETframeon !=no)|(empty($_DCOOKIEframeon) & empty($_GETframeon) top.location = frame.php?frameon=yes&referer=+escape(self.location)

16、; /if document.write( lang frameon_column); else document.write( lang frameon_flat); $navnav 0 & $moduleadminid = $adminid)-$moduleurl 0) | ($navlevel = 3 & $adminid = 1)-$navnav eval $mnid = $BASEFILENAME;eval$mnid=$navmng1;var currentMenu = $(mn_$mnid) ? $(mn_$mnid) : $(mn_$navmns0);currentMenu.pa

17、rentNode.className = ,current; function setstyle(styleid) str = unescape(echo str_replace(，urlencode($_SERVERQUERY_STRING);str = str.replace(/|&)styleid=d+/ig, );str = (str != ? str + & : ) + styleid= + styleid location.href = $BASESCRIPT? + str; $stylename 用这一段代码替换上面红色黑体部份，这样就实现了菜单的调用。 到此整个头部header

18、.htm文件模板就制作好了。二、制作首页主体部分同样打开正在制作的模板discuz.htm文件（以下简称discuz.htm），以及默认模板 templatesdefault 的 discuz.htm 文件（以下简称“默认 discuz.htm”）1、导航条|搜球论坛*首页（图 16）本文由 HYPERLINK 整理搜球论坛 首页 “搜球论坛”和“首页”分别用“$bbname”和“ lang home ”代替。2、版块列表（图 17）小叶 新手指南 新手指 南版主：a class=notabs href=space.php?username=yyshyysh/a/p2 / 2 我是 新手 yy

19、sh - 2009-6-25 17:03上面只列出了 “新手指南”区块的代码，其它区块雷同就不再列出了。在默认discuz.htm文件中找到下面这段代码：（绿色字体是我添加的注释） /循环langforum_category_modedby:$catmoderators/如果有分区版主则显示 /分区版块的收缩与展开 $catname分区名称 /这里有几个变量，简单来说是用于后台控制的， 不用细究 /如果下级子版块横排数为0则按下面版式来显示 版块列表，横排数可在后台设置的 /循环语句，循环次数为此分区的子块版块数 $forumicon /版块图标$forumname /版块转向 URL，$fo

20、rumname版块名称 (lang index_today: $forumtodayposts) /如果今日发贴数不为0则显示$forumdescription /版块简介lang forum_subforums: $forumsubforums 是否显示子版块 / 如果版主不为空 /版主以平面方式显示lang forum_moderators: $forummoderators /否则版主以下拉菜单方式显示lang forum_moderators$forummoderators N/A $forumthreads / $forumposts/ $forumthreads主题数，$forum

21、posts总发贴数 是否为私密版块lang private_forumlang url_link /显示最后发贴的信息echo cutstr($forumlastpostsubject, 30)$forumTastpostauthorlang anonymous-$forumlastpostdatelinelang never /从未发贴 /循环显示版块列表结束/如果下级子版块横排数不为0则按下面版式来显示版块列表，下面就不注 悉了，基体和上面是一样的，只是显示的方式不同而已 ! if $forumorderid $forumname (lang index_today: $forumtoda

22、yposts) lang forum_threads: $forumthreads, lang forum_posts: $forumpostslang private_forumlang forum_lastpost:$forumlastpostdatelinelang never lang url_link$catendrows/下面是关于广告的一些代码，不是重点，这里就不细究了 上面这段代码便可以罗列出区块和版块，但该如何加入到我们制作的模块中呢？首先将你设 计的显示版块列表的那些代码全部清空，然后将上面这段添加到相应的位置。这样就可以将 版块列表显示出来了，但很有可能显示的内容是乱七八

23、糟的。这是因为，你加入这段代码的 CSS类名和你原来的不一样了，这就需要你在css_append.htm文件里重新定义CSS，以达到 你想要的效果。当然你可以发现上面这段代码有些地方使用变量来作为CSS类名了，这是为 了能够在后台控制显示的样式。为了简单，这里暂不细究，你只要将这些重新命名，在 css_append.htm文件里定义就行了。3、友情链接和在线会员0*.盘DihUJitl F AM 司 L 时帆mgMIE圭璋 ，A1tit - 1 - 空剥I 斗ElRt岚口胃砌王心 QaftQfw（图 18）显示这两块的实现代码也不少，这里不再列出来分析了，因为如果你能将上面的版块列表弄 明白，

24、这两块也就自然自知怎样处理了。4、数据调用数据调用就不能像之前那样简单地从默认模版那里拷贝、粘贴就可以了。这需要利用后台才 行。在开始之前先看一下，我们要实现的效果（图 19）这里显示的内容是调用了 “我的助手”（“我的助手”属于模块脚本，而模块脚本为数据调 用模块的一种扩展，适用于懂得书写PHP模块脚本”，这里显示了所在的模块脚本。点击“我的助手”后面的“添加”出现下图，。数据调用。程序的程序员）。登陆后台“工具S密学举凯寸RAMJ!丽# IO粒眼迁用+边它，SI亍.身新用白村值密好字用H境ir呻巨11避用mu再g*tn蛭阵|小土蝴邮1 jfrfc.hi fllj彳出iktllM用株如域律叫

25、坷事K爆岭寻鞘狭L 1金舌说卜心航比止也髭虹：|ftSfrlliBRI 中I云I侦（图 20）本文由 HYPERLINK 整理“模块名称”为必填项，其它的可以不填。点击“预览”按钮，出现下图:虹 1FE HET 酒*早riirtun谢9，皇恂睥利Aim柯甘n胃岳;n总扑m叶辩斗彰SFTfHSkjW i-o档浴手，怡于中，n-mtft.FHu.USHipwsI奶*WtvW6*地胃心KW 野f 片 HlJL。月吧*Y-*W翼手11（图 21）本文由 HYPERLINK 整理将“ eval request（小叶我的助手）； ”这句拷贝下来，并按“提交”按钮；接着用 “eval request（小叶我

26、的助手）； ”这句替换相应的代码。更新一下缓存再浏览主页， 这时会发现，显示的内容和格式与想要的结果不一样。这是因为模块脚本也用它自己的模版， 像“我的助手”的模块脚本为“include/request/assistant.inc.php”文件，如果当前模 版文件夹中有request_assistant.htm文件，则“我的助手”使用当前的 request_assistant.htm文件作为模版，否则使用默认模版文件夹“templates/default/” 目录下的request_assistant.htm文件作为模版。所以，如果你要实现你自己想要的形式就 要将默认模版文件夹template

27、s/default/”目录下的request_assistant.htm文件复制 到当前模版文件夹中，并作相应的修改才行。如果要图10的效果，可以参考大魔王的“蓝 色经典”模版中的request_assistant.htm文件，值得注意的是，这个的CSS样式同样要在 css_append.htm 文件中定义。下面教大家另一种非模块脚本数据调用，这种调用包括：主题列表、版块列表、主题附件等 等。很多人喜欢在首页将贴中的图片以幻灯片的形式来显示，这属于主题附件调用，下面就 以这种调用来演示非模块脚本的数据调用。先看一下，要实现的效果：睛II甬加膈雀聊W+ 柚（图 22）images/ pic_1.

28、jpgredirect.php?goto=findpost&ptid=4&pid=12 我喜欢足球images/pic_2.jpgredirect.php?goto=findpost&ptid=3&pid=11 天下电竞将你设计的显示图片幻灯片的javascript文件（我这里是photo_show.js）拷贝到当前制 作的模版文件夹下。主题附件”，将下面的代码填到图中所示的地方。添加。数据调用。登陆后台“工具 nodeimgfilelinksubject/node（注：script language=javascript src= photo_show.js”这是你设计的 显示图片幻灯片的j

29、s文件，注意文件的路径要正确。因为我将photo_show.js这个文件放 在了“templates/test/”目录下，故 src=templates/test/photo_show.js。可能你设计 图片幻灯片显示的javascript程序并不单独放在一个js文件中，而是嵌套在html文档中。 这时，你就应该将你html文档中的javascript程序来代替“script language=javascript src=templates/test/photo_show.js/script”。）填好后，点击“预览”按钮，预览一下效果。满意后，将“evalrequest（小叶首页幻灯 图片）

30、； ”这句替换上面红色黑体那部分代码，这样就实现了图片的调用。下面分析一下其中的原理，“nodenode”可以将它看作一个循环结构， “imgfile”代表的是图片的URL， link ”代表的是附件所属帖的链接， “subject”代表的是附件所属贴的主题标题，输出的时候除了这些变量会变成相应的值 外，其它的都会原样输出，也就是说“evalrequest（小叶首页幻灯图片）； ”这个语句 在输出的时候代码结构与上面红色黑体部分的代码是一样的。既然“ evalrequest（小叶 首页幻灯图片）； ”这个语句输出的是你在数据调用编辑框中填写的代码，那么上面数据调 用编辑框中填写的代码就不是唯一的了。例如，你可以在数据调用编辑框中填写以下代码： nodeimgfilelinksubject/node当然