• 首页
  • 社区BBS
  • 使用教程
  • 应用中心
  • 开放平台
  • WitFrame
  • 服务中心
    • 立即注册
    Discuz! 官方交流社区»社区 › Discuz! X 交流与讨论 › Discuz! X 教程 › 单页制作教程 For Discuz!X2（DIY/左右边栏/标签选项卡 ...
    12345下一页
    返回列表 发帖
    查看: 15075|回复: 42

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

     火
    dashen

    56

    主题

    1455

    回帖

    3万

    积分

    管理员

    贡献
    2072 点
    金币
    1383 个
    发表于 2021-12-15 13:08:50 | 显示全部楼层 |阅读模式
    作者：体无完肤
    首先，单页包括该单页的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>&raquo;</em>
    6.         <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</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}-->
    复制代码
    效果如下：

    1.jpg

    -------------------------------------------------------------------------------------

    可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>&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 class="wp">
    12. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
    13. </div>


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

    26. <!--{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>

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

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

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

    69. <!--{subtemplate common/footer}-->
    复制代码
    效果如下：
    2.jpg



    -------------------------------------------------------------------------------------

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

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

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

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

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

    演示效果如下：

    3.jpg

    -------------------------------------------------------------------------------------


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

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

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

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

    76. <!--{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>
    复制代码
    效果如下：

    4.jpg

    此次教程整理结束。

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

    使用道具 举报

    Xianger2120

    20

    主题

    118

    回帖

    229

    积分

    炉火纯青

    贡献
    0 点
    金币
    38 个
    发表于 2021-12-15 13:31:13 来自手机 | 显示全部楼层
    学习学习
    回复

    使用道具 举报

    CG小霸王

    7

    主题

    26

    回帖

    41

    积分

    初学乍练

    贡献
    0 点
    金币
    6 个
    发表于 2021-12-15 21:12:35 | 显示全部楼层
    学习学习
    回复

    使用道具 举报

    Xianger2120

    20

    主题

    118

    回帖

    229

    积分

    炉火纯青

    贡献
    0 点
    金币
    38 个
    发表于 2021-12-18 10:00:51 来自手机 | 显示全部楼层

    include template('forum/host');//调用单页模版文件
    如果调用的模板里面有加载其他数据，直接调用单页模板不显示页面的数据，这个应该怎么加呢
    回复 支持 反对

    使用道具 举报

    dashen

    56

    主题

    1455

    回帖

    3万

    积分

    管理员

    贡献
    2072 点
    金币
    1383 个
     楼主| 发表于 2021-12-18 13:12:04 | 显示全部楼层
    Xianger2120 发表于 2021-12-18 10:00
    include template('forum/host');//调用单页模版文件
    如果调用的模板里面有加载其他数据，直接调用单页模 ...

    不知道你说什么
    回复 支持 反对

    使用道具 举报

    玩慈利网

    5

    主题

    39

    回帖

    50

    积分

    应用开发者

    贡献
    0 点
    金币
    3 个
    发表于 2021-12-20 11:59:02 | 显示全部楼层
    厉害厉害，dz我还是只摸到皮毛，向大佬学习
    回复 支持 反对

    使用道具 举报

    無名

    11

    主题

    363

    回帖

    654

    积分

    自成一派

    贡献
    2 点
    金币
    191 个
    发表于 2021-12-20 20:26:04 | 显示全部楼层
    感谢分享！
    回复

    使用道具 举报

    ysx24

    285

    主题

    1179

    回帖

    1568

    积分

    已臻大成

    贡献
    3 点
    金币
    0 个
    发表于 2021-12-21 20:00:02 来自手机 | 显示全部楼层
    模板不错
    回复

    使用道具 举报

    xiongmao

    0

    主题

    42

    回帖

    59

    积分

    渐入佳境

    贡献
    0 点
    金币
    15 个
    QQ
    发表于 2021-12-26 16:25:47 | 显示全部楼层
    666666666666666666666
    这里的资源超出你的想象，好多百度都没有：https://bbs.8jw.top
    回复 支持 反对

    使用道具 举报

    bkevin0829

    4

    主题

    69

    回帖

    95

    积分

    渐入佳境

    贡献
    1 点
    金币
    15 个
    发表于 2021-12-26 22:03:03 | 显示全部楼层
    这个很牛啊。学习一下
    回复 支持 反对

    使用道具 举报

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

    本版积分规则

    产品服务

    Discuz! 程序下载 Discuz! 应用中心 Discuz! 开放平台

    开发者服务

    开发者服务 魔方加密 应用分销

    使用教程

    Discuz! 资料库 Discuz! 使用教程 Discuz! 开发教程
    • 关注公众号
    • 有偿服务微信
    • 有偿服务QQ

    手机版|小黑屋|Discuz! 官方交流社区 ( 皖ICP备16010102号 |皖公网安备34010302002376号 )|网站地图|star

    GMT+8, 2024-4-24 21:38 , Processed in 0.057220 second(s), 8 queries , Redis On.

    Powered by Discuz! W1.0 Licensed

    Cpoyright © 2001-2024 Discuz! Team.

    关灯 在本版发帖
    有偿服务QQ
    有偿服务微信
     返回顶部
    快速回复 返回顶部 返回列表