查看: 253170|回复: 216

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

[复制链接]

 成长值: 11030

id UID : 1

7Sh0y8N 等级 : 管理员

hioC9EW 仙豆 : 150357

i7yRHRr 热心 : 181

黑金实名彩钻勋章最高成就勋章 国庆节纪念勋章虎年纪念勋章冰墩墩热火一夏五一勋章兔年纪念勋章世界杯勋章  

QQ

发表于 2021-10-14 22:09 | 显示全部楼层 |阅读模式
首先,单页包括该单页的php文件和该单页的模板(.htm)文件,比如:host.php、host.htm

单页的php文件内容如下:
  1. [/size][/font]<?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. ?>[font=Tahoma, &quot][size=4]
复制代码

这里需要注意的是,about为模板文件名,不需要加.htm扩展名,模板文件存放于自己当前风格目录下的forum目录,单页的php文件存放于论坛根目录。
php文件创建完毕,现在开始创建模版文件,基本代码如下:
  1. [/size][/font]{subtemplate common/header}
  2. <div id="pt" class="wp">
  3.         <a href="index.php">首页</a> &rsaquo; 关于我们
  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.                 </div>
  11.         </div>
  12. </div>

  13. {subtemplate common/footer}[font=Tahoma, &quot][size=4]
复制代码

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



至此,基本型单页创建完毕。
以下为带右边侧栏单页模板



上面模板文件代码是不带边栏的,现在讲下带边栏的单页模板文件代码,如下:
  1. [/size][/font][font=Tahoma, Microsoft Yahei, Simsun][size=4]{subtemplate common/header}[/size][/font]
  2. [font=Tahoma, Microsoft Yahei, Simsun][size=4]<div id="pt" class="wp"><a href="index.php" class="nvhm">$_G[setting][bbname]</a> &rsaquo; 会员风采</div>[/size][/font]
  3. [font=Tahoma, Microsoft Yahei, Simsun][size=4]<div id="ct" class="wp cl n">[/size][/font]
  4. [font=Tahoma, Microsoft Yahei, Simsun][size=4]        <div class="mn">[/size][/font]
  5. [font=Tahoma, Microsoft Yahei, Simsun][size=4]            <div class="bm">[/size][/font]
  6. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                        <h1 class="mt">![](static/image/feed/profile.gif) 分类浏览</h1>[/size][/font]
  7. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                        <div class="datalist" style="margin:10px 0;">[/size][/font]
  8. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                [/size][/font]
  9. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                               这里是正文区域代码[/size][/font]
  10. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                                [/size][/font]
  11. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                        </div>[/size][/font]
  12. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                </div>[/size][/font]
  13. [font=Tahoma, Microsoft Yahei, Simsun][size=4]        </div>[/size][/font]
  14. [font=Tahoma, Microsoft Yahei, Simsun][size=4] [/size][/font]
  15. [font=Tahoma, Microsoft Yahei, Simsun][size=4]        <!--边栏区域代码开始-->[/size][/font]
  16. [font=Tahoma, Microsoft Yahei, Simsun][size=4]        <div id="psd" class="sd">[/size][/font]
  17. [font=Tahoma, Microsoft Yahei, Simsun][size=4] [/size][/font]
  18. [font=Tahoma, Microsoft Yahei, Simsun][size=4]        <div class="bn">[/size][/font]
  19. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                <p><strong>栏目名称</p>[/size][/font]
  20. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                <p><a href="#">边栏菜单名称</a></p>[/size][/font]
  21. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                <p><a href="#">边栏菜单名称</a></p>[/size][/font]
  22. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                <p><a href="#">边栏菜单名称</a></p>[/size][/font]
  23. [font=Tahoma, Microsoft Yahei, Simsun][size=4]        </div>[/size][/font]
  24. [font=Tahoma, Microsoft Yahei, Simsun][size=4] [/size][/font]
  25. [font=Tahoma, Microsoft Yahei, Simsun][size=4]        <div class="bn">[/size][/font]
  26. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                <p><strong>管理面板</strong></p>[/size][/font]
  27. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                <p><a href="#">添加分类</a></p>[/size][/font]
  28. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                <p><a href="#">管理分类</a></p>[/size][/font]
  29. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                <p><a href="#">返回会员风采</a></p>[/size][/font]
  30. [font=Tahoma, Microsoft Yahei, Simsun][size=4]        </div>[/size][/font]
  31. [font=Tahoma, Microsoft Yahei, Simsun][size=4] [/size][/font]
  32. [font=Tahoma, Microsoft Yahei, Simsun][size=4]        </div>[/size][/font]
  33. [font=Tahoma, Microsoft Yahei, Simsun][size=4]        <!--边栏区域代码结束-->[/size][/font]
  34. [font=Tahoma, Microsoft Yahei, Simsun][size=4]</div>[/size][/font]
  35. [font=Tahoma, Microsoft Yahei, Simsun][size=4] [/size][/font]

  36. [font=Tahoma, Microsoft Yahei, Simsun][size=4]{subtemplate common/footer}[/size][/font][font=Tahoma, &quot][size=4]
