关于两套模板不同页面整合的基本思路及方法

你是否遇到过这个情况，看着这套模板的门户不错，那套模板的论坛不错，但是就是不知道怎么样将两套模板完美的整合在一起，而自己手里没有太多的钞票，那么请看下面的教程，你在一定的程度上就能自己动手丰衣足食了。（有人会说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、首先我们分析一下猫扑贴贴调用文件的情况

1.第一行如下

2.

3.最后一行如下

4.

复制代码

因为我们需要替换门户页，因此这连个文件没有用处，将其删除，

我们可以得出，猫扑贴贴头部和页脚调用的文件分别是 header_portal.htm 和footer_mop.htm

1.

type="text/css" />

复制代码

通过这件代码，我们可以发现门户的相关CSS和图片目录是在

static\image\fg_moptt_fir\portal 下，我们里面的文件都删除

3、分析一下华西都市网的门户页面调用的情况，，我们打开华西都市网的门户页，查看第一行代码为

1.

复制代码

可以看出，华西的门户头部调用的是 common\header.htm

最后一行代码为

1.

复制代码

这句可以看出，它调用的页脚部分是common\footer.htm

由于这两个文件在猫扑贴贴里面也是有的，因此我们需要将其的名字修改一下header.htm -> header_hx.htm footer.htm -> footer_hx.htm （注：这里的改名我们的原则都是修改成header_**x.htm 这样的格式，这样方便识别，）

4、确定了头部页脚文件的命名以后，我们portal\index.htm的第一行和最后一行分别修改成

1.

2.

复制代码

5、在查看华西门户页加载的相关 CSS 和 JS文件的情况；

1.

type="text/css" />

2.

复制代码

找到这样的调用代码，（当然华西的只有这两个文件），可以看出

$_G['style']['styleimgdir'] 这个是后台配置的扩展目录函数，我们将其改成实际的路径为 static\image\fg_moptt_fir\portal ；修改好以后搜索

$_G['style']['styleimgdir'] 看看那里还有使用这个函数的地方也修改其路径为路径为 static\image\fg_moptt_fir\portal（注：当然如果你将这些

CSS\JS和图片移到其他位置里面，那么这个地址请改成你移动后的地址，有可能你会问为什么你不使用扩展函数了，因为不是所有的模板都有这个扩展函数的，具体的可以看后台的配置，有扩展函数的话就修改为

$_G['style']['styleimgdir']/portal/）

6、完成3-4小步以后，将华西都市网刚刚修改的

COMMON下的两个文件 header_hx.htm 和 footer_hx.htm ；

PORTAL 下的 index.htm 拷贝到猫扑贴贴相应目录替换

7、将华西的相应图片CSS （static\image\fg_hx_img ）文件拷贝到猫扑贴贴的图片文件夹 static\image\fg_moptt_fir\portal 文件夹下，再将华西common\extend_common.css 文件里面的所有内容都拷贝到 portal_style.css 文件的最前面在保存(注：这里需要将 extend_common.css 里面相关背景图片的地址修改一下)，

8、完成上面所有的步骤以后，进入后台更新缓存，导入DIY数据，就可以看到效果了（一般到这一步，很多模板都能很好的整合了）

第四步：检查浏览器兼容性和JS错误修正（这个是最难的一部，需要有一点的CSS基础和JS基础）

完成上面的第三部可以发现，模板基本上都可以了，但是缺发现出现JS错误，这个是什么原因引起的了，

通过我们分析两套模板，发现他们都有使用 jQuery 框架插件（这个插件不是

DZ后台的那个插件，是JS框架）但是他们的声明不一样，猫扑是声明为 jQ, 华西是jQuery 所以我们将其声明修改成相同的，（一般 jQuery 我的习惯都是放在common\header_common.htm 里面）对比连个文件，可以发现华西的多了一些代码

1.

复制代码

这个是IE下使PNG-24 图片透明的插件，因此我们将华西的

header_common.htm 替换掉猫扑的

完成这一步后需要注意，将猫扑模板里面所有的 jQ 变成 jQuery .

CSS 引起的冲突和干涉，我在这里就不多说，相关的CSS知识请自己查找，一般CSS干涉的常见问题就是，字体颜色、大小位置等不对。

最后，多套模板整合的方法也是类似的，但是以上的教程知识针对比较规范的模板才行，如果不规范的模板相应的工作量会加大很多，当然原理基本上是一样的，这里就不在多说什么，特别提醒的是，如果头部或者页脚有嵌入型插件的话，扩展的头部或者页脚会失去作用，因为嵌入点的ID是唯一的，这个只有修改插件使用新的嵌入点