设为首页收藏本站

PHPDisk网盘官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

点击进入授权页面

只需一步,快速开始

搜索
网盘分享动态:
PHPDisk 7.0 V-Core系列发布[下载]官方论坛版主招募啦~期待您的加入招聘团队,开发phpdisk项目【有兴趣即可加入】phpdisk新版本 Windows客户端软件详尽~PHPDisk 模板制作教程
PHPDISK网盘专用探针 V2.1 E-Core企业网盘系统v3.0试用版PHPDisk插件开发教程PHPDisk交流Q群,加入->订阅PHPDisk最新动态,程序发布信息
查看: 13698|回复: 10

PHPDISK6.5网盘模板制作(其实是仿站)教程(一)

  [复制链接]
发表于 2012-9-28 02:50:08 | 显示全部楼层 |阅读模式
本帖最后由 lokym 于 2012-9-28 05:11 编辑

说在前面:
本人不才,是个业余人员,主业是学生,写的不好,随便喷,没关系~还有哦,写的啰嗦点方便下新手。。。不懂的问我
QQ:1928886288   我不在国内,所以时差关系,上午基本不在,在线不代表有时间,最好Email给我linke@kym314.com。每日都会回复的。
而且我这种方法只能用来仿站,当然有PS设计功底的也可以拿来做模板。本文就拿仿115的事例来讲吧!

本人之前仿115仿了一半,尼玛115换模板了,气死爷了-。-~~~可以看看我这个半成品
http://pan.kym314.com
求友链

一.先来讲下PD的模板结构

下载好PD后解压后有个upload,大家都知道这是网站源文件了吧-。-模板文件就在templates这个文件夹里面。有的文件我也不知道干嘛的,我就说下我知道的大部分吧~如果有人知道的话,麻烦给我回复一下,我添加进去,大家一起学习嘛~

buddy.tpl.php                          不知道-。-
circle_box.tpl.php                    不知道-。-     前面这些暂时不需要,我也没研究,前台的页面模板暂时是不需要这些的
circle_box_footer.tpl.php         不知道-。-
circle_box_header.tpl.php        不知道-。-
disk.tpl.php                              不知道-。-                              
files.tpl.php                               不知道-。-
folders.tpl.php          不知道
front_msg.tpl.php             提醒文字神马的,比如登录成功正在跳转什么的都用这个模板
images                                     模板图片目录
index.htm                               这里面是空的,是防止别人来猜目录的,不要删掉它也不要管它~
information.tpl.php            也是提醒文字~~~
menu.tpl.php                      用户后台的左侧菜单
message.tpl.php                 短消息
mydisk.tpl.php                     用户后台的磁盘管理
my_footer.tpl.php               用户后台的底部模板
my_header.tpl.php              用户后台的头部模板
my_nav_bar.tpl.php            用户后台的顶部导航
pd_account.tpl.php             用户前台的注册登录找回密码等页面的模板
pd_announce.tpl.php           前台公告的模板
pd_comment.tpl.php            前台文件下载时的评论
pd_extract.tpl.php                提取码页面的模板
pd_footer.tpl.php                 前台的底部
pd_header.tpl.php                 前台的头部
pd_payment.tpl.php              这个和免费版没关系-。-小弟没钱买授权版,求送啊~~~正题正题,它是购买网盘的模板
pd_public.tpl.php                   公共文件页面的模板
pd_search.tpl.php                 前台搜索页面的模板
pd_space.tpl.php                    前台个人空间的模板
pd_tag.tpl.php                         前台标签的模板
pd_viewfile.tpl.php                  这个最好玩了-。-个人觉得,它是文件下载页面的模板
phpdisk.tpl.php                        首页首页!!!
profile.tpl.php                        后台的个人信息-。-
public.tpl.php                         后台的公共文件
recycle.tpl.php                        后台的回收站
share.tpl.php                             分享标签代码模板-。-其实个人觉得没什么好改的
stats.tpl.php                             站点信息的模板



艾玛,打字打的累死了-。-先提交~~~




