系列教程 Discuz x2.5 单页制作的教程

  [复制链接]
ARCHY明星会员实名认证 发表于 2012-8-15 12:15:24 [系列教程] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
discuz单页的制作其实还是很简单的,之前也有很多版本的单页制作的教程,今天这里主要讲Discuz x2.5 单页的制作,包括单页的DIY,选项卡页面的制作等。

单页包括该单页的php文件和该单页的模板(.htm)文件,比如:news.php、news.htm。查看最新20新帖/回复 X2/X2.5 插件就是使用单页制作的,演示效果:http://bbs.zb7.com/news.php,大家可以下载使用并且体验下。

站帮网发布的关于我们插件也是根据单页的教程制作的,只是结合dz插件机制做成插件了。

下面就开始分析说明单页的代码:

一、单页php页面的创建,适用于DIY和普通单页的代码如下:
  1. <?php
  2. define('CURSCRIPT', 'archy');//body的一个class标识
  3. require './source/class/class_core.php';//引入系统核心文件
  4. $discuz = & discuz_core::instance();//以下代码为创建及初始化对象
  5. $discuz->init();
  6. loadcache('diytemplatename');//DIY要载入缓存
  7. $navtitle = '单页的标题';
  8. $metakeywords = '单页关键词1,单页关键词2';
  9. $metadescription = '单页的描述说明';
  10. include template('diy:forum/news');//调用单页模版文件
  11. ?>
复制代码
单页的php文件存放于论坛根目录。
注意:news为模板文件名,不需要加.htm扩展名,模板文件存放于默认风格目录下的forum目录。此处如果不理解可以看看Discuz!模板解析语法

二、单页模板文件news.htm的创建。

1、普通内容单页的模版文件代码:
  1. <!--{template common/header}-->
  2. <div id="pt" class="bm cl">
  3.         <div class="z">
  4.                 <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a><em>&raquo;</em>
  5.                 <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</em>
  6.                 <a href="javascript:;">$navtitle</a>
  7.         </div>
  8. </div>
  9. <div id="ct" class="wp cl">
  10.         <div class="mn bm cl">
  11.                 <div class="bm_c">
  12.                 <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p>                        
  13.                 </div>
  14.         </div>
  15. </div>
  16. <!--{template common/footer}-->
复制代码
2、可DIY的单页模版文件代码如下:
  1. <!--{template common/header}-->
  2. <div id="pt" class="bm cl">
  3.         <div class="z">
  4.                 <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a><em>&raquo;</em>
  5.                 <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</em>
  6.                 <a href="javascript:;">$navtitle</a>
  7.         </div>
  8. </div>

  9. <style id="diy_style" type="text/css"></style>
  10. <div class="wp">
  11. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
  12. </div>

  13. <div id="ct" class="wp cl">
  14.         <div class="mn bm cl">
  15.                 <div class="bm_c">
  16.         
  17.                 <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p>
  18.                         
  19.                 </div>
  20.         </div>
  21. </div>

  22. <!--{template common/footer}-->
复制代码
其中
  1. <div class="wp">
  2. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
  3. </div>
复制代码
这段代码就是DIY区域的代码,你也可以通过DIV布局,然后加入多个DIY区域。

注意:如果一个页面要插入多个DIY区域,注意修改上面DIY区域的编号ID,几个DIY区域的ID编号不能相同。

3、带有右侧边栏的单页模版文件代码:
  1. <!--{subtemplate common/header}-->

  2. <div id="pt" class="bm cl">
  3.         <div class="z">
  4.                 <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a><em>&raquo;</em>
  5.                 <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</em>
  6.                 <a href="javascript:;">$navtitle</a>
  7.         </div>
  8. </div>

  9. <div id="ct" class="wp cl ct2">
  10.         <div class="mn bm cl">
  11.             <div class="bm_h">标题栏</div>
  12.                 <div class="bm_c">
  13.                
  14.            <p style="width:300px; margin:220px auto; text-align:center;">这里是单页正文内容区域</p>
  15.             
  16.                 </div>
  17.         </div>
  18.    
  19.             <div class="sd">
  20.    
  21.             <div class="bm">
  22.                         <div class="bm_h">
  23.                                 <h2>公告栏</h2>
  24.                         </div>
  25.                         <div class="bm_c">
  26.                                 <p class="xl xl2 cl" style="line-height:25px;">
  27.                         这里可以放一些公告通知类的文字内容
  28.                                 </p>
  29.                         </div>
  30.                 </div>
  31.         
  32.         <div class="bm">
  33.                         <div class="bm_h">
  34.                                 <h2>操作菜单</h2>
  35.                         </div>
  36.                         <div class="bm_c">
  37.                                 <ul class="xl xl2 cl">
  38.                         <li><a href="#">测试菜单一</a></li>
  39.                     <li><a href="#">测试菜单二</a></li>
  40.                     <li><a href="#">测试菜单三</a></li>
  41.                     <li><a href="#">测试菜单四</a></li>
  42.                     <li><a href="#">测试菜单五</a></li>
  43.                     <li><a href="#">测试菜单六</a></li>
  44.                                 </ul>
  45.                         </div>
  46.                 </div>

  47.         
  48.         <div class="bm">
  49.                         <div class="bm_h">
  50.                                 <h2>版权信息</h2>
  51.                         </div>
  52.                         <div class="bm_c" style="line-height:25px;">
  53.                                 <ul>
  54.                         <li>作者:<a href="http://bbs.zb7.com/" target="_blank">ARCHY</a></li>
  55.                     <li>网站:<a href="http://bbs.zb7.com/" target="_blank">站帮网</a></li>
  56.                     <li>版权:站帮网</li>
  57.                                 </ul>
  58.                         </div>
  59.                 </div>
  60.         
  61.     </div>
  62.    
  63. </div>

  64. <!--{subtemplate common/footer}-->
