PHPDISK6.5网盘模板制作（其实是仿站）教程（一）
本帖最后由 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）
没看到官方写的-。-这儿也放上吧 好了咧-。-现在继续~~~
二，从头开始：
从头部开始玩，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(' 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复制过来
<!-->
<script src="includes/js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('*');/*.png_bg 为定义的css*/
</script>
<!-->
对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 && $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文件夹里面修改广告模板，以后再讲这个~~
三,正式仿站
开始仿站，用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 于 2012-9-28 04:24 编辑
说个小事情,在下载的home.css 文件中能看到几个图片文件，这些也是需要的，刚刚忘记讲了，补充下，我贴下地址，我把他们下载到了images的文件夹里面,最后要记得，一定要记得把home.css里面的图片地址也改掉~~~
https://www.115.com/static/index_v63/images/ico_directory_menu.png
https://www.115.com/static/index_v63/images/ico_directory_menu.gif
https://www.115.com/static/index_v63/images/banner_bg.png
https://www.115.com/static/index_v63/images/banner/banner_cloud.jpg
https://www.115.com/static/index_v63/images/banner/banner_notebook.jpg
https://www.115.com/static/index_v63/images/banner/banner_circle.jpg
https://www.115.com/static/index_v63/images/banner/banner_message.jpg
https://www.115.com/static/index_v63/images/banner/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 于 2012-9-28 04:23 编辑
最后去网盘程序根目录下面的system 里面把templates文件夹删掉，放心删，这个是缓存文件，然后刷新网页看，最后成效是这样的，今天困了，明天再继续说
我写好的文件也发一份吧 {:soso__7936455917328747591_3:}复杂了点。不过大力支持。 zouxiangfu 发表于 2012-9-28 21:28 static/image/common/back.gif
复杂了点。不过大力支持。
-.- 你以为做模板简单？ 可以做个视频嘛、、、
页:
[1]