dz模板开发教程
discuz模版教程

第1步:进入版块内点击右上角的DIY(如下图,注:静态化无法DIY,请取消静态化)第2步:拉好框架(先放3:1的,再将后两个框架放入其中)如下图所示(下面说的都无需再拉多个框架,这一步已把该拉的红框都拉好了):第3步:设好红框(就是指向出现红色的框架,在这我将其称为红框)的样式参数(如下图,对比看说明)图中1:边框,请将默认的【大小】改成0(因为这样不会显示边框线,不选则会显示官方默认的边框线)图中2:边框一定要为0,这样是最大化,0和不填是不一样的!图中3:边框一定要为10,这样是和下方框体的距离,若填0则会连在一起!图中4:此处请一定不要选择【无边框框架】否则你用TAB框架则在标题加链接时会成白色,留空不选即可!第4步:先DIY右边的。
请拉一个红框的框架到图中右边的框架内,然后点击样式,如图:图中1:边框线颜色为:1PX。
我用的是粉红色!根据自己的爱好选色!图中2:上为0(但官方默认的是1PX的距离,所以该处请填0,其它的请设置为1)第5步:红框的边框线,粉红的(如下图)图中1:请设为4PX(想更粗请设大点)图中2:左10PX(是与左边的框架保持10PX的距离,要不会连在一起)第6步:拉一个论坛类的帖子模块放在上一步设置好的红框内,点样式设置参数(如下图)图中1:链接字体,12PX是官方默认的,可以留空。
后面的是字体颜色!图中2:请选边框为0,也可以留空(这里和红框不一样,留空也不会有官方的默认边线)。
图中3:外边距设置和内边距有所不一样,自己理解,请看图中设置,假如你把图中右10PX 输入到下面的内边距的话,标题就偏了~最好这样搞!图中4:内边距的下2PX是为了对平左边框架,所以才设置为2,你可以根据右边的边框线对平(这里请善用QQ截图功能,最后我会教你如何用QQ截图进行DIY较正)第7步:标题,我在这用的方法是不正规设置方法,主要是考虑到美化,用的是图片(看下图)图中1:你看错了,那不是空的,是在智能ABC(我打五笔的)输入V+1这是空格白键,无字体的,但是会有字体一样,因为官方是默认无字体的话是无法设置标题的,所以用这招骗过官方!图中2:图片路径,为不平铺!0K,左边的DIY完成,先讲到这,顶的人多,再教你DIY另一边的~最后说一下我DIY用到的常用工具:1:QQ截图,我设置了快键(ALT+Q)方便截图及对齐边框,效果如下,自己理解。
dz模版制作教程

Discuz!模板制作教程接触Discuz! 有一段时间了,使用的风格都是别人的免费品。
一来自己的美工水平实在不行,二来网上很少有比较完整的模板制作教程。
因为工作的需要,现特写了一份模板的制作教程。
小弟才疏学浅,不对之处还请指正。
模板制作前请将你的界面设计好,并制作成html+CSS的格式。
这里我就以大魔王的“蓝色经典”作为样版(知识共享,希望大魔王不要介意,如有侵权,请及时通知我)。
效果图如下:(图1)在开始前,先了介绍一下discuz!的几个模板文件:1、 header.htm --------------------------------------页面头部2、 discus.htm---------------------------------------------------------------论坛首页3、 footer.htm---------------------------------------------------------------页面底部4、 viewthread--------------------------------------------------------------查看帖子内容discuz!论坛的页面通常是几个模板文件共同作用下达到的效果,如图1就是header.htm+discus.htm+footer.htm这三个文件共同作用的效果。
Heaer.htm对应的是:(图2)Footer.htm对应的是:(图3)剩下的就是discuz.htm文件显示的了。
当然你要将首页显示的效果就制作成一个文件模板也是可以的,这里之所以分开,是因为header.htm和footer.hmt文件通常还会被其它的模版文件引用。
也就是说,其它的页面(比如发贴的页面)的头部、底部与首页的头部、底部完全一样,分开来写就可以达到重复利用,减少劳动的效果。
下面我们就开始制作:首先,现在我要制作的这套模板叫test,那么我就在templates目录下建立一个test目录。
Discuz模板制作教程