复制代码
4、带有标签选项卡的单页模版:

游客,如果您要查看本帖隐藏内容请回复


其中
  1. <ul class="tb cl">
  2.                                 <li <!--{if empty($_GET["viewtype"]) || $_GET["viewtype"] == 'new'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=new">最新发布</a></li>
  3.                                 <li <!--{if $_GET["viewtype"] == 'view'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=view">浏览排行</a></li>
  4.                                 <li <!--{if $_GET["viewtype"] == 'comment'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=comment">回复排行</a></li>
  5.                 <li <!--{if $_GET["viewtype"] == 'rate'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=rate">评分排行</a></li>
  6.                         </ul>
复制代码
解释上面代码,其中每个<li>标签,就是一个选项卡,里面的超链接news.php?viewtype=new,这里的viewtype就是指定一个变量,并且指定值为new,点击这个选项卡时候$_G[gp_viewtype]就会获取到这个值,然后通过判断$_G[gp_viewtype]的值,来选择当前选项卡是否为焦点选项。

建立多页的方法有2种,一种是建立多个单页,包括多个php文件和多个模板文件,当然这种方法比较直接,但是比较麻烦;第二种就是我们上面说的方法:可以在同一个模板文件中判断$_G[gp_viewtype]的值来选择显示不同的内容,比如在正文区域中如下代码:
  1. <!--{if $_GET["viewtype"] == 'new'}-->
  2. 这里显示的是new选项卡下的内容
  3. <!--{elseif $_GET["viewtype"] == 'view'}-->
  4. 这里显示view选项卡下的内容
  5. <!--{elseif $_GET["viewtype"] == 'comment'}-->
  6. 这里显示comment选项卡下的内容
  7. <!--{/if}-->
复制代码
这样就实现了一个模版文件中多个页面的效果。点击不同选项卡,显示不同内容。

如果你喜欢做模版,可以看看:Discuz模板的制作方法
如果你还不会安装模板,可以看看:Discuz模板的安装方法
参与人数 1帮币 +1 收起 理由
泪过无痕 + 1 很给力!http://www.hanhanxs.com/

查看全部评分总评分 : 帮币 +1





上一篇:DiscuzX2.5开启主题封面模式 弹出切换浏览模式提示框的方法
下一篇:如何通过修改积分来调整会员普通晋级用户组

大神点评814

 发表于 2012-8-15 12:18:25
转播微博
longe1013 发表于 2012-8-15 12:34:57 [系列教程] 显示全部楼层
嗯,新手值得一看。
clswang 发表于 2012-8-15 13:29:25 [系列教程] 显示全部楼层
我靠……好东西
www.huaguow.com www.hanfanba.com www.shuyangweb.com www.qiwenguan.cn cygs.org
longe1013 发表于 2012-8-15 13:48:48 [系列教程] 显示全部楼层
QQ截图20120815134356.png

嗯我尝试了下出现上图所示的乱码是什么问题呢?
 楼主| ARCHY明星会员实名认证 发表于 2012-8-15 14:03:50 [系列教程] 显示全部楼层
longe1013 发表于 2012-8-15 13:48
嗯我尝试了下出现上图所示的乱码是什么问题呢?

应该是你做的页面的编码和你论坛的编码不一样导致的
 发表于 2012-8-15 15:53:36
转播微博
缘冥 发表于 2012-8-15 16:10:41 [系列教程] 显示全部楼层
顶一个
非一般感觉明星会员实名认证 发表于 2012-8-15 18:29:01 [系列教程] 显示全部楼层
  好教材啊
神马都是浮云... ...
longe1013 发表于 2012-8-16 11:25:50 [系列教程] 显示全部楼层
ARCHY 发表于 2012-8-15 14:03
应该是你做的页面的编码和你论坛的编码不一样导致的

如何解决,楼主这个页面的编码是什么?不是GB2312吗?

补充内容 (2012-8-16 11:36):
我检查下去 应该用的是简体中文编码啊?

补充内容 (2012-8-16 11:47):
依然这样,还是没法解决
无敌@小强 发表于 2012-8-16 13:41:42 [系列教程] 显示全部楼层
看看 不错的样子
蓝海星空 发表于 2012-8-16 14:14:20 [系列教程] 显示全部楼层
好东西啊
加油
 楼主| ARCHY明星会员实名认证 发表于 2012-8-16 14:36:48 [系列教程] 显示全部楼层
longe1013 发表于 2012-8-16 11:25
如何解决,楼主这个页面的编码是什么?不是GB2312吗?

补充内容 (2012-8-16 11:36):

一般DZ是GBK UTF8
阿牧童母婴网 发表于 2012-8-17 09:19:07 [系列教程] 显示全部楼层
这个教程不错,收藏了!
qhitman 发表于 2012-8-17 15:36:44 [系列教程] 显示全部楼层
这种回复木有意义
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

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