【具体模板说明】(以v6.5官方 default 模板作为例子说明):
templates/default/        (默认模板目录)
│  phpdisk.tpl.php        (网盘首页模板)
│  mydisk.tpl.php        (我的网盘入口模板)
│  my_nav_bar.tpl.php                (我的网盘上的导航菜单模板,图1)
│  pd_account.tpl.php                (登录、注册等功能模板)
│  pd_comment.tpl.php        (文件详细评论模板)
│  pd_extract.tpl.php                (提取码页面模板)
│  pd_header.tpl.php                (前台页面头部通用模板)
│  pd_public.tpl.php                (公共文件)
│  buddy.tpl.php                (我的好友)
│  pd_payment.tpl.php                *(充值状态返回)
│  disk.tpl.php        *(购买网盘功能)
│  upload.tpl.php                (上传文件)
│  pd_space.tpl.php        (个人空间)
│  pd_tag.tpl.php                (文件标签)
│  pd_viewfile.tpl.php                (文件浏览)
│  menu.tpl.php                (我的网盘,左侧导航菜单)
│  files.tpl.php                (我的文件)
│  share.tpl.php                (文件、文件夹共享)
│  profile.tpl.php                (个人中心)
│  pd_search.tpl.php                (搜索功能)
│  public.tpl.php                (公共文件)
│  recycle.tpl.php                (回收站)
│  stats.tpl.php                (我的统计)
│  front_msg.tpl.php                (前台操作后的提示框)
│  template_info.php                (具体模板信息,图2)
│  pd_footer.tpl.php                (前台模板通用底部信息)
│  pd_announce.tpl.php        (公告内容面板)
│  my_footer.tpl.php                (我的网盘,通用底部模板)
│  message.tpl.php                (站内短消息)
│  circle_box.tpl.php                (登录、注册时的外框主体,图3.2)
│  circle_box_footer.tpl.php        (登录、注册时的外框底部,图3.3)
│  circle_box_header.tpl.php        (登录、注册时的外框头部,图3.1)
│  folders.tpl.php                (我的网盘,目录管理)
│  information.tpl.php                (我的网盘,后台,前台操作后的提示框, redirect()函数调用)
│  my_header.tpl.php                (我的网盘,通用头部模板)
│  index.htm        (防止目录列表,出现漏洞,此文件不要修改)
│  
├─sub (子模板目录,子模板如何调用, 备注3)
│      block_hot_file_index.tpl.php                (首页最新文件、热门文件子模板)
│      block_hot_file_right.tpl.php                (右边热门文件子模板)
│      block_hot_tags.tpl.php                (首页热门文件标签)
│      block_links.tpl.php                (首页友情链接)
│      block_navigation_bottom.tpl.php                (通用导航菜单底部子模板)
│      block_navigation_top.tpl.php                        (通用导航菜单顶部子模板)
│      block_public_menu.tpl.php                (公共文件右边分类菜单栏)
│      block_announce.tpl.php                (公告内容显示模板)
│      block_gallery.tpl.php                (首页滚动幻灯片模板)
│      
└─images        (图片、CSS目录)
        mydisk.css        (【我的网盘】部分的CSS)
        style.css                (模板前台的CSS)


没看到官方写的-。-这儿也放上吧

评分

参与人数 1威望 +10 收起 理由
zouxiangfu + 10 很给力!

查看全部评分

 楼主| 发表于 2012-9-28 03:21:41 | 显示全部楼层
好了咧-。-现在继续~~~
二,从头开始:

从头部开始玩,chrome的开发者工具觉得比较好用~~~推荐一下Chrome浏览器
还有个工具推荐下,Notepad++ 这个写代码比较顺手~~~都可以百度一下,试试~~

用Notepad++打开前台头部文件 pd_header.tpl.html
可以看到绿色的很多代码,
<!--#
##
#        Project: PHPDISK File Storage Solution
#        This is NOT a freeware, use is subject to license terms.
#
#        Site: http://www.phpdisk.com
#
#        $Id: pd_header.tpl.html 23 2012-03-28 08:44:58Z along $
#
#        Copyright (C) 2008-2012 PHPDisk Team. All Rights Reserved.
#
##
#-->
这些是版权信息,个人不推荐删掉,毕竟感谢老大阿龙没有把这个程序加密!而且大家以后做站的时候最好也加下龙哥的友链哈

<?php !defined('IN_PHPDISK') && exit('[PHPDisk] Access Denied!'); ?>
这句是认证是否在程序中调用模板程序.不用管它

<!--#if(!$inner_box){#-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--#}#-->
<html xmlns="http://www.w3.org/1999/xhtml">

先说下,PD6.5里面用了很多IF的标签这个是很重要的,它是用IF语句来判定的。有IF的最好都不要删。

<!--#if(!$inner_box){#-->
每个IF都对应一个<!--#}#-->这个也要注意一下~它是结束IF语句的
这一段是没什么意义的.直接掠过

<head>浏览器头部开始

<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />无意义,让浏览器判定网页编码的,不要改