近几天做了几套模板先将心的整理一下发给大家以供各位参考借鉴。
在做模板之前大家最好具备一些基本的网页制作方面的知识。
那么咱们先来看看如何制作一套简单的模板流程。
1、在Photoshop中制作风格页面并切图保存;2、制作html文档,css调整;在开始前,先了介绍一下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样式页面首先我们要制作的这套模板叫test,那么我就在templates目录下建立一个test目录。
在test目录下再新建一个images文件夹用于存放这套模板的图片,把切好的所有图片保存到这个文件夹中。
templates/test 文件夹用于存放这套模板的htm文件,首先我们先到default默认模板下面去复制header.htm、discuz.htm、footer.htm这三个htm文件。
然后分别打开着三个文件,可能这里你需要一些常用的htm语言常识,和一些基本的css语法。
如果你不会的话可以去查阅一些资料。
我们大多时候我们不必完全去重新做。
默认模板的head等头部信息我们还是非常有必要要保留。
将你做好的静态文件的切图我ps缩小成一个110X120大小名为preview.jpg的图片放到test目录下(这是后台安装界面显示的缩略图)。
接下来的工作要在论坛后台设置中来完成(1)进入论坛点击“系统设置——> 界面——> 模板管理”,在新增模板后填入模板名称,模板文件所在目录,板权信息然后提交即可!如(3)然后切换到“系统设置——> 界面——>风格管理”,您就可以在界面风格中看到您所定义的新的风格方案。
TEA的DZ论坛模板制作教程

TEA的DZ论坛模板制作教程学习制作风格之一 - 前期图片附件是一份我制作的风格的PSD原文件。
仅供大家了解有关制作风格图片的方法你可以把PSD文件一层层的拆开来看来了解当你明白了风格中所必须的图片,然后制作好,并且进行相应的配色。
那么就可以对图片进行切割,成为风格元素之一风格图片。
下一课将告诉你有关模板制作及修改的方法。
有能者可以对这个PSD制作成一个完整的风格,希望你能发布出来给大家看看^^PS:PSD附件见本PDF文档附件框学习制作风格之二 - 新增风格和摸板图片制作以后,我们应该想想风格的名字了。
这个,很简单啦!喜欢怎样都可以~ 我把这个风格叫 Game Nara所以我的目录名就叫 gamenara(图片和模板都一样)1, 把所有图片保存到一个目录中,例如:gamenara ,然后把这个 gamenara 目录放到论坛 images 目录下。
即:images/gamenara2, 在templates目录中新建一个gamenara目录,然后复制templates/default/目录中的css.htm、header.htm、footer.htm到gamenara中,即templates/gamenara内有css.htm、header.htm、footer.htm三个文件。
3,进入论坛点系统设置 -> 界面风格 -> 模板编辑在新增后填入对应资料模板名字字符集所在目录版权信息gamenara gb2312 ./templates/gamenara xxxxxxx(你自己的版权信息)然后提交即可!如图:家园BLOG[]家园BLOG[]家园BLOG[]家园BLOG[]家园BLOG[]家园BLOG图片附件: style_001.gif (2005-10-17 17:26, 13.49 K)4, 点界面风格下的界面风格在新增后填写风格名字,如: Gamenara 然后提交。
再次回到界面风格画面中点这个新增的风格的[详情]进入风格配色方案。
discuz论坛搭建及模板修改过程--仅限给新手

