巴中热线

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 159|回复: 0

[电脑网络] Discuz模板单页制作教程 discuz论坛系统如何制作单独网页

[复制链接]
发表于 2018-9-12 10:47:36 | 显示全部楼层 |阅读模式

注册巴中热线论坛,交好友享优惠,衣食住行吃喝玩乐尽在 BZHOT.com

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

x
本文主要讲解Discuz论坛系统单个网页的制作方法,包括单页的DIY,选项卡页面的制作等。单个页面头部和底部还是保持论坛原样,也可以自己修改,或者用diy实现。

discuz创建单页总体分两步:包括该单页的php文件和该单页的模板(.htm)文件,比如:news.php、news.htm。

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

第一步、创建一个单页news.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. ?>
复制代码
注意:news为模板文件名,不需要加.htm扩展名,模板文件存放于默认风格目录下的forum目录。

第二步、创建单页模板news.htm文件。放在你的模板目录下,默认模板template/default/forum/

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>&#187;</em>
  5.                <a href="forum.php">$_G[setting][bbname]</a><em>&#187;</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>&#187;</em>
  5.           <a href="forum.php">$_G[setting][bbname]</a><em>&#187;</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.            <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p>
  17.            </div>
  18.         </div>
  19. </div>

  20. <!--{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>&#187;</em>
  5.            <a href="forum.php">$_G[setting][bbname]</a><em>&#187;</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.             <p style="width:300px; margin:220px auto; text-align:center;">这里是单页正文内容区域</p>
  14.             </div>
  15.         </div>
  16.             <div class="sd">
  17.             <div class="bm">
  18.             <div class="bm_h">
  19.                 <h2>公告栏</h2>
  20.             </div>
  21.             <div class="bm_c">
  22.                 <p class="xl xl2 cl" style="line-height:25px;">这里可以放一些公告通知类的文字内容</p>
  23.             </div>
  24.         </div>
  25.         
  26.         <div class="bm">
  27.             <div class="bm_h">
  28.                 <h2>操作菜单</h2>
  29.             </div>
  30.             <div class="bm_c">
  31.                     <ul class="xl xl2 cl">
  32.             <li><a href="#">测试菜单一</a></li>
  33.             <li><a href="#">测试菜单二</a></li>
  34.             <li><a href="#">测试菜单三</a></li>
  35.             <li><a href="#">测试菜单四</a></li>
  36.             <li><a href="#">测试菜单五</a></li>
  37.             <li><a href="#">测试菜单六</a></li>
  38.                     </ul>
  39.             </div>
  40.             </div>

  41.         <div class="bm">
  42.             <div class="bm_h">
  43.                  <h2>版权信息</h2>
  44.             </div>
  45.             <div class="bm_c" style="line-height:25px;">
  46.                      <ul>
  47.             <li>作者:<a href="http://bbs.bzhot.com/" target="_blank">巴中热线</a></li>
  48.             <li>网站:<a href="http://bbs.bzhot.com/" target="_blank">巴中论坛</a></li>
  49.             <li>版权:巴中热线网</li>
  50.                       </ul>
  51.                 </div>
  52.                 </div>
  53.     </div>
  54. </div>

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

4、带有标签选项卡的单页模版:

  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>&#187;</em>
  5.            <a href="forum.php">$_G[setting][bbname]</a><em>&#187;</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" style="float:right;">
  11.             <div class="bm_h">标题栏</div>
  12.               <div class="bm_c">
  13.             <ul class="tb cl">
  14.               <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=new">最新发布</a></li>
  15.               <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=view">浏览排行</a></li>
  16.               <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=comment">回复排行</a></li>
  17.               <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=rate">评分排行</a></li>
  18.             </ul>
  19. <div class="archy_con">
  20. <!--{if $_G[gp_viewtype] == 'new'}-->
  21. 这里显示的是new选项卡下的内容
  22. <!--{elseif $_G[gp_viewtype] == 'view'}-->
  23. 这里显示view选项卡下的内容
  24. <!--{elseif $_G[gp_viewtype] == 'comment'}-->
  25. 这里显示comment选项卡下的内容
  26. <!--{/if}-->
  27. </div>
  28.         </div>
  29.         </div>
  30.             <div class="sd" style="float:left;">
  31.             <div class="bm">
  32.               <div class="bm_h"><h2>公告栏</h2></div>
  33.               <div class="bm_c">
  34.               <p class="xl xl2 cl" style="line-height:25px;">这里可以放一些公告通知类的文字内容这</p>
  35.               </div>
  36.               </div>

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

  50.         <div class="bm">
  51.                 <div class="bm_h"><h2>版权信息</h2></div>
  52.                 <div class="bm_c" style="line-height:25px;">
  53.                     <ul>
  54.                     <li>作者:<a href="http://www.bzhot.com/" target="_blank">巴中热线</a></li>
  55.                     <li>网站:<a href="http://www.bzhot.com/" target="_blank">巴中热线</a></li>
  56.                     <li>版权:巴中热线</li>
  57.                     </ul>
  58.                 </div>
  59.                 </div>
  60.     </div>
  61. </div>
  62. <!--{subtemplate common/footer}-->
复制代码

其中
  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}-->
复制代码
这样就实现了一个模版文件中多个页面的效果。点击不同选项卡,显示不同内容。
* 本文根据站帮教程整理,在discuzX2.5 - discuzX3.4环境测试通过





上一篇:Centos7如何修改ssh默认远程连接端口号
下一篇:批量修改discuz已发布贴子内容和帖子标题方法
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

巴中热线 - 精彩推荐上一条 /1 下一条

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