复制代码

其中:边栏区域代码中,每个<div class="bn">区块为一个边栏菜单区域。


以下为带右边侧栏且多页选项卡切换


刚看看到论坛有站长问单页中如何做那个多页面选项卡切换,下面介绍下。



其实就是多了几行代码,都是DX系统自带的,直接使用即可,在上面带右侧边栏模板代码的:
  1. [/size][/font][font=Tahoma, Microsoft Yahei, Simsun][size=4]<h1 class="mt">[/size][/font]
  2. [font=Tahoma, Microsoft Yahei, Simsun][size=4]![](static/image/feed/profile.gif)[/size][/font]
  3. [font=Tahoma, Microsoft Yahei, Simsun][size=4]分类浏览[/size][/font]

  4. [font=Tahoma, Microsoft Yahei, Simsun][size=4]</h1>[/size][/font][font=Tahoma, &quot][size=4]
复制代码

这一行下面加入:
  1. [/size][/font][font=Tahoma, Microsoft Yahei, Simsun][size=4]<ul class="tb cl">[/size][/font]
  2. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                                <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=new">最新发布</a></li>[/size][/font]
  3. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                                <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=view">浏览排行</a></li>[/size][/font]
  4. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                                <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=comment">回复排行</a></li>[/size][/font]
  5. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=rate">评分排行</a></li>[/size][/font]

  6. [font=Tahoma, Microsoft Yahei, Simsun][size=4]                        </ul>[/size][/font][font=Tahoma, &quot][size=4]
复制代码

解释上面代码,其中每个<li>标签,就是一个选项卡,里面的超链接host.php?viewtype=new,这里的viewtype就是指定一个变量,并且指定值为new,点击这个选项卡时候$_G[gp_viewtype]就会获取到这个值,然后通过判断$_G[gp_viewtype]的值,来选择当前选项卡是否为焦点选项。



既然说到多页,那么多个页面如何做,思路可以有两种,一种是建立多个单页,包括多个php文件和多个模板文件,当然这种方法比较直接,但是比较麻烦,可以在同一个模板文件中判断$_G[gp_viewtype]的值来选择显示不同的内容,比如在正文区域中如下代码:
  1. [/size][/font][font=Tahoma, Microsoft Yahei, Simsun][size=4]<!--{if $_G[gp_viewtype] == 'new'}-->[/size][/font]
  2. [font=Tahoma, Microsoft Yahei, Simsun][size=4]这里显示的是new选项卡下的内容[/size][/font]
  3. [font=Tahoma, Microsoft Yahei, Simsun][size=4]<!--{elseif $_G[gp_viewtype] == 'view'}-->[/size][/font]
  4. [font=Tahoma, Microsoft Yahei, Simsun][size=4]这里显示view选项卡下的内容[/size][/font]
  5. [font=Tahoma, Microsoft Yahei, Simsun][size=4]<!--{elseif $_G[gp_viewtype] == 'comment'}-->[/size][/font]
  6. [font=Tahoma, Microsoft Yahei, Simsun][size=4]这里显示comment选项卡下的内容[/size][/font]

  7. [font=Tahoma, Microsoft Yahei, Simsun][size=4]<!--{/if}-->[/size][/font][font=Tahoma, &quot][size=4]
