SEO论坛  www.seoeye.cn

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

点击进入授权页面

只需一步,快速开始

快捷导航
搜索
热搜: 签到 新人报道 插件 伪原创 关键词 小米风格 亮剑seo 联盟 seo联盟 seo教程 seo优化 友链平台 下载 考试插件 酷Q评分 服务器租用 伪原创文章 子回帖 评分 簽到
查看: 2151|回复: 42

Discuz X模版制作:如何copy别人diy首页详细教程(一)

[复制链接]

484

主题

5

听众

1万

积分

管理员

亮剑SEO社区创始人

Rank: 9Rank: 9Rank: 9

UID
1
帖子
2047
威望
1
在线时间
913 小时
注册时间
2012-10-29
最后登录
2016-3-28

社区QQ达人 活跃会员

  • 收听TA
  • 发消息
发表于 2012-11-15 22:45:53 |显示全部楼层
经常看到网上有人想copy别人的首页门户,在此我给大家介绍下如何去模仿别人的diy首页。如果你没有一点前端基础的话,就需要自己一点一点默认的diy了。不过我们还是比较习惯接受自己通过搭建起自己的htm结构,在搭建好的架子上开始diy,这样可控性更好一些。首先你我来们来做一些必要的diy首页时的一些准备工作,这些工作都是必须的,这样才不至于在以后的调试中避免不必要的错误。
首先不能缺少的几个部分如下:

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


  • <!–{subtemplate common/header}–>

复制代码

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


  • <style id=”diy_style”
  • type=”text/css”></style>

复制代码

3、引入自己diycss代码


  • <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打开任何一个页面。他都会自动加载这个文件的详细信息给你清晰地列出来。并可以对下载到本地的静态htmlcss任意修改,并立即显示修改后的效果。
我在copy别人页面的时候通常都是,打开别人的页面,将它的内容全部删除,只留下它的框架,然后copy他仅有的框架代码,和css样式,调整好它的引用路径就可以了。
现在我用图,为大家说明一下,我相信你懂得。如果你不懂,就需要去修炼一下前端的外功了。




firebug

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


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

复制代码

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

discuz

discuz



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


  • <!–[diy=diy1]–><div
  • id=”diy1″></div><!–[/diy]–>

复制代码

的代码代替,框架中的内容填充到静态htm中。
这里需要注意的是:diy后的数值在当前页面时唯一的。并且格式一定要对。不能有重复,负责调用的数据就会重复。
下面你就可以开始diy填充数据了。
这里需要说明的一项就是,因为你的diy框架已经用静态的htm搭建好了,就不需要在进行特定的分栏处理了。在diy的模式下,去掉diy的标题,框架的diy样式和数据的diy样式边框要清0,内外边距也要清0
这样一个前台diy首页框架就已经基本完成了。
教程, 制作, diy, common, 如何
回复

使用道具 举报

angus  

1

主题

0

听众

28

积分

初学乍练

Rank: 1

UID
144
帖子
82
威望
0
在线时间
0 小时
注册时间
2012-11-16
最后登录
2015-2-9
  • 收听TA
  • 发消息
发表于 2012-11-16 15:52:00 |显示全部楼层
做一个首页 还是有难度的  
回复

使用道具 举报

1

主题

0

听众

254

积分

略有小成

Rank: 3Rank: 3

UID
293
帖子
99
威望
0
在线时间
0 小时
注册时间
2012-11-23
最后登录
2015-3-12
  • 收听TA
  • 发消息
发表于 2012-11-23 00:39:34 |显示全部楼层
没有多少好看的教程呢

点评

余新启  呵呵。以后会更多的。网站才刚上线,还希望你多多支持。  详情 回复 发表于 2012-11-23 01:15
回复

使用道具 举报

484

主题

5

听众

1万

积分

管理员

亮剑SEO社区创始人

Rank: 9Rank: 9Rank: 9

UID
1
帖子
2047
威望
1
在线时间
913 小时
注册时间
2012-10-29
最后登录
2016-3-28

社区QQ达人 活跃会员

  • 收听TA
  • 发消息
发表于 2012-11-23 01:15:07 |显示全部楼层
网赚项目指导 发表于 2012-11-23 00:39
没有多少好看的教程呢

呵呵。以后会更多的。网站才刚上线,还希望你多多支持。
回复

使用道具 举报

243

主题

1

听众

7851

积分

管理员

亮剑SEO社区首席运营官

Rank: 9Rank: 9Rank: 9

UID
3
帖子
1268
威望
40
在线时间
199 小时
注册时间
2012-11-1
最后登录
2015-7-28

社区QQ达人 活跃会员

  • 收听TA
  • 发消息
发表于 2013-2-18 21:30:13 |显示全部楼层
我也顶起出售广告位
回复

使用道具 举报

0

主题

0

听众

2386

积分

融会贯通

Rank: 6Rank: 6

UID
19
帖子
2316
威望
0
在线时间
0 小时
注册时间
2012-11-9
最后登录
2013-7-19

社区QQ达人

  • 收听TA
  • 发消息
发表于 2013-2-19 01:33:28 |显示全部楼层
1v1飘过
回复

使用道具 举报

麦田  

32

主题

1

听众

2401

积分

等待验证会员

UID
7
帖子
2301
威望
0
在线时间
0 小时
注册时间
2012-11-6
最后登录
2013-7-19
  • 收听TA
  • 发消息
发表于 2013-2-19 07:47:58 |显示全部楼层
一直在看
回复

使用道具 举报

xxjxzy  

12

主题

0

听众

2万

积分

炉火纯青

Rank: 10Rank: 10Rank: 10

UID
69
帖子
548
威望
49
在线时间
463 小时
注册时间
2012-11-10
最后登录
2014-8-8

社区QQ达人 推广达人

  • 收听TA
  • 发消息
发表于 2013-4-7 10:17:13 |显示全部楼层
好呀!不错呀!
回复

使用道具 举报

9#
无效楼层,该帖已经被删除
10#
无效楼层,该帖已经被删除
高级模式
您需要登录后才可以回帖 登录 | 立即注册  

 允许回帖邮件提醒楼主

手机版|友链平台|SEO论坛 ( 闽ICP备12010402号-3 ) 

GMT+8, 2016-3-30 08:21 , Processed in 0.609534 second(s), 79 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部