dz不同模板之间的移植整合方法

你是否遇到过这个情况,看着这套模板的门户不错,那套模板的论坛不错,但是就是不知道怎么样将两套模板完美的整合在一起,而自己手里没有太多的钞票,那么请看下面的教程,你在一定的程度上就能自己动手丰衣足食了。(有人会说DZ默认的机制就能使用几套不同的模板,但是那样的话几套模板混合使用,一方面不利于管理,另外一方面很多模板也不能直接混合使用,也需要修改的)第一步:了解模板相关的基础知识1、任何一套Discuzx 的模板都会包含几个基础的东西 CSS和图片文件夹(这里的目录是模板作者自己的习惯决定的)         template/**** 这个是DZ的模板目录,我们需要做的就是将  template/****  这里面需要的页面移到指定模板下;2、模板结构说明:     一般常见模板都会有上图的这些文件夹,common ---- 这个是存放一下全局类的东西;(如:头部文件、页脚文件、搜索栏和系统加载的相关CSS等)一般情况影响两套模板兼容问题的都是这个文件夹引起的,需要特别注意的是这个文件夹里面的这几个文件extend_common.css (我一般叫这个为全局CSS样式) extend_module.css (全局扩展CSS样式)同时也可能有 common.css 和 module.css 等系统默认的CSS文件,一般模板使用这两个都是不规范的表现但是有的在没有更好办法情况下也可能使用,因为默认的CSS 干涉了模板里面的CSS;forum ----     这个是论坛模板相关的文件夹,所有论坛类的模板都在这个文件夹下面;member ---- 这个是登陆相模板相关的 (注册、登陆  注:如果没有修改登陆样式,一般没有这个文件夹)portal ----     这个是门户模板相关的。下面两个文件一个是模板安装配置文件一个是模板图标展示第二步:分析相关需要转换合并的模板的结构特点在这一步我们需要分析模板的结构,考虑由那一套为主,那一套为辅,这里我们的原则有三个:1、那一套模板在合并后需要的页面较多我们就以他为主;2、在使用页面差不多的情况下,看那一套的全局CSS使用的比较多的我们就选择他;3、如果有修改系统文件的那么也尽可能的选择其为主。第三步:基础知识了解完毕,我们开始实例分析这次的实例就拿猫扑贴贴和华西都市网来整合,我们将合并的模板效果为,论坛和其他部分还是采用猫扑原来的样式,只将猫扑贴贴的门户页换成是华西都市网的模板。下面是两套模板的COMMON文件夹截图  1、选定一个模板来作为主模板;(根据我们在第二步讲解的来分析,这次合并需要以猫扑贴贴为主,华西都市网为辅。)2、首先我们分析一下猫扑贴贴调用文件的情况
第一行如下
<!--{subtemplate common/header_portal}-->
最后一行如下
<!--{subtemplate common/footer_mop}-->
复制代码
&nbsp;&nbsp;因为我们需要替换门户页,因此这连个文件没有用处,将其删除,我们可以得出,猫扑贴贴头部和页脚调用的文件分别是&nbsp;&nbsp;header_portal.htm 和 footer_mop.htm
<link href="$_G['style']['styleimgdir']/portal/fg_portal.css" rel="stylesheet" type="text/css" />
复制代码
通过这件代码,我们可以发现门户的相关CSS和图片目录是在 static\image\fg_moptt_fir\portal 下,我们里面的文件都删除3、分析一下华西都市网的门户页面调用的情况,,我们打开华西都市网的门户页,查看第一行代码为
<!--{subtemplate common/header}-->
复制代码
可以看出,华西的门户头部调用的是 common\header.htm最后一行代码为
<!--{subtemplate common/footer}-->
复制代码
这句可以看出,它调用的页脚部分是common\footer.htm由于这两个文件在猫扑贴贴里面也是有的,因此我们需要将其的名字修改一下header.htm -> header_hx.htm&nbsp; &nbsp;footer.htm -> footer_hx.htm (注:这里的改名我们的原则都是修改成header_**x.htm 这样的格式,这样方便识别,)4、确定了头部页脚文件的命名以后,我们portal\index.htm的第一行和最后一行分别修改成
<!--{subtemplate common/header_hx}-->
<!--{subtemplate common/footer_hx}-->
复制代码
5、在查看华西门户页加载的相关 CSS 和 JS文件的情况;
<link href="$_G['style']['styleimgdir']/portal_style.css" rel="stylesheet" type="text/css" />
<SCRIPT src="$_G['style']['styleimgdir']/Marquee.js" type=text/javascript></SCRIPT>
复制代码
找到这样的调用代码,(当然华西的只有这两个文件),可以看出 $_G['style']['styleimgdir'] 这个是后台配置的扩展目录函数,我们将其改成实际的路径为 static\image\fg_moptt_fir\portal&nbsp;&nbsp;;修改好以后搜索 $_G['style']['styleimgdir']&nbsp;&nbsp;看看那里还有使用这个函数的地方也修改其路径为路径为 static\image\fg_moptt_fir\portal(注:当然如果你将这些CSS\JS和图片移到其他位置里面,那么这个地址请改成你移动后的地址,有可能你会问为什么你不使用扩展函数了,因为不是所有的模板都有这个扩展函数的,具体的可以看后台的配置,有扩展函数的话就修改为 $_G['style']['styleimgdir']/portal/)6、完成3-4小步以后,将华西都市网刚刚修改的&nbsp; &nbsp;&nbsp;&nbsp;COMMON下的两个文件&nbsp;&nbsp;header_hx.htm 和 footer_hx.htm ;&nbsp; &nbsp;&nbsp;&nbspORTAL 下的 index.htm 拷贝到猫扑贴贴相应目录替换7、将华西的相应图片CSS (static\image\fg_hx_img )文件拷贝到猫扑贴贴的图片文件夹&nbsp;&nbsp;static\image\fg_moptt_fir\portal 文件夹下,再将华西 common\extend_common.css 文件里面的所有内容都拷贝到&nbsp;&nbsp;portal_style.css 文件的最前面 在保存(注:这里需要将 extend_common.css 里面相关背景图片的地址修改一下),8、完成上面所有的步骤以后,进入后台更新缓存,导入DIY数据,就可以看到效果了 (一般到这一步,很多模板都能很好的整合了)第四步:检查浏览器兼容性和JS错误修正 (这个是最难的一部,需要有一点的CSS基础和JS基础)完成上面的第三部可以发现,模板基本上都可以了,但是缺发现出现JS错误,这个是什么原因引起的了,通过我们分析两套模板,发现他们都有使用 jQuery 框架插件 (这个插件不是DZ后台的那个插件,是JS框架) 但是他们的声明不一样,猫扑是声明为 jQ, 华西是jQuery 所以我们将其声明修改成相同的,(一般 jQuery 我的习惯都是放在common\header_common.htm 里面) 对比连个文件,可以发现华西的 多了一些代码
<!--[if lte IE 6]>
<SCRIPT src="$_G['style']['styleimgdir']/DD_belatedPNG_0.0.8a.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>DD_belatedPNG.fix('.fixpng');</SCRIPT>
<![endif]-->
复制代码
这个是IE下使PNG-24 图片透明的插件, 因此我们将华西的 header_common.htm 替换掉猫扑的完成这一步后需要注意,将猫扑模板里面所有的 jQ 变成 jQuery .CSS 引起的冲突和干涉,我在这里就不多说,相关的CSS知识请自己查找,一般CSS干涉的常见问题就是,字体颜色、大小位置等不对。最后,多套模板整合的方法也是类似的,但是以上的教程知识针对比较规范的模板才行,如果不规范的模板相应的工作量会加大很多,当然原理基本上是一样的,这里就不在多说什么,特别提醒的是,如果头部或者页脚有嵌入型插件的话,扩展的头部或者页脚会失去作用。

发表评论

(必填)

(必填)

(以便回访)