销售站 - 一站式品质服务平台,一体化商城系统.

24小时服务电话

134-2860-6060

查看: 449|回复: 0

[综合教程] 单页制作教程 For Discuz!X2(DIY/左右边栏/标签选项卡)

[复制链接]
发表于 2017-3-20 20:39:23 | 显示全部楼层 |阅读模式
填写您的邮件地址,订阅我们的精彩内容:
[受理编号:SL-1993]
填写您的邮件地址,订阅我们的精彩内容:
  此方法简单到只有一句话:新建一个专题就行了,还可以自定义二级域名和URL,可以设置是否包括页头、页脚,Title/Keywords/description等信息自然不在话下。
新建完后就可以DIY,想往里加什么就加什么。

鉴于此方法太过简单,本文过于单薄,所以增加一个普通方法供大家比较。
本次教程相对于以前版本的单页制作教程的区别:
修复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. <style id="diy_style" type="text/css"></style>
  3. <div id="pt" class="bm cl">
  4.     <div class="z">
  5.         <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a><em>»</em>
  6.         <a href="forum.php">$_G[setting][bbname]</a><em>»</em>
  7.         <a href="javascript:;">$navtitle</a>
  8.     </div>
  9. </div>
  10. <div id="ct" class="wp cl">
  11.     <div class="mn bm cl">
  12.         <div class="bm_c">
  13.             <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p>            
  14.         </div>
  15.     </div>
  16. </div>
  17. <!--{template common/footer}-->
复制代码
-------------------------------------------------------------------------------------

可DIY的单页模版文件代码如下:
  1. <!--{template common/header}-->
  2. <style id="diy_style" type="text/css"></style>
  3. <div id="pt" class="bm cl">
  4.     <div class="z">
  5.         <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a><em>»</em>
  6.         <a href="forum.php">$_G[setting][bbname]</a><em>»</em>
  7.         <a href="javascript:;">$navtitle</a>
  8.     </div>
  9. </div>

  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区域的代码,之前X1.5的单页教程里面我们也讲到过,可以在单页的任意位置插入DIY区域,即:

  1. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
复制代码
注意:如果一个页面要插入多个DIY区域,注意修改上面DIY区域的编号ID,几个DIY区域的ID编号不能相同。
-------------------------------------------------------------------------------------

带有右侧边栏的单页模版文件代码:
  1. <!--{subtemplate common/header}-->
  2. <style id="diy_style" type="text/css"></style>

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

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

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

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

带有左侧边栏的单页模版文件代码:
  1. <!--{subtemplate common/header}-->
  2. <style id="diy_style" type="text/css"></style>

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

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

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

  65. <!--{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;">
复制代码
就是说只是左右对调一下。
-------------------------------------------------------------------------------------


带有标签选项卡的单页模版:
  1. <!--{subtemplate common/header}-->
  2. <style id="diy_style" type="text/css"></style>

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

  10. <div id="ct" class="wp cl ct2">
  11.     <div class="mn bm cl" style="float:right;">
  12.         <div class="bm_h">标题栏</div>
  13.         <div class="bm_c">
  14.             
  15.             <ul class="tb cl">
  16.                                 <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=new">最新发布</a></li>
  17.                                 <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=view">浏览排行</a></li>
  18.                                 <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=comment">回复排行</a></li>
  19.                 <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=rate">评分排行</a></li>
  20.                         </ul>
  21.             
  22.            <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p>
  23.             
  24.         </div>
  25.     </div>
  26.    
  27.         <div class="sd" style="float:left;">
  28.    
  29.         <div class="bm">
  30.             <div class="bm_h">
  31.                 <h2>公告栏</h2>
  32.             </div>
  33.             <div class="bm_c">
  34.                 <p class="xl xl2 cl" style="line-height:25px;">
  35.                     这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容
  36.                 </p>
  37.             </div>
  38.         </div>
  39.         
  40.         <div class="bm">
  41.             <div class="bm_h">
  42.                 <h2>操作菜单</h2>
  43.             </div>
  44.             <div class="bm_c">
  45.                 <ul class="xl xl2 cl">
  46.                     <li><a href="#">测试菜单一</a></li>
  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.                 </ul>
  53.             </div>
  54.         </div>

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

  72. <!--{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>
复制代码
此次教程整理结束。

本帖子中包含更多资源

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

x
回复
〖销售站〗一站式品质服务平台. 一体化商城系统.【www.xiaoshouzhan.com】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

销售站-一体化商城系统!
 
 
Q Q|技术部
销售|销售部
客服|销售站实体店
分流|销售站实体店
视频解析群:
好记吧
产品售后群:
站长源码(交易平台)
域名拍卖群:
域名拍卖群
产品维权群:
藤县站
微信客服中心:
/images/niwota00000000300.jpg
工作时间:
8:00-18:00
 
版权所有:销售站

QQ|关于我们|手机版|( 粤ICP备16099612号-2|网站地图  | Sponsor: 好记吧物联网