输入验证码,即可复制
微信扫码关注,即可获得验证码
回复关键词“验证码”只需要3秒时间
查看: 3462|回复: 2
收起左侧

[Discuz!] Discuz! 单页制作教程

2020-7-15 22:49:57 | 显示全部楼层 |阅读模式

马上注册,结交更多技术大咖,享用更多功能,使学而思之学而用之。

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

x
本帖最后由 海纳百川 于 2020-7-15 22:52 编辑

首先,单页包括该单页的php文件和该单页的模板(.htm)文件,比如:host.php、host.htm
单页的php文件内容如下:
  1. <?php
  2. require './source/class/class_core.php';//引入系统核心文件
  3. $discuz = & discuz_core::instance();//以下代码为创建及初始化对象
  4. $discuz->cachelist = $cachelist;
  5. $discuz->init();
  6. include template('forum/about');//调用单页模版文件
  7. ?>
复制代码
这里需要注意的是,about为模板文件名,不需要加.htm扩展名,模板文件存放于自己当前风格目录下的forum目录,单页的php文件存放于论坛根目录。

php文件创建完毕,现在开始创建模版文件,基本代码如下:
  1. {subtemplate common/header}
  2. <div id="pt" class="wp">
  3.         <a href="index.php">首页</a> › 关于我们
  4. </div>
  5. <style id="diy_style" type="text/css"></style>
  6. <div id="ct" class="wp cl w">

  7.         <div class="mn mw">
  8.                 <div class="content">
  9.                               
  10.                      这里是自己正文区域的代码
  11.                         
  12.                 </div>
  13.         </div>
  14. </div>

  15. {subtemplate common/footer}
复制代码
其中:
<a href="index.php" class="nvhm">$_G[setting][bbname]</a> › 关于我们这一行是单页的路径显示,比如:首页 › 关于我们,{subtemplate common/header}、{subtemplate common/footer}分别为调用页头、页尾模板,使得单页风格与论坛保持一致。


如:首页 › 关于我们,{subtemplate common/header}、{subtemplate common/footer}分别为调用页头、页尾模板,使得单页风格与论坛保持一致。

以下为带右边侧栏单页模板
上面模板文件代码是不带边栏的,现在讲下带边栏的单页模板文件代码,如下:
  1. {subtemplate common/header}
  2. <div id="pt" class="wp"><a href="index.php" class="nvhm">$_G[setting][bbname]</a> › 会员风采</div>
  3. <div id="ct" class="wp cl n">
  4.         <div class="mn">
  5.             <div class="bm">
  6.                         <h1 class="mt">![](static/image/feed/profile.gif) 分类浏览</h1>
  7.                         <div class="datalist" style="margin:10px 0;">
  8.                
  9.                                这里是正文区域代码
  10.                                 
  11.                         </div>
  12.                 </div>
  13.         </div>

  14.         <!--边栏区域代码开始-->
  15.         <div id="psd" class="sd">

  16.         <div class="bn">
  17.                 <p><strong>栏目名称</p>
  18.                 <p><a href="#">边栏菜单名称</a></p>
  19.                 <p><a href="#">边栏菜单名称</a></p>
  20.                 <p><a href="#">边栏菜单名称</a></p>
  21.         </div>

  22.         <div class="bn">
  23.                 <p><strong>管理面板</strong></p>
  24.                 <p><a href="#">添加分类</a></p>
  25.                 <p><a href="#">管理分类</a></p>
  26.                 <p><a href="#">返回会员风采</a></p>
  27.         </div>

  28.         </div>
  29.         <!--边栏区域代码结束-->
  30. </div>

  31. {subtemplate common/footer}
复制代码
其中:边栏区域代码中,每个<div class="bn">区块为一个边栏菜单区域。
以下为带右边侧栏且多页选项卡切换
刚看看到论坛有站长问单页中如何做那个多页面选项卡切换,下面介绍下。
其实就是多了几行代码,都是DX系统自带的,直接使用即可,在上面带右侧边栏模板代码的:
  1. <h1 class="mt">
  2. ![](static/image/feed/profile.gif)
  3. 分类浏览
  4. </h1>
复制代码
这一行下面加入:
  1. <ul class="tb cl">
  2.                                 <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=new">最新发布</a></li>
  3.                                 <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=view">浏览排行</a></li>
  4.                                 <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=comment">回复排行</a></li>
  5.                 <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=rate">评分排行</a></li>
  6.                         </ul>
复制代码
解释上面代码,其中每个<li>标签,就是一个选项卡,里面的超链接host.php?viewtype=new,这里的viewtype就是指定一个变量,并且指定值为new,点击这个选项卡时候$_G[gp_viewtype]就会获取到这个值,然后通过判断$_G[gp_viewtype]的值,来选择当前选项卡是否为焦点选项。
既然说到多页,那么多个页面如何做,思路可以有两种,一种是建立多个单页,包括多个php文件和多个模板文件,当然这种方法比较直接,但是比较麻烦,可以在同一个模板文件中判断$_G[gp_viewtype]的值来选择显示不同的内容,比如在正文区域中如下代码:
  1. <!--{if $_G[gp_viewtype] == 'new'}-->
  2. 这里显示的是new选项卡下的内容
  3. <!--{elseif $_G[gp_viewtype] == 'view'}-->
  4. 这里显示view选项卡下的内容
  5. <!--{elseif $_G[gp_viewtype] == 'comment'}-->
  6. 这里显示comment选项卡下的内容
  7. <!--{/if}-->
复制代码
这样就实现了一个模版文件中多个页面的效果。点击不同选项卡,显示不同内容。
以下为可以DIY的单页教程
自己制作的单页中,如何又能使用DX的DIY功能呢?
只需要稍加改造,即可完成,如下:
将单页php文件调用模板的那行代码改成:
  1. include template('diy:forum/host');
复制代码
这样就可以加载DIY模块,然后在单页模版中,添加DIY区域,如下:

  1. <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->
复制代码
这就是一个DIY区域,如果要多个区域,则:

  1. <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->
  2. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
  3. <!--[diy=diy3]--><div id="diy3" class="area"></div><!--[/diy]-->
复制代码
将里面diy1,diy2,diy3区分开来即可。
比如,在单页模板代码的<div id="pt" class="wp">这一个div层块的上面或下面加:
  1. <div class="wp">
  2.         <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->
  3. </div>
复制代码
这样就可以实现单页DIY功能了,需要说明的是,模版中要在什么地方加DIY区域,根据自己需要,并不是固定死的,自己设计在哪,就在哪里加入。


转载来自老霍个人主页





社区致力于让你与世界拉近距离,让知识无处不在,让学习与站内功能使用更佳便捷、让工作变得更佳高效。
 本文来自网友个人观点,不代表“三煜论坛”立场,转载请注明出处,侵权行为请与站长→三煜论坛←联系。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

热点推荐

微信扫一扫与您分享经验

技术人生栏目

移动微社区

商务洽谈|举报反馈|反馈建议|赞助|成为版主|内容举报|邀 请 码|留言 🙂 QQ线上与站长交互交流

关于本站

隶属友祥科技(YxNetwork)旗下品牌社区。中国网络技术联盟CNTA - 战略合作伙伴,致力于中国网络技术在线支持与实战经验分享最强网工社区。

Copyright © 2007- | 三煜论坛 | Comsenz Inc. Powered by Discuz! X3.4 ( 湘ICP备11013266号 )

GMT+8, 2024-10-6 20:54 , Processed in 0.724241 second(s), 16 queries , Gzip On, MemCache On.

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