单页制作教程

森森

插件发布插件名称:单页制作教程 体无完肤
插件来源:-
适用版本:Discuz! X1
语言编码:GBK简体 UTF8简体 BIG5繁体  
最后更新时间:-
插件作者:体无完肤
插件简介:以前7.2版本时候写一个一个单页制作教程，分为带边栏和不带边栏的，很多站长也根据教程学会了自己制作页面。
其实X版本的单页制作，跟7.2没啥两样，原理都是一样的，只要大家仔细研究的话会发现共同点，只是php里面几行代码稍有不同。

以前7.2版本时候写一个一个单页制作教程，分为带边栏和不带边栏的，很多站长也根据教程学会了自己制作页面。 其实X版本的单页制作，跟7.2没啥两样，原理都是一样的，只要大家仔细研究的话会发现共同点，只是php里面几行代码稍有不同。 原帖地址：http://bbs.7drc.com/thread-15432-1-1.html 首先，单页包括该单页的php文件和该单页的模板（.htm）文件，比如：host.php、host.htm 本帖隐藏的内容单页的php文件内容如下： <?php require './source/class/class_core.php';//引入系统核心文件 $discuz = & discuz_core::instance();//以下代码为创建及初始化对象 $discuz->cachelist = $cachelist; $discuz->init(); include template('forum/host');//调用单页模版文件 ?> 复制代码 这里需要注意的是，host为模板文件名，不需要加.htm扩展名，模板文件存放于自己当前风格目录下的forum目录； 单页的php文件存放于论坛根目录； php文件创建完毕，现在开始创建模版文件，基本代码如下： {subtemplate common/header} <div id="pt" class="wp">         <a href="index.php" class="nvhm">$_G[setting][bbname]</a> &rsaquo; DRC帖子动态 </div> <style id="diy_style" type="text/css"></style> <div id="ct" class="wp cl w">         <div class="mn mw">                 <div class="content">                      这里是自己正文区域的代码                 </div>         </div> </div> {subtemplate common/footer} 复制代码 其中： <a href="index.php" class="nvhm">$_G[setting][bbname]</a> &rsaquo; DRC帖子动态 复制代码 这一行是单页的路径显示，比如：Discuz! Rescue Centre › DRC帖子动态，{subtemplate common/header}、{subtemplate common/footer}分别为调用页头、页尾模板，使得单页风格与论坛保持一致； 至此，基本型单页创建完毕。演示效果见：http://bbs.7drc.com/host.php -------------------------------------以下为带右边侧栏单页模板----------------------------------------- 上面模板文件代码是不带边栏的，现在讲下带边栏的单页模板文件代码，如下： {subtemplate common/header} <div id="pt" class="wp"><a href="index.php" class="nvhm">$_G[setting][bbname]</a> &rsaquo; 会员风采</div> <div id="ct" class="wp cl n">         <div class="mn">             <div class="bm">                         <h1 class="mt"><img class="vm" src="static/image/feed/profile.gif" alt="profile"> 分类浏览</h1>                         <div class="datalist" style="margin:10px 0;">                                这里是正文区域代码                         </div>                 </div>         </div>         <!--边栏区域代码开始-->         <div id="psd" class="sd">         <div class="bn">                 <p><strong>栏目名称</p>                 <p><a href="#">边栏菜单名称</a></p>                 <p><a href="#">边栏菜单名称</a></p>                 <p><a href="#">边栏菜单名称</a></p>         </div>         <div class="bn">                 <p><strong>管理面板</strong></p>                 <p><a href="#">添加分类</a></p>                 <p><a href="#">管理分类</a></p>                 <p><a href="#">返回会员风采</a></p>         </div>         <div class="bn" style="border-bottom:none;">                 <p><strong>版权信息</strong></p>                 <p>作者：体无完肤</p>                 <p>版权：DRC</p>                 <p>网站：bbs.7drc.com</p>         </div>         </div>         <!--边栏区域代码结束--> </div> {subtemplate common/footer} 复制代码 其中：边栏区域代码中，每个<div class="bn">区块为一个边栏菜单区域； 演示效果见：http://bbs.7drc.com/plugin.php?id=drc_shownow:main -------------------------以下为带右边侧栏且多页选项卡切换-------------------------------- 刚看看到论坛有站长问单页中如何做那个多页面选项卡切换，下面介绍下； 其实就是多了几行代码，都是DX系统自带的，直接使用即可，在上面带右侧边栏模板代码的： <h1 class="mt"><img class="vm" src="static/image/feed/profile.gif" alt="profile"> 分类浏览</h1> 复制代码 这一行下面加入： <ul class="tb cl">                                 <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=new">最新发布</a></li>                                 <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=view">浏览排行</a></li>                                 <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=comment">回复排行</a></li>                 <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=rate">评分排行</a></li>                         </ul> 复制代码 解释上面代码，其中每个<li>标签，就是一个选项卡，里面的超链接host.php?viewtype=new，这里的viewtype就是指定一个变量，并且指定值为new，点击这个选项卡时候$_G[gp_viewtype]就会获取到这个值，然后通过判断$_G[gp_viewtype]的值，来选择当前选项卡是否为焦点选项。 既然说到多页，那么多个页面如何做，思路可以有两种，一种是建立多个单页，包括多个php文件和多个模板文件，当然这种方法比较直接，但是比较麻烦，可以在同一个模板文件中判断$_G[gp_viewtype]的值来选择显示不同的内容，比如在正文区域中如下代码： <!--{if $_G[gp_viewtype] == 'new'}--> 这里显示的是new选项卡下的内容 <!--{elseif $_G[gp_viewtype] == 'view'}--> 这里显示view选项卡下的内容 <!--{elseif $_G[gp_viewtype] == 'comment'}--> 这里显示comment选项卡下的内容 <!--{/if}--> 复制代码 这样就实现了一个模版文件中多个页面的效果。点击不同选项卡，显示不同内容。 ------------------------------以下为可以DIY的单页教程-------------------------------- 自己制作的单页中，如何又能使用DX的DIY功能呢？ 只需要稍加改造，即可完成，如下： 将单页php文件调用模板的那行代码改成： include template('diy:forum/host'); 复制代码 这样就可以加载DIY模块，然后在单页模版中，添加DIY区域，如下： <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]--> 复制代码 这就是一个DIY区域，如果要多个区域，则： <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]--> <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]--> <!--[diy=diy3]--><div id="diy3" class="area"></div><!--[/diy]--> 复制代码 将里面diy1,diy2,diy3区分开来即可。 比如，在单页模板代码的<div id="pt" class="wp">这一个div层块的上面或下面加： <div class="wp">         <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]--> </div> 复制代码 这样就可以实现单页DIY功能了，需要说明的是，模版中要在什么地方加DIY区域，根据自己需要，并不是固定死的，自己设计在哪，就在哪里加入。