忘记密码?

一键登录

草根吧源码论坛

Discuz X3.3 X3.2单页制作教程(附各种形式模板)

查看: 6161|回复: 1

Discuz X3.3 X3.2单页制作教程(附各种形式模板)

[复制链接]

55

主题

222

热度

9

贡献

终身赞助ViP

Rank: 7Rank: 7Rank: 7

联盟成员

发表于 2014-9-23 11:54:39 | 显示全部楼层 |阅读模式 | 百度  360  谷歌 
分享到:
首先,单页包括该单页的php文件和该单页的模板(.htm)文件,比如:index2.php、index2.htm

单页的php文件内容如下:

  • <?php
  • require './source/class/class_core.php';//引入系统核心文件
  • $discuz = & discuz_core::instance();//以下代码为创建及初始化对象
  • $discuz->cachelist = $cachelist;
  • $discuz->init();
  • include template('forum/index2');//调用单页模版文件
  • ?>



这里需要注意的是,host为模板文件名,不需要加.htm扩展名,模板文件存放于自己当前风格目录下的forum目录;
单页的php文件存放于论坛根目录;

php文件创建完毕,现在开始创建模版文件,基本代码如下:

  • {subtemplate common/header}
  • <div id="pt" class="wp">
  •         <a href="index.php" class="nvhm">$_G[setting][bbname]</a> › 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> › DRC帖子动态


这一行是单页的路径显示,比如:Discuz! Rescue Centre › DRC帖子动态,{subtemplate common/header}、{subtemplate common/footer}分别为调用页头、页尾模板,使得单页风格与论坛保持一致;

至此,基本型单页创建完毕。



-------------------------------------以下为带右边侧栏单页模板-----------------------------------------

上面模板文件代码是不带边栏的,现在讲下带边栏的单页模板文件代码,如下:

  • {subtemplate common/header}
  • <div id="pt" class="wp"><a href="index.php" class="nvhm">$_G[setting][bbname]</a> › 会员风采</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>版权:Caogen8.Co</p>
  •                 <p>网站:bbs.7drc.com</p>
  •         </div>
  •         </div>
  •         <!--边栏区域代码结束-->
  • </div>
  • {subtemplate common/footer}



其中:边栏区域代码中,每个<div class="bn">区块为一个边栏菜单区域;



-------------------------以下为带右边侧栏且多页选项卡切换--------------------------------

刚看看到论坛有站长问单页中如何做那个多页面选项卡切换,下面介绍下;
其实就是多了几行代码,都是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="index2.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="index2.php?viewtype=comment">回复排行</a></li>
  •                 <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="index2.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/index2');


这样就可以加载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区域,根据自己需要,并不是固定死的,自己设计在哪,就在哪里加入。

帖子地址: 

回复

举报

0

主题

99

热度

0

贡献

禁止访问

发表于 2014-11-28 14:57:08 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

发表回复

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆 用百度帐号登录 一键登录:

本版积分规则

收藏帖子 返回列表 搜索
快速回复 返回顶部 返回列表