Discuz教程网

1314学习网»站长论坛 › discuz资源中心 › discuz教程 › Discuz X2 单页制作教程（DIY/左右边栏/标签选项卡）
返回列表 发新帖

Discuz X2 单页制作教程（DIY/左右边栏/标签选项卡）

[复制链接]
authicon dly 发表于 2011-6-15 12:35:54 | 显示全部楼层 |阅读模式
本次教程相对于以前版本的单页制作教程的区别：
修复Discuz!X2单页DIY后无法保存的问题；

首先，单页包括该单页的php文件和该单页的模板（.htm）文件，比如：host.php、host.htm

普通单页的php文件内容如下：
  1. <?php
  2. define('CURSCRIPT', 'test');
  3. require './source/class/class_core.php';//引入系统核心文件
  4. $discuz = & discuz_core::instance();//以下代码为创建及初始化对象
  5. $discuz->init();
  6. $navtitle = '官方QQ群列表';
  7. $metakeywords = 'QQ群,官方,discuz,DRC,7drc,QQ';
  8. $metadescription = '该页面展示Discuz! Rescue Centre 官方QQ群系，加入本站官方QQ群可及时了解掌握最新动态、插件、模版第一手信息。请勿加入多个QQ群，珍惜有限的群资源。';
  9. include template('forum/host');//调用单页模版文件
  10. ?>
复制代码
这里需要注意的是，host为模板文件名，不需要加.htm扩展名，模板文件存放于默认风格目录下的forum目录；
单页的php文件存放于论坛根目录；

$navtitle = '官方QQ群列表'; 这一句是定义单页的标题，显示于浏览器顶部的网页标题
$metakeywords = 'QQ群,官方,discuz,DRC,7drc,QQ'; 是单页的关键词信息
$metadescription 是单页的描述信息。

可DIY的单页PHP文件代码内容如下：
  1. <?php
  2. define('CURSCRIPT', 'test');
  3. require './source/class/class_core.php';//引入系统核心文件
  4. $discuz = & discuz_core::instance();//以下代码为创建及初始化对象
  5. $discuz->init();
  6. loadcache('diytemplatename');
  7. $navtitle = '官方QQ群列表';
  8. $metakeywords = 'QQ群,官方,discuz,DRC,7drc,QQ';
  9. $metadescription = '该页面展示Discuz! Rescue Centre 官方QQ群系，加入本站官方QQ群可及时了解掌握最新动态、插件、模版第一手信息。请勿加入多个QQ群，珍惜有限的群资源。';
  10. include template('diy:forum/host');//调用单页模版文件
  11. ?>
复制代码

注：其中 loadcache('diytemplatename'); 为Discuz!X2对DIY这一块做的更新，DIY要载入缓存，所以以前X1.5的单页制作教程做出来的单页DIY会无法保存。DIY的单页模版文件，修改单页模版内容后需要更新缓存才能刷新出来。


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


普通单页的模版文件代码：
  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}-->
复制代码

效果如下：

 1314学习网图片15.jpg
-------------------------------------------------------------------------------------

可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>

  10. <div class="wp">
  11. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
  12. </div>


  15. <div id="ct" class="wp cl">
  16. <div class="mn bm cl">
  17. <div class="bm_c">

  19. <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p>

  21. </div>
  22. </div>
  23. </div>

  25. <!--{template common/footer}-->
复制代码

其中：
  1. <div class="wp">
  2. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
  3. </div>
复制代码

这段代码就是DIY区域的代码，之前X1.5的单页教程里面我们也讲到过，可以在单页的任意位置插入DIY区域，即：
  1. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
复制代码

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

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

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

  11. <div id="ct" class="wp cl ct2">
  12. <div class="mn bm cl">
  13. <div class="bm_h">标题栏</div>
  14. <div class="bm_c">

  16. <p style="width:300px; margin:220px auto; text-align:center;">这里是单页正文内容区域</p>

  18. </div>
  19. </div>

  21. <div class="sd">

  23. <div class="bm">
  24. <div class="bm_h">
  25. <h2>公告栏</h2>
  26. </div>
  27. <div class="bm_c">
  28. <p class="xl xl2 cl" style="line-height:25px;">
  29. 这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容
  30. </p>
  31. </div>
  32. </div>

  34. <div class="bm">
  35. <div class="bm_h">
  36. <h2>操作菜单</h2>
  37. </div>
  38. <div class="bm_c">
  39. <ul class="xl xl2 cl">
  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. <li><a href="#">测试菜单五</a></li>
  45. <li><a href="#">测试菜单六</a></li>
  46. </ul>
  47. </div>
  48. </div>


  51. <div class="bm">
  52. <div class="bm_h">
  53. <h2>版权信息</h2>
  54. </div>
  55. <div class="bm_c" style="line-height:25px;">
  56. <ul>
  57. <li>作者：<a href="http://www.mutoulee.cn" target="_blank">体无完肤</a></li>
  58. <li>网站：<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li>
  59. <li>版权：Discuz! Rescue Centre</li>
  60. </ul>
  61. </div>
  62. </div>

  64. </div>

  66. </div>

  68. <!--{subtemplate common/footer}-->
复制代码

效果如下：

 1314学习网图片16.jpg