复制代码

这样就实现了一个模版文件中多个页面的效果。点击不同选项卡,显示不同内容。


以下为可以DIY的单页教程


自己制作的单页中,如何又能使用DX的DIY功能呢?


只需要稍加改造,即可完成,如下:

将单页php文件调用模板的那行代码改成:
  1. [/size][/font][font=Tahoma, Microsoft Yahei, Simsun][size=4]include template('diy:forum/host');[/size][/font][font=Tahoma, &quot][size=4]
复制代码

这样就可以加载DIY模块,然后在单页模版中,添加DIY区域,如下:
  1. [/size][/font][font=Tahoma, Microsoft Yahei, Simsun][size=4]<!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->[/size][/font][font=Tahoma, &quot][size=4]
复制代码

这就是一个DIY区域,如果要多个区域,则:
  1. [/size][/font][font=Tahoma, Microsoft Yahei, Simsun][size=4]<!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->[/size][/font]
  2. [font=Tahoma, Microsoft Yahei, Simsun][size=4]<!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->[/size][/font]

  3. [font=Tahoma, Microsoft Yahei, Simsun][size=4]<!--[diy=diy3]--><div id="diy3" class="area"></div><!--[/diy]-->[/size][/font][font=Tahoma, &quot][size=4]
复制代码

将里面diy1,diy2,diy3区分开来即可。



比如,在单页模板代码的<div id="pt" class="wp">这一个div层块的上面或下面加:
  1. [/size][/font][font=Tahoma, Microsoft Yahei, Simsun][size=4]<div class="wp">[/size][/font]
  2. [font=Tahoma, Microsoft Yahei, Simsun][size=4]        <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->[/size][/font]

  3. [font=Tahoma, Microsoft Yahei, Simsun][size=4]</div>[/size][/font][font=Tahoma, &quot][size=4]
复制代码

这样就可以实现单页DIY功能了,需要说明的是,模版中要在什么地方加DIY区域,根据自己需要,并不是固定死的,自己设计在哪,就在哪里加入。

「事物」QQ:1215727616
「公告」论坛电报群:t.me/xiankeba(需科学)
回复

使用道具 举报

id UID : 10261

7Sh0y8N 等级 : 职业先客

hioC9EW 仙豆 : 14315

i7yRHRr 热心 : 0

虎年纪念勋章黑金实名  

QQ

发表于 2021-10-14 22:09 | 显示全部楼层
沙发!沙发!

发帖求助前要善用论坛搜索功能,那里可能会有你要找的答案;

移动宽带网络打不开网站解决方法:【更换其他运营商网络或者V.NP】

如何回报帮助你解决问题的吧友,一个好办法就是给对方加【好评】【仙豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

id UID : 10372

7Sh0y8N 等级 : 高级先客

hioC9EW 仙豆 : 6606

i7yRHRr 热心 : 0

虎年纪念勋章黑金实名  

QQ

发表于 2021-10-14 22:09 | 显示全部楼层
小手一抖,沙发到手!

发帖求助前要善用论坛搜索功能,那里可能会有你要找的答案;

移动宽带网络打不开网站解决方法:【更换其他运营商网络或者V.NP】

如何回报帮助你解决问题的吧友,一个好办法就是给对方加【好评】【仙豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

id UID : 10132

7Sh0y8N 等级 : 高级先客

hioC9EW 仙豆 : 6687

i7yRHRr 热心 : 0