此文谨献给新手,请高手飘过discuz论坛搭建及模板修改过程看此文前提要懂点html跟css,不然看了估计也不会太懂。
建站就要有源程序,有了源程序要让别人看到,怎样才能看到呢?买域名空间,买了域名空间别人还是看不到,要怎么做?上传源程序,安装,调试,工作正常就是一站了。
(此处是废话,看下边)第一步:域名空间就不说了,最好备案哈,貌似论坛也得备案。
弄源程序传到空间内,确定是gbk还是utf8的,下面有用(前提域名解析好)第二步:输入域名类似:/ install/ 转到install目录下,按提示安装,要是不会配置就到官网看下,其实很明白的,只是本文的重点不在这里。
第三步:安装成功后会有提示,下面就是模板了,这个是本文的重点,以下不再分步骤了,别用鸡蛋砸我(从小作文不好,语句不连贯)一般安装好后都是那个蓝色的模板,我看起来感觉不是太好看,相信大多人也有想换皮肤的感觉,好,我们这就找皮肤去一般来说我们会在chinaz上找或者到dz上找,dz上好的大多收费,所以我们google下dz论坛风格,应该还能搜出来不少的,呵呵,看你喜欢哪一种,下载前看好版本号,本文以dz7为例,版本号不对是不成的,需要修改好多地方,所以还是先看好版本号再下,另外看是gbk还是utf8的,这个影响也比较大,都会出现乱码,让你找不到北,所以还是谨慎点,(模板覆盖前做好备份,省的出现问题了不好补救)。
我的论坛是utf8的,风格还真不好找,找了好几天也没找到合适的,最后自己在别人的基础上修改了一个,哎,想来想去,还是劝大家直接装gbk的吧,不然后期麻烦多多。
说说几个重要的文件:header.htm这个文件跟名字一样包含了头部的信息,meta标签信息,及js代码包含还有个人信息导航,可根据需要修改,这个一般不需修改,meta额外标签可以在后台直接添加,js这个可以根据需要在模板里添加。
css_common.htm 这个文件是整体的样式表,基本上都集中在这里,可以根据需要自己修改,如果想给body的scrollbar 加点颜色,在指定html的doctype的情况下是没有作用的,告诉你一个小方法,可以在doctype声明上面加点注释,例如<!--注释信息-->这样就起作用了,呵呵,无意中发现的。
discuz模板使用教程

竭诚为您提供优质文档/双击可除discuz模板使用教程篇一:discuzx3.x模板插件开发制作教程(从入门到精通)一、开发插件所需资料与工具1、discuzx3插件机制插件机制discuz!拥有一套完整的插件机制。
合理使用插件机制,你可以更好的将自己的个性功能需求整合到discuz!产品中的同时,保持代码独立,并且不受后续discuz!产品版本升级的影响。
我们鼓励并推荐,使用插件机制进行个性需求定制和研发。
插件设计的准备工作插件实现流程开始编写社区插件,您应当首先对插件实现的流程有一个大致的了解,以下是我们推荐的插件编写流程:熟练使用discuz!社区系统后,对希望完善或补充的个性化功能进行评估,进而提出插件的功能需求。
对插件做一个概括性的设计,例如:需要使用什么菜单、什么参数,配置哪些选项、数据结构如何设计、前后台实现哪些功能等等。
阅读本文档并在系统设置中实际体验discuz!插件接口所实现的功用,例如:您的插件应当如何设计才能良好的挂接到社区系统中来。
插件接口能够实现哪些功能、不能实现哪些功能,插件为此而需要做的优化、改造和取舍。
编写相应程序代码和模板语句,实现所需的功能并进行代码测试、兼容性测试和代码改进。
如果需要公开您的插件,可以用插件导出的方式,将插件配置信息导出到一个xml文件中,连同相应的程序和模板文件一同打包。
同时,编写一个适合新手的插件的说明书也是必不可少的,其中包括:插件适用的discuz!版本、功能概述、兼容性声明、安装方法、使用方法、卸载方法等等。
将插件提供给他人,或自己使用,根据使用者反馈,对插件进行完善。
插件实现流程至此结束。
文件命名规范discuz!按照如下的规范对程序和模板进行命名,请在设计插件时尽量遵循此命名规范:可以直接通过浏览器访问的普通程序文件,以.php后缀命名。
被普通程序文件引用的程序文件,以.inc.php后缀命名。
被普通程序文件,或引用程序文件引用的函数库或类库,以.func.php(函数库)或.class.php(类库)后缀命名。
DZ(Discuz)百变幻灯片,完全DIY