<title>{$title}<!--#if($settings['powered_info']){#--> - Powered by PHPDisk Team<!--#}#--></title>
页面标题,比如打开百度首页,你会看到屏幕最上方上有个百度一下,这里有个IF语句,判定版权信息的,还有个语言语句{$title}这个是和网站设置里面你写的标题是个调用代码。

<link rel="shortcut icon" href="favicon.ico">网页的小图标,比如你如果是用chrome打开PD的这个论坛,会看到标题前面有个pd的图标。

<meta name="Copyright" content="Powered by PHPDisk Team, {PHPDISK_EDITION} {PHPDISK_VERSION} build{PHPDISK_RELEASE}" />这儿一堆语句是调用PD的版权信息,方便搜索引擎的索引

<meta name="generator" content="PHPDisk {PHPDISK_VERSION}" />PD的版本信息

<!--#if($settings['open_seo']){#-->
<meta name="keywords" content="{$file_keywords}{$settings['meta_keywords']}" />
<meta name="description" content="{$file_description}{$settings['meta_description']}" />
<!--#}#-->
这儿一个SEO的判定,如果你在设置里面开了SEO优化,并且设置了关键词,这儿就会出现的。


<script type="text/javascript" src="includes/js/jquery.js"></script>
<script type="text/javascript" src="includes/js/common.js"></script>
<script type="text/javascript" src="includes/js/tree.js"></script>
<script type="text/javascript" src="includes/js/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="images/highslide.css" />
<script type="text/javascript">
hs.align = 'center';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>

一堆脚本,和css,如果要仿站的话,要把被仿站的css和js复制过来

<!--[if IE 6]>
<script src="includes/js/DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('*');/*.png_bg 为定义的css*/
</script>
<![endif]-->

对IE6的特殊对待~建议大家不要用IE6了-。-


<link href="{$user_tpl_dir}images/style.css" rel="stylesheet" type="text/css">
模板的主要css文件


</head>头部结束,下面还有的不属于浏览器头部了,是设计整个页面的头部了

先来了解一下这儿出现的所有IF语句

<!--#if($inner_box){#-->
<body style="background:#FFFFFF">这个IF我不知道是什么意义,暂时就不鸟它-。-

<!--#}else{#-->它是判定如果不是<!--#if($inner_box){#-->的话,就会调用下面的代码,不然直接跳过。

<!--#if($pd_uid){#-->这个是判定你是否登录Pd了的语句

<!--#if($settings[user_active] && $pd_is_activated){#-->判定你登录的账户是否为激活状态

<!--#if($pd_gid ==1){#-->判定是否为管理员

<!--#if($settings['show_public']){#-->判定后台是否开启了公共文件

<!--#if($settings['open_tag']){#-->判定后台是否开启了标签功能

<!--#include sub/block_navigation_top#-->这玩意不知道干嘛的,求解

<!--#show_adv_data('adv_top');#-->显示广告栏位,后台有的,顶部广告栏位。在sub文件夹里面修改广告模板,以后再讲这个~~









评分

参与人数 1威望 +10 收起 理由
zouxiangfu + 10 赞一个!

查看全部评分

 楼主| 发表于 2012-9-28 03:40:07 | 显示全部楼层
三,正式仿站

