经常看到网上有人想copy别人的Discuz门户模板,在此我给大家介绍下如何去模仿别人的diy首页。如果你没有一点前端基础的话,就需要自己一点一点默认的diy了。不过我们还是比较习惯接受自己通过搭建起自己的htm结构,在搭建好的架子上开始diy,这样可控性更好一些。首先你我来们来做一些必要的diy首页时的一些准备工作,这些工作都是必须的,这样才不至于在以后的调试中避免不必要的错误。

首先不能缺少的几个部分如下:

1、引入Discuz模板头部文件代码

如果你的头部和默认的头部是不一样的,你只要把自己做好的头部放到common目录下,之后把下面的header文件改成你自己命名的文件名就可以了。注意,请尽量不要遗漏一些必要的代码。Header中的代码大部分都很关键,如果没有非常必要,尽量少的去删减,以免造成不必要的麻烦。

1
<!--{subtemplate common/header}-->

2、diy的样式代码

我经常碰到很多的diy首页中,有人遗漏这段代码,他基本上前期对你的diy页面有很少影响,不过如果你diy的时候选择样式的话,点击就会无效。前台diy的时候div的样式是写在这个id的div里面的,如果没有你是无法对你的div指派一些样式的值。

1
<style id="diy_style" type="text/css"></style>

3、引入自己diy的css代码

1
<link href="$_G['setting']['csspath']template/default/portal/index/style/style.css" rel="stylesheet" type="text/css" />

4、尾部文件的导入

这个文件也存在大量的系统处理程序,请尽量少的删减它的代码。如果你的尾部和默认的不同,那你可以自己重新copy一份文件就可以了然后去掉必要的html代码。

1
<!--{subtemplate common/footer}-->

以上就是要做的的基本步骤。下面我们开始打开我们要copy的首页进行仿制吧。

在仿制别人的首页的时候。你可以选择自己按照别人的页面自己写自己的样式代码,然后一步一步的diy。不过我在这里为大家介绍一种比较懒的方法。

1、首先你应该熟悉html+css的基本概念。最好有一些相关的实践经验。这样才不至于动起手来非常蹩脚。

我希望大家,熟悉并会运用火狐浏览器的firebug插件。这是一款备受前端人员推崇的工具。你用firebug打开任何一个页面。他都会自动加载这个文件的详细信息给你清晰地列出来。并可以对下载到本地的静态html和css任意修改,并立即显示修改后的效果。

我在copy别人页面的时候通常都是,打开别人的页面,将它的内容全部删除,只留下它的框架,然后copy他仅有的框架代码,和css样式,调整好它的引用路径就可以了。
现在我用图,为大家说明一下,我相信你懂得。如果你不懂,就需要去修炼一下前端的外功了。

这里我用firebug定义页面的一个元素后,找到他的标签,firebug会很明确的告诉你他在页面的位置,如果你点中编辑按钮,他就会进入到这段代码的源html,我们diy的时候通常都是需要他的框,背景图。并不需要他的内容,因为那正是我们需要填充自己数据的地方。我们进入编辑模式后,将内容的html都删除。这样页面就显得非常干净了。只留下了基本的框架。

2、copy完他的前端框架后,我们就来copy他的css,运用firebug你可以很方便的查看到他的css文件,一般一个页面,引用的css文件通常不会超过两个主要的文件。你只要将这两个文件的代码copy到

1
<link href="$_G['setting']['csspath']template/default/portal/index/style/style.css" rel="stylesheet" type="text/css" />

所连接的文件中就可以了。

这里你可以右键单击复制查看他的地址。也可以之际点击拷贝就可以了。当然这样做回产生大量的css垃圾代码。不过,是让我们偷懒呢。这个就需要你选择性的copy了,有选择性的copy 主要的css就可以了。(当然这些css并不一定完全好事,比如比价难纠结的就是图片背景。你需要一个个自己另存为,并将它的路径指定到你放置的文件夹中。然后指定好调用的路径。)

做完这些工作以后我们基本上就可以开始放置我们需要diy的框架了。

将形如

1
<!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->

的代码代替,框架中的内容填充到静态htm中。

这里需要注意的是:diy后的数值在当前页面时唯一的。并且格式一定要对。不能有重复,负责调用的数据就会重复。

下面你就可以开始diy填充数据了。

这里需要说明的一项就是,因为你的diy框架已经用静态的htm搭建好了,就不需要在进行特定的分栏处理了。在diy的模式下,去掉diy的标题,框架的diy样式和数据的diy样式边框要清0,内外边距也要清0。

这样一个前台diy首页门户框架就已经基本完成了。