DZ(Discuz)百变幻灯片,完全DIY请跟随教程从头到尾仔细阅读,你将收获不小第一步制作幻灯片:后台--》门户--》模块模板点击添加按扭如下图所示此处可以可以选择不同的模块分类如附件类、帖子类、文章类、图片类等等可以根据你的喜好选择不同的模块分类下面我们以文章类为例来讲解,选择文章分类点提交如下图所示,为新建的模块起个名字如“百变幻灯片”把代码框里面的内容全部删除接下来我们输入代码首先在代码框里面输入1<div class="slidebox"></div>复制代码其中的div可以是任意标签,如table,span等,我们这里以div为例此处的标签必须加一个class="slidebox"的属性如下面代码所示,只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片,切记如下图所示接下来,我们增加幻灯代码下面代码用来实现图片(或内容)的显示作用属性必须为class="slideshow"的标签2<div class="slideshow"></div>复制代码上面的代码必须放在class="slidebox"的属性的标签里面上面已经讲过,完整代码如下3<div class="slidebox">45<div class="slideshow"></div>67</div>复制代码接下来我们来增加“滑动”、“点击”的代码8<div class="slidebar"></div>复制代码上面的代码必须放在class="slidebox"的属性的标签里面上面已经讲过,完整代码如下9<div class="slidebox"><!--幻灯片开始-->1011<div class="slideshow"> </div><!--图片展示-->1213<div class="slidebar"> </div><!--幻灯片控制展示-->1415</div><!--幻灯片结束-->复制代码以上代码已完成幻灯片的框架接下来我们为幻灯片添加数据代码在<div class="slideshow"> </div> 代码中间插入图片显示代码如下代码16<div class="slideshow"><img src="{pic}" width="{picwidth}"height="{picheight}" /> </div><!--图片展示-->复制代码其中{pic} 为图片地址变量,{picwidth}为图片宽度变量,{picheight}为图片高度变量接下来为图片增加循环代码如下代码17[loop]18<img src="{pic}" width="{picwidth}" height="{picheight}" />19[/loop]复制代码完整代码如下20<div class="slidebox"><!--幻灯片开始-->21<div class="slideshow">22[loop]23<img src="{pic}" width="{picwidth}" height="{picheight}" />24[/loop]25</div>26<!--图片展示-->27<div class="slidebar"> </div><!--幻灯片控制展示-->28</div><!--幻灯片结束-->复制代码接下来为滑动条增加数字在<div class="slidebar"> </div>中增加娄字变量如下代码29<div class="slidebar">30[loop1]<span>{currentorder}</span>[/loop1]31</div>复制代码其中{currentorder} 是当前显示的顺序数字,其中[loop1]...[/loop1] 为循环,你可能注意到了,这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用loop1、loop2、loop3 以此类推来实现多处循环的目的最后增加脚本代码如下以下代码放在模块代码的最后32<script type="text/javascript">33runslideshow();34</script>复制代码此时一个简单的幻灯片就完成了,幻灯片的完整代码如下35<div class="slidebox"><!--幻灯片开始-->36<div class="slideshow">37[loop]38<img src="{pic}" width="{picwidth}" height="{picheight}" /> 39[/loop]40</div>41<!--图片展示-->42<div class="slidebar">43[loop1]<span>{currentorder}</span>[/loop1]44</div><!--幻灯片控制展示-->45</div><!--幻灯片结束-->4647<script type="text/javascript">48runslideshow();49</script>复制代码如下图所示此时我们就可以通过前台DIY调用了如下图所示调用显示效果至此简易幻灯片就完成了,需要你通过CSS样式来配合美化一下下面讲解一些高级参数1、滑动条如何控制让用户点击还是滑动在<div class="slidebar"> 中加入参数(鼠标滑动)mevent="mouseover" 或(鼠标点击)mevent="click"完整代码如下以下代码实现点击后变换50<div class="slidebar" mevent="click">51[loop1]<span>{currentorder}</span>[/loop1]52</div>复制代码2、如何实现上一个下一个的效果如下图样式添加如下代码即可实现53<div class="slidebarup">54<span>up</span>55</div>5657<div class="slidebardown">58<span>down</span>59</div>复制代码标签为class="slidebarup" 的为上一个标签为class="slidebardown" 的为下一个3、当slideshow的内容展示不全或不在一个区域时我们提供了更多内容的展示方法在需要展示的地方增加如下代码60<div class="slideother">61 <span>可以是任何内容</span>62</div>复制代码同时支持多个slideother 如下代码63<div class="slideother">64 <span>内容一</span>65</div>6667<div class="slideother">68 <span>内容二</span>69</div>复制代码4、如何控制幻灯片播放的速度在<div class="slidebox" >增加参数如下代码其中timestep="3000" 为毫秒70<div class="slidebox" timestep="3000">复制代码5、如何实现一次显示多个图片,每次切换多个如下图样式在<div class="slidebox" >增加参数如下代码<div class="slidebox" slidenum="3" slidestep="1">复制代码其中slidenum="3" 表示显示数量,slidestep="1" 表示每点击一次左右按扭移动的次数以上为幻灯片的所有功能下面提供演示站点中门户及频道所用到的幻灯片代码(大家可以参照所提供的代码制作出炫丽的幻灯片)以下所示效果都需要CSS配合效果一实现代码72<div class="slidebox">73<div class="slideshow">74 [loop]75 <a href="{url}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}" /></a>76 [/loop]77</div>78 <div class="bignews_btns">79 <div class="btns slidebar">80 [loop1]81 <em></em>82 [/loop1]83 </div>84 <div class="desc slideother">85[loop2]86 <a href="{url}"{target}>{title}</a>87[/loop2]88</div>89 </div>90</div>91<script type="text/javascript">runslideshow();93</script>复制代码效果二实现代码94<div class="slidebox" timestep="3000">95 <div class="thumb on slideshow" >96 [loop]97 <span>98 <a href="{url}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}" /></a>99 <p><a href="{url}"{target}>查看</a></p>100 </span>101 [/loop]102 </div>103 <div class="product_desc">104 <div class="on slideother" >105 [loop1]106 <span>107 <h2 class="title"><a href="{url}"{target}>{title}</a></h2>108 <p>{summary}</p>109 </span>110 [/loop1]111 </div>112 <div class="product_price on slideother" >113 [loop2]<span>{dateline}</span>115 [/loop2]116 </div>117 <div class="btns slidebar">118 [loop3]<em>{currentorder}</em>[/loop3]119 </div>120 </div>121 </div>122<script type="text/javascript">123runslideshow();124</script>复制代码效果三实现代码125<div class="slidebox" slidenum="3" slidestep="1" >126<div class="leftbtn slidebarup"><a href="javascript:void(0);"mevent="click" ><img src="template/default/portal/index/images/commend_bg_2_leftbtn.gif"/></a></div>127 <div class="middle cl" >128 <ul class="slideshow">129[loop]<li><a href="{url}"{target}><img src="{avatar_big}"width="{picwidth}" height="{picheight}" /></a><p><a href="{url}"{target}>{title}</a></p></li>[/loop]130 </ul>131 </div>132 <div class="rightbtn slidebardown "><a href="javascript:void(0);" mevent="click"><img src="template/default/portal/index/images/commend_bg_2_rightbtn.gif"/></a></div>133</div>134<script type="text/javascript">135runslideshow();136</script>复制代码效果四实现代码137<div class="photobox cl slidebox" timestep="3000">138 <div class="z leftbtn">139 <span>美食大赏</span>140 <div class="slidebar">141[loop]142 <em></em>143[/loop]144 </div>145 </div>146 <div class="y rightpic">147 <div class="slideshow">148[loop1]149 <div>150 <a href="{url}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}" /></a>151 <p><a href="{url}"{target}>{title}</a></p>152 </div>153[/loop1]154 </div>155 </div>156 </div>157<script type="text/javascript">158runslideshow();159</script>复制代码效果五实现代码160<div class="z slidebox">161 <div class="box slideshow">162 [loop]163 <div>164 <a href="{url}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}" /></a>165 </div>166 [/loop]167 </div>168 <div class="box_btn cl slidebar">169 [loop1]170 <div>171 <span>{title}</span>172 </div>173 [/loop1]174 </div>175 <div class="box_desc slideother">176 [loop2]177 <p>178 <a href="{url}"{target}>{summary}</a></p> 179 [/loop2]180 </div>181 </div>182<script type="text/javascript">183runslideshow();184</script>复制代码效果六实现代码185<div class="bignews slidebox " >186<div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}"/></a>[/loop]</div>187 <div class="btns slidebar">188[loop1]189 <em>{currentorder}</em>190[/loop1]191 </div>192 </div>193<script type="text/javascript">194runslideshow();195</script>复制代码效果七实现代码196<div class="slidebox ">197 <div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div>198 <dd class="slidebar">199[loop1]200 <em><a href="#"><imgsrc="template/default/portal/food/images/num/0{currentorder}.gif"/></a></em>201[/loop1]202 </dd>203 <div class="slideother">204[loop2]205 <div><div class="title">206 <a href="{url}"{target}>{title}</a>207 </div>208 <p>209 {summary}210 </p></div>211[/loop2]212 </div>213</div>214<script type="text/javascript">215runslideshow();216</script>复制代码效果八实现代码217<div class="bignews slidebox">218 <div class="picbox slideshow">219 [loop]<div><img src="{pic}" width="{picwidth}"height="{picheight}" /></div>[/loop]220 </div>221 <div class="bignews_btn slidebar" mevent="mouseover" > 222 [loop1]223 <div >224 <p>225 <strong><ahref="{url}"{target}>{title}</a></strong>226 <em>{summary}</em>227 </p>228 <img src="{pic}" width="60" height="66" /> 229 </div>230 [/loop1]231 </div>232 </div>233<script type="text/javascript">234runslideshow();235</script>复制代码效果九实现代码236<div class="slidebox">237238<div class="slideshow">239 [loop]240 <a href="{url}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}" /></a>241 [/loop]242</div>243 <div class="btn">244 <em class="slidebarup"><img src="template/default/portal/car/images/bignews_btn_left.gif" /></em>245 <em class="slidebar">[loop1]<span><img src="template/default/portal/car/images/empty_img.gif" width="8"height="8"/></span>[/loop1]</em>246 <em class="slidebardown"><img src="template/default/portal/car/images/bignews_btn_right.gif" /></em>247 </div>248 <div class="bignews_title slideother">249 [loop2]250 <em><a href="{url}"{target}>{title}</a></em>251 [/loop2]252 </div>253</div>254<script type="text/javascript">255runslideshow();256</script>复制代码效果十实现代码257<div class="slidebox">258<div class="bignews">259 <div class="slideshow">260 [loop]261 <a href="{url}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}" /></a>262 [/loop]263 </div>264 </div>265 <div class="bignewsdesc">266 <div class="bignewsbtn">267 <em class="slidebarup"><img src="template/default/portal/home/images/bignews_left.gif" /></em>268 <span class="slidebar">269 [loop1]270 <em>{currentorder}</em>271 [/loop1]272 </span>273 <em class="slidebardown"><img src="template/default/portal/home/images/bignews_right.gif" /></em>274 </div>275 <div class="slideother">276 [loop2]277 <dd >278 <h2><a href="{url}"{target}>{title}</a></h2>279 <p><a href="{url}"{target}>{summary}</a></p>280 </dd>281 [/loop2]282 </div>283 </div>284</div>285<script type="text/javascript">286runslideshow();287</script>复制代码大家可以参照上面提供的十套代码仔细研究一下。
Discuz模板制作方法