开始仿站,用chrome打开115,然后右击空白地方,查看源代码`~~~~

把115的几个css和js给另存为下来,

https://www.115.com/static/index_v63/css/home.css
https://www.115.com/static/js/jquery.js
https://www.115.com/static/js/home_v6_1.js

这里我是这么做的,在模板文件夹下面新建个文件夹叫css
然后全都下载进去了。

pd_header.tpl.html里面的这些代码我全删掉了

<script type="text/javascript" src="includes/js/jquery.js"></script>
<script type="text/javascript" src="includes/js/common.js"></script>
<script type="text/javascript" src="includes/js/tree.js"></script>
<script type="text/javascript" src="includes/js/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="images/highslide.css" />
<script type="text/javascript">
hs.align = 'center';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>


然后写上

<link href="{$user_tpl_dir}css/home.css" rel="stylesheet" type="text/css">
<script src="{$user_tpl_dir}css/jquery.js" type="text/javascript"></script>
<script src="{$user_tpl_dir}css/home_v6_1.js" type="text/javascript"></script>

这一句我也删掉,他会和home。css冲突...

<link href="{$user_tpl_dir}images/style.css" rel="stylesheet" type="text/css">
















<body>
<div class="container">
        <div class="page-side">
                <h1 class="logo"><a href="./">115,改变分享</a></h1>
                <div class="directory-menu">
                        <div class="dir-menu-side">
                            <ul id="js_tab_list">
                                <li class="focus"><a href="javascript:;"><i class="ico-dm dm-cloud"></i><span>网盘</span></a></li>
                                <li><a href="javascript:;"><i class="ico-dm dm-notebook"></i><span>记事本</span></a></li>
                                <li><a href="javascript:;"><i class="ico-dm dm-circle"></i><span>圈子</span></a></li>
                                <li><a href="javascript:;"><i class="ico-dm dm-message"></i><span>消息</span></a></li>
                            </ul>
                        </div>
                </div>
        </div>
        <div class="col-sub">
                <div class="sub-header">客户端下载</div>
                <div class="client-link">
                        <ul>
                            <li><a href="http://chrome.115.com"><i class="ico-client ic-browser"></i>115极速浏览器</a></li>
                            <li><a href="http://pc.115.com/#windows"><i class="ico-client ic-windows"></i>Windows 版</a></li>
                            <li><a href="http://pc.115.com/mac/index.html"><i class="ico-client ic-mac"></i>Mac 版</a></li>
                            <li><a href="http://pc.115.com/#android"><i class="ico-client ic-android"></i>Android 版</a></li>
                            <li><a href="http://pc.115.com/#iphone"><i class="ico-client ic-iphone"></i>iPhone 版</a></li>
                            <li><a href="http://pc.115.com/#ipad"><i class="ico-client ic-ipad"></i>iPad 版</a></li>
                            <li><a href="http://pc.115.com/#wphone"><i class="ico-client ic-wphone"></i>Windows Phone 版</a></li>
                        </ul>
                </div>
        </div>


把这段复制到</head>后面,然后该改的改,该修的修,比如LOGO地址等等,115的全都改掉...
我自己先去改了~~~先提交

评分

参与人数 1威望 +10 收起 理由
zouxiangfu + 10 神马都是浮云

查看全部评分

 楼主| 发表于 2012-9-28 04:09:39 | 显示全部楼层
本帖最后由 lokym 于 2012-9-28 04:24 编辑

说个小事情,在下载的home.css 文件中能看到几个图片文件,这些也是需要的,刚刚忘记讲了,补充下,我贴下地址,我把他们下载到了images的文件夹里面,最后要记得,一定要记得把home.css里面的图片地址也改掉~~~
https://www.115.com/static/index ... _directory_menu.png
https://www.115.com/static/index ... _directory_menu.gif
https://www.115.com/static/index_v63/images/banner_bg.png
https://www.115.com/static/index ... er/banner_cloud.jpg
https://www.115.com/static/index ... banner_notebook.jpg
https://www.115.com/static/index ... r/banner_circle.jpg
https://www.115.com/static/index ... /banner_message.jpg
https://www.115.com/static/index ... er/banner_blank.jpg
https://www.115.com/static/index_v63/images/form.png
https://www.115.com/static/index_v63/images/icon_popup.gif
就需要这么多,例如客户端图标和开放登录的图标用不到就不用了
 楼主| 发表于 2012-9-28 04:21:17 | 显示全部楼层
本帖最后由 lokym 于 2012-9-28 04:23 编辑

最后去网盘程序根目录下面的system 里面把templates文件夹删掉,放心删,这个是缓存文件,然后刷新网页看,最后成效是这样的,今天困了,明天再继续说




QQ截图20120928042017.png
 楼主| 发表于 2012-9-28 04:23:06 | 显示全部楼层
我写好的文件也发一份吧 pd_header.tpl.zip (1.62 KB, 下载次数: 1211)
发表于 2012-9-28 21:28:55 | 显示全部楼层
复杂了点。不过大力支持。

点评

弑天刃最新章节 www.xqqxs.com/xs/0/122/  发表于 2016-7-12 02:28
 楼主| 发表于 2012-9-30 05:12:37 | 显示全部楼层
zouxiangfu 发表于 2012-9-28 21:28
复杂了点。不过大力支持。

-.- 你以为做模板简单?
发表于 2014-1-2 17:50:55 | 显示全部楼层
可以做个视频嘛、、、

点评

千千小说(www.xqqxs.com)  发表于 2016-7-11 05:58
您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

关闭

推荐上一条 /1 下一条

小黑屋|Archiver|手机版|PHPDisk官方论坛 ( 粤ICP备10073657号  

GMT+8, 2017-12-11 15:45 , Processed in 0.074534 second(s), 36 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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