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

lokym

说在前面：
本人不才，是个业余人员，主业是学生，写的不好，随便喷，没关系~还有哦，写的啰嗦点方便下新手。。。不懂的问我
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）


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

lokym

好了咧-。-现在继续~~~
二，从头开始：

从头部开始玩，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文件夹里面修改广告模板，以后再讲这个~~

lokym

三,正式仿站

开始仿站，用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的全都改掉...
我自己先去改了~~~先提交

lokym

说个小事情,在下载的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
就需要这么多，例如客户端图标和开放登录的图标用不到就不用了

lokym

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

lokym

我写好的文件也发一份吧 pd_header.tpl.zip (1.62 KB, 下载次数: 1230)

2012-9-28 04:22 上传

点击文件名下载附件

zouxiangfu

复杂了点。不过大力支持。

lokym

zouxiangfu 发表于 2012-9-28 21:28
复杂了点。不过大力支持。

-.- 你以为做模板简单？

1374118754

可以做个视频嘛、、、