自定义模板变量 - 新增:可以根据扩展需求,针对个性化的CSS进行全局的定义。
添加变量后, 即可在 CSS 文件中以{TESTCODE}形式调用。
始化参数, 如:整个模板的字体大小, 颜色等一些通用参数的配置。
修改文件中以下四个参数<item id="name"><![CDATA[默认风格]]></item>指定扩展风格的名称, 例如:默认风格。
<item id="templateid"><![CDATA[1]]></item>指定初始化 templateid, 注意不要和现有安装风格的id相同。
<item id="tplname"><![CDATA[默认模板套系]]></item>指定扩展风格套系名称, 例如:默认风格套系。
将扩展风格 yourstyle 设置为当前模板套系, 由于这个目录下现在还没有文件, 则默认调用默认模板 template/default/ 文件夹下的文件, 这样一个完全和默认风格相同的扩展风格就建立完了。
如下图:1. 在 template 下新建一个文件夹, 放置扩展的模板风格文件。
2. 扩展出的文件夹名称需要和默认模板文件夹名称相同。
注意:也可以自己命名, 但是要在模板文件中自己修改模板的对应文件调用, 不建议使用。
如 上图, 我现在进行最简单的修改, 此扩展风格只对应了默认模板 default 下的 common 文件夹。
common 中只有一个 header.htm 文件, 也就是说在应用这套模板后, 由于它只对应默认模板 default 下面的 common/header.htm, 所以应用此套模板后只能读到 header.htm 头部模板文件, 而其他的如果没有全部自动调用 template/default 下的模板文件。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Discuz!模板二次开发的模板语法介绍:
相信大多数朋友都看过discuz的模板文件的代码了。
不同于传统的静态html代码,dz的静态模板可以说是动态化得模板文件了。
这里集合了,一些特有的php变量和逻辑判断。
下面我将为大家整理一下常用的dz模板二次开发规范,希望有助于大家更好的制作模板。
DZ的模板引擎原理是通过特殊的Discuz!模板标签来完成特定的循环和判断的。
它不同于PHP本身自带的脚本语言。
大家可能有很多人写过PHP的程序,也都使用过类似if($abc == 1) {} else {}的判断。
Discuz!模板引擎会将Discuz!模板标签中的关键字替换成php自身的脚本语句,然后存入缓存目录forumdata/templates目录中生成一个可供PHP程序包含和调用的模板文件。
那在DZ的模板引擎中我们该如何使用Discuz!模板标签呢?
下面给大家列举DZ模板引擎中常见、常用的模板语句:
一、直接输出变量:{$abc}或{echo $abc}
二、输出数组中某个变量:{$arr[0]}
三、IF判断语句:
<!--{if $abc < 1}-->
我abc小于1
<!--{elseif $abc == 1}-->
我abc为1
<!--{else}-->
我abc大于1
<!--{/if}-->
四、Loop循环语句:
<!--{loop $abc $key $val}-->
这里是{$val}
<!--{/loop}-->
上面这段loop语句,DZ会将其转换成php自身的循环语句:
If(is_array($abc)) {
Foreach($abc AS $key => $val) {
}
}
五、在模版文件中使用PHP语句:{eval $abc = 1;}注意:这里必须带”;”结尾。
六、在本模板中引用其他的模板:如我们要包含头部模板文件(header.htm)可以这样写:{subtemplate header}
在模版中使用语言包中的中文语句:{lang xxxxx},在这里xxxxx就是语言包中任意一个数组的键值。
如:templates/default/ng.php(语言包)内有下面的数组
$language = array
(
'discuz_lang' => 'templates',
'click_here' => '点击这里',
'ban_member' => '禁止',
'input_invalid' => '填写无效',
'title_none' => '无标题',
'title' => '标题',
}
大家可以使用{lang title},这样在模板输出的时候则会显示”标题”两个字。
当你了解了Discuz!模板开发语法之后,我们就一起来熟悉一下,常用的数据库表含义,与主题表中常用字段的含义,这样方便你使用sql语句灵活调用个性的内容,如:按会员性别调用头像,在首页右侧边栏调用女性会员头像等等这样各个性的需求,在此我们丛老师为我们讲解常用数据库表、字段及sql语句。
数据常用的帖子表有:cdb_threads,cdb_posts
我们仅以了解数据库中该如何根据结构来获得自己需要的信息。
用户名和密码均为root。
也可以查看安装后的readme.txt说明文件
接着我们还是来围绕今天的题目,来知道哪些数据表和数据字段对调用“帖子列表”有帮助。
打开phpmyadmin,找到现在你们本机用于演示的数据库。
如图:
cdb_threads表红色标记的,则是discuz!中最重要的主题列表。
,回复主题在哪个表呢?
其实,回复帖子的库文件是:cdb_posts。
我们在这里先只使用cdb_thread,以数据库的方式获取,最新的帖子列表数据和第一讲标签调用有区别,大家一起跟我做。
cdb_threads中有几个重要的字段:
tid (大家很熟悉了),每个主题唯一的一个帖子ID
fid(所在论坛版块的ID号)
typeid (主题分类类型)
author | authorid 为作者的用户名和作者的uid
subject (标题)
dateline (发帖时间)
lastpost (最后回复者)
lastposter(回复者用户名)
views (浏览数)
displayorder (置顶等级)
看到了上面字段我们就可以根据这些来做一个最新主题列表的数据库sql语句
我们可以这样写
点上面的sql按钮
输入:SELECT * FROM cdb_threads ORDER BY dateline DESC LIMIT 4
提交sql查询,看下结果。
上面的这段sql语句的意思是
以dateline(发帖时间)的倒序,输出4个结果。
限制在哪个版块我们先不考虑。
这里讲到一些sql语法。
如果我们只想去的帖子id和标题用于显示,那我们只需要这样书写:
SELECT tid,subject FROM cdb_threads ORDER BY dateline DESC LIMIT 4
将select后面的变一下,变为你想要输出的字段名就可以了。
这样一来,我们就获得了与第一个大问题同样效果的一个数据库调用新主题列表的语句了。
首先。
我们打开dz根目录的forumdisplay.php文件
用编辑器打开(建议使用Dreamweaver或者Editplus)
向下,到最下方。
include template($template);代码的上面。
在上面写入:
$query = $db->query("SELECT tid,subject FROM {$tablepre}threads WHERE fid =
'$fid' ORDER BY dateline DESC LIMIT 4");
while($result = $db->fetch_array($query)) {
print_r($result);
}
然后,进入自己的演示站,进入一个有主题的论坛版块,查看一下。
最上面会有类似的输出。
如图
继续修改刚才的代码:
我们把print_r($result);
换成
$mythread[] = $result;
这句:$mythread[] = $result;
的意思就是,组成数组,准备在模版中使用。
大家进入templates/default/forumdisplay.htm
这个文件,打开以后。
找到第25行:
<div class="main">
<div class="content">
在下面。
我们写一个loop循环
<!--{loop $mythread $key $val}-->
<div>帖子ID:{$val[tid]}主题:{$val[subject]}</div>
<!--{/loop}-->
这里请注意:
loop后面跟着我们的变量$mythread
然后帖子ID:{$val[tid]}则是刚才在程序中要获取的id值
主题:{$val[subject]}则为标题。