-------------------------------------------------------------------------------------

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

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

  11. <div id="ct" class="wp cl ct2">
  12. <div class="mn bm cl" style="float:right;">
  13. <div class="bm_h">标题栏</div>
  14. <div class="bm_c">

  16. <p style="width:300px; margin:220px auto; text-align:center;">这里是单页正文内容区域</p>

  18. </div>
  19. </div>

  21. <div class="sd" style="float:left;">

  23. <div class="bm">
  24. <div class="bm_h">
  25. <h2>公告栏</h2>
  26. </div>
  27. <div class="bm_c">
  28. <p class="xl xl2 cl" style="line-height:25px;">
  29. 这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容
  30. </p>
  31. </div>
  32. </div>

  34. <div class="bm">
  35. <div class="bm_h">
  36. <h2>操作菜单</h2>
  37. </div>
  38. <div class="bm_c">
  39. <ul class="xl xl2 cl">
  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. <li><a href="#">测试菜单五</a></li>
  45. <li><a href="#">测试菜单六</a></li>
  46. </ul>
  47. </div>
  48. </div>


  51. <div class="bm">
  52. <div class="bm_h">
  53. <h2>版权信息</h2>
  54. </div>
  55. <div class="bm_c" style="line-height:25px;">
  56. <ul>
  57. <li>作者：<a href="http://www.mutoulee.cn" target="_blank">体无完肤</a></li>
  58. <li>网站：<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li>
  59. <li>版权：Discuz! Rescue Centre</li>
  60. </ul>
  61. </div>
  62. </div>

  64. </div>

  66. </div>

  68. <!--{subtemplate common/footer}-->
复制代码
注意观察这个左侧边栏的模版代码和右侧边栏的模版代码，可以发现，代码其实都一样，只是更改一下CSS样式。

<div class="mn bm cl"> 给这个div加一个向右浮动，即：
  1. <div class="mn bm cl" style="float:right;">
复制代码

再给 <div class="sd"> 这个div加一个向左浮动的CSS样式，即：
  1. <div class="sd" style="float:left;">
复制代码

就是说只是左右对调一下。

演示效果如下：

1314学习网图片17.jpg
-------------------------------------------------------------------------------------


带有标签选项卡的单页模版：
  1. <!--{subtemplate common/header}-->

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

  11. <div id="ct" class="wp cl ct2">
  12. <div class="mn bm cl" style="float:right;">
  13. <div class="bm_h">标题栏</div>
  14. <div class="bm_c">

  16. <ul class="tb cl">
  17. <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=new">最新发布</a></li>
  18. <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=view">浏览排行</a></li>
  19. <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=comment">回复排行</a></li>
  20. <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=rate">评分排行</a></li>
  21. </ul>

  23. <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p>

  25. </div>
  26. </div>

  28. <div class="sd" style="float:left;">

  30. <div class="bm">
  31. <div class="bm_h">
  32. <h2>公告栏</h2>
  33. </div>
  34. <div class="bm_c">
  35. <p class="xl xl2 cl" style="line-height:25px;">
  36. 这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容
  37. </p>
  38. </div>
  39. </div>

  41. <div class="bm">
  42. <div class="bm_h">
  43. <h2>操作菜单</h2>
  44. </div>
  45. <div class="bm_c">
  46. <ul class="xl xl2 cl">
  47. <li><a href="#">测试菜单一</a></li>
  48. <li><a href="#">测试菜单二</a></li>
  49. <li><a href="#">测试菜单三</a></li>
  50. <li><a href="#">测试菜单四</a></li>
  51. <li><a href="#">测试菜单五</a></li>
  52. <li><a href="#">测试菜单六</a></li>
  53. </ul>
  54. </div>
  55. </div>


  58. <div class="bm">
  59. <div class="bm_h">
  60. <h2>版权信息</h2>
  61. </div>
  62. <div class="bm_c" style="line-height:25px;">
  63. <ul>
  64. <li>作者：<a href="http://www.mutoulee.cn" target="_blank">体无完肤</a></li>
  65. <li>网站：<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li>
  66. <li>版权：Discuz! Rescue Centre</li>
  67. </ul>
  68. </div>
  69. </div>

  71. </div>

  73. </div>

  75. <!--{subtemplate common/footer}-->
复制代码

注意观察你会发现，选项卡这一部分跟X1.5一样的，就是在模版的正文区域的div内增加一段代码：
  1. <ul class="tb cl">
  2. <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=new">最新发布</a></li>
  3. <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=view">浏览排行</a></li>
  4. <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=comment">回复排行</a></li>
  5. <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=rate">评分排行</a></li>
  6. </ul>
复制代码
效果如下：

 1314学习网图片18.jpg

discuz, 模板, 更新缓存



上一篇：Discuz X2 仿腾讯的“游戏人生”页面 [引导页]
下一篇：Discuz X2 魔法卡片插件，根据发帖际遇修改，大家都喜欢所以分享出来

相关帖子
回复

举报

authicon BOHOHOBO 发表于 2011-6-16 09:51:20 | 显示全部楼层
沙发，，学习了
回复

举报

authicon 主编 发表于 2011-6-22 17:07:00 | 显示全部楼层
LZ霸气！！！！
回复

举报

authicon huanayue 发表于 2012-3-10 21:10:09 | 显示全部楼层
太感谢了～成功了～特地来回帖感谢～
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 14:15

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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