首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

如何copy别人的diy首页模板呢

建站高手 2015-6-30 [模板制作修改] 来自PC 复制链接
67500
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

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

推荐学习站帮网原创高清Discuz模板制作教程,视频教程每节都有实战,演示目标演示效果制作。

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

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

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

3、引入自己diy的css代码
  <link href="$_G['setting']['csspath']template/default/portal/index/style/style.css"
rel="stylesheet" type="text/css" />

4、尾部文件的导入
这个文件也存在大量的系统处理程序,请尽量少的删减它的代码。如果你的尾部和默认的不同,那你可以自己重新copy一份文件就可以了然后去掉必要的html代码。
<!--{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到
<link href="$_G['setting']['csspath']template/default/portal/index/style/style.css"
rel="stylesheet" type="text/css" />

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

这里你可以右键单击复制查看他的地址。也可以之际点击拷贝就可以了。当然这样做回产生大量的css垃圾代码。不过,是让我们偷懒呢。这个就需要你选择性的copy了,有选择性的copy 主要的css就可以了。(当然这些css并不一定完全好事,比如比价难纠结的就是图片背景。你需要一个个自己另存为,并将它的路径指定到你放置的文件夹中。然后指定好调用的路径。)
做完这些工作以后我们基本上就可以开始放置我们需要diy的框架了。
将形如
<!--[diy=diy1]--><div
id="diy1" class="area"></div><!--[/diy]-->

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

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

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

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

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

如何diy出属于自己的数据展示样式。我们首先要熟悉diy的模板语法,从而创建出属于自己的diy模块。下面我们就进入后台 → 门户 → 模块模板,这里列举出了我们能够diy的所有的数据展示模快。

每一种模块都有不同的展示样式。下面我以discuz x3.2一个比较全的模板为大家讲解一下。
[x3.2]帖子缩略图+主题+摘要
<div class="module cl xld">
[loop]
<dl class="cl">
         <dd class="m"><a href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" /></a></dd>
         <dt><a href="{url}">{title}</a></dt>
         <dd>{summary}</dd>
</dl>
[/loop]
</div>

首先这一段内容定义的就是一个模块,也就是你框架里要填充的数据的展示样式。在这里我们可以根据后台提示详细的了解到这段代码的具体含义。在这个些模块模板中只有包括在[loop],[order],

<ul>
[loop]
<li><ahref="{url}">{title}</a></li>
[/loop]
</ul>
</div>
[/code]就可以了。你看这是不是很容易,然后你就将这段代码在后台添加到模块样式里。注意你要选择的模块类型。

不同的模块类型,有不同的标签,一定不要混用,否则发正常解析。然后你要做的工作就是去前台diy模板吧。选择你为刚才添加模块名称的模板。他就会按照你的展示样式展示出来了。
这样一套copy的diy首页就大功告成了。



上一篇:discuz X论坛技术架构 MVC结构浅析
下一篇:为什么Discuz! X会员在线时间不更新,解析dz在线时间机制
晴锵锵殿下 发表于 2015-6-30 16:26:57 来自PC
这个是论坛的吧
中国特种装备网http://www.tezhongzhuangbei.com/
梦忧之殇 发表于 2015-6-30 17:54:39 来自PC
完全没弄过这东西,有需要的再试试
http://caiyun.feixin.10086.cn/
liu1369126230 发表于 2015-7-1 09:27:34 来自PC
扒网页 然后弄成可diy
巴中热线 发表于 2015-7-3 09:58:58 来自PC
学习一下,有些好的模板可以借鉴过来
awy123 发表于 2015-7-3 10:30:50 来自PC


学习经验,终成达人     www.hbcsdzqc.com
www.hbcsdzqc.com随车吊_起重机
yizong 发表于 2015-7-5 10:40:36 来自PC
车间生产管理工具 http://www.yz021.cn
宜纵电子   http://yizong.cscces.net
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表