虎年纪念勋章黑金实名新星之火热火一夏冰墩墩灌水之王牛年纪念勋章  

QQ

发表于 2021-10-14 22:10 | 显示全部楼层
沙发!沙发!

发帖求助前要善用论坛搜索功能,那里可能会有你要找的答案;

移动宽带网络打不开网站解决方法:【更换其他运营商网络或者V.NP】

如何回报帮助你解决问题的吧友,一个好办法就是给对方加【好评】【仙豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

id UID : 10299

7Sh0y8N 等级 : 职业先客

hioC9EW 仙豆 : 14686

i7yRHRr 热心 : 0

虎年纪念勋章黑金实名  

QQ

发表于 2021-10-14 22:10 | 显示全部楼层
小手一抖,沙发到手!

发帖求助前要善用论坛搜索功能,那里可能会有你要找的答案;

移动宽带网络打不开网站解决方法:【更换其他运营商网络或者V.NP】

如何回报帮助你解决问题的吧友,一个好办法就是给对方加【好评】【仙豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

id UID : 10118

7Sh0y8N 等级 : 高级先客

hioC9EW 仙豆 : 9311

i7yRHRr 热心 : 0

虎年纪念勋章黑金实名新星之火冰墩墩  

QQ

发表于 2021-10-14 22:11 | 显示全部楼层
小手一抖,沙发到手!

发帖求助前要善用论坛搜索功能,那里可能会有你要找的答案;

移动宽带网络打不开网站解决方法:【更换其他运营商网络或者V.NP】

如何回报帮助你解决问题的吧友,一个好办法就是给对方加【好评】【仙豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

id UID : 10199

7Sh0y8N 等级 : 职业先客

hioC9EW 仙豆 : 12922

i7yRHRr 热心 : 0

虎年纪念勋章黑金实名重铸荣光  

QQ

发表于 2021-10-14 22:11 | 显示全部楼层
小手一抖,沙发到手!

发帖求助前要善用论坛搜索功能,那里可能会有你要找的答案;

移动宽带网络打不开网站解决方法:【更换其他运营商网络或者V.NP】

如何回报帮助你解决问题的吧友,一个好办法就是给对方加【好评】【仙豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

id UID : 10198

7Sh0y8N 等级 : 职业先客

hioC9EW 仙豆 : 12974

i7yRHRr 热心 : 0

虎年纪念勋章黑金实名  

QQ

发表于 2021-10-14 22:11 | 显示全部楼层
沙发!沙发!

发帖求助前要善用论坛搜索功能,那里可能会有你要找的答案;

移动宽带网络打不开网站解决方法:【更换其他运营商网络或者V.NP】

如何回报帮助你解决问题的吧友,一个好办法就是给对方加【好评】【仙豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

id UID : 10363

7Sh0y8N 等级 : 高级先客

hioC9EW 仙豆 : 7940

i7yRHRr 热心 : 0

虎年纪念勋章黑金实名  

QQ

发表于 2021-10-14 22:12 | 显示全部楼层
沙发!沙发!

发帖求助前要善用论坛搜索功能,那里可能会有你要找的答案;

移动宽带网络打不开网站解决方法:【更换其他运营商网络或者V.NP】

如何回报帮助你解决问题的吧友,一个好办法就是给对方加【好评】【仙豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

id UID : 10234

7Sh0y8N 等级 : 职业先客

hioC9EW 仙豆 : 14557

i7yRHRr 热心 : 0

虎年纪念勋章黑金实名夜猫之王重铸荣光新星之火 国庆节纪念勋章  

QQ

发表于 2021-10-14 22:12 | 显示全部楼层
小手一抖,沙发到手!

发帖求助前要善用论坛搜索功能,那里可能会有你要找的答案;

移动宽带网络打不开网站解决方法:【更换其他运营商网络或者V.NP】

如何回报帮助你解决问题的吧友,一个好办法就是给对方加【好评】【仙豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

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

本版积分规则

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