Discuz x2.5单页制作的教程

原文链接：http://www.zhanhelp.com/thread-5697-1-1.html

Discuz单页的制作其实还是很简单的，之前也有很多版本的单页制作的教程，今天这里主要讲Discuz x2.5 单页的制作，包括单页的DIY，选项卡页面的制作等。

单页包括该单页的php文件和该单页的模板（.htm）文件，比如：news.php、news.htm。查看最新20新帖/回复 X2/X2.5 插件就是使用单页制作的，演示效果：http://www.zhanhelp.com/news.php，大家可以下载使用并且体验下。

站帮网发布的关于我们插件也是根据单页的教程制作的，只是结合dz插件机制做成插件了。

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

一、单页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. ?>

复制代码

单页的php文件存放于论坛根目录。
注意：news为模板文件名，不需要加.htm扩展名，模板文件存放于默认风格目录下的forum目录。此处如果不理解可以看看Discuz!模板解析语法。

二、单页模板文件news.htm的创建。

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>&raquo;</em>
   
5.                 <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</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>&raquo;</em>
   
5.                 <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</em>
   
6.                 <a href="javascript:;">$navtitle</a>
   
7.         </div>
   
8. </div>
   
9. 
   
10. <style id="diy_style" type="text/css"></style>
    
11. <div class="wp">
    
12. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
    
13. </div>
    
14. 
    
15. <div id="ct" class="wp cl">
    
16.         <div class="mn bm cl">
    
17.                 <div class="bm_c">
    
18.         
    
19.                 <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p>
    
20.                         
    
21.                 </div>
    
22.         </div>
    
23. </div>
    
24. 
    
25. <!--{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. 
   
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. 
    
11. <div id="ct" class="wp cl ct2">
    
12.         <div class="mn bm cl">
    
13.             <div class="bm_h">标题栏</div>
    
14.                 <div class="bm_c">
    
15.                
    
16.            <p style="width:300px; margin:220px auto; text-align:center;">这里是单页正文内容区域</p>
    
17.             
    
18.                 </div>
    
19.         </div>
    
20.    
    
21.             <div class="sd">
    
22.    
    
23.             <div class="bm">
    
24.                         <div class="bm_h">
    
25.                                 <h2>公告栏</h2>
    
26.                         </div>
    
27.                         <div class="bm_c">
    
28.                                 <p class="xl xl2 cl" style="line-height:25px;">
    
29.                         这里可以放一些公告通知类的文字内容
    
30.                                 </p>
    
31.                         </div>
    
32.                 </div>
    
33.         
    
34.         <div class="bm">
    
35.                         <div class="bm_h">
    
36.                                 <h2>操作菜单</h2>
    
37.                         </div>
    
38.                         <div class="bm_c">
    
39.                                 <ul class="xl xl2 cl">
    
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.                     <li><a href="#">测试菜单六</a></li>
    
46.                                 </ul>
    
47.                         </div>
    
48.                 </div>
    
49. 
    
50.         
    
51.         <div class="bm">
    
52.                         <div class="bm_h">
    
53.                                 <h2>版权信息</h2>
    
54.                         </div>
    
55.                         <div class="bm_c" style="line-height:25px;">
    
56.                                 <ul>
    
57.                         <li>作者：<a href="http://www.zhanhelp.com/" target="_blank">ARCHY</a></li>
    
58.                     <li>网站：<a href="http://www.zhanhelp.com/" target="_blank">站帮网</a></li>
    
59.                     <li>版权：站帮网</li>
    
60.                                 </ul>
    
61.                         </div>
    
62.                 </div>
    
63.         
    
64.     </div>
    
65.    
    
66. </div>
    
67. 
    
68. <!--{subtemplate common/footer}-->

复制代码

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

本帖隐藏的内容

1. <!--{subtemplate common/header}-->
   
2. 
   
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. 
    
11. <div id="ct" class="wp cl ct2">
    
12.         <div class="mn bm cl" style="float:right;">
    
13.             <div class="bm_h">标题栏</div>
    
14.                 <div class="bm_c">
    
15.                
    
16.             <ul class="tb cl">
    
17.                                 <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=new">最新发布</a></li>
    
18.                                 <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=view">浏览排行</a></li>
    
19.                                 <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=comment">回复排行</a></li>
    
20.                 <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="news.php?viewtype=rate">评分排行</a></li>
    
21.                         </ul>
    
22. <div class="archy_con">
    
23. <!--{if $_G[gp_viewtype] == 'new'}-->
    
24. 这里显示的是new选项卡下的内容
    
25. <!--{elseif $_G[gp_viewtype] == 'view'}-->
    
26. 这里显示view选项卡下的内容
    
27. <!--{elseif $_G[gp_viewtype] == 'comment'}-->
    
28. 这里显示comment选项卡下的内容
    
29. <!--{/if}-->
    
30. </div>
    
31.                 </div>
    
32.         </div>
    
33.    
    
34.             <div class="sd" style="float:left;">
    
35.    
    
36.             <div class="bm">
    
37.                         <div class="bm_h">
    
38.                                 <h2>公告栏</h2>
    
39.                         </div>
    
40.                         <div class="bm_c">
    
41.                                 <p class="xl xl2 cl" style="line-height:25px;">
    
42.                         这里可以放一些公告通知类的文字内容这
    
43.                                 </p>
    
44.                         </div>
    
45.                 </div>
    
46.         
    
47.         <div class="bm">
    
48.                         <div class="bm_h">
    
49.                                 <h2>操作菜单</h2>
    
50.                         </div>
    
51.                         <div class="bm_c">
    
52.                                 <ul class="xl xl2 cl">
    
53.                         <li><a href="#">测试菜单一</a></li>
    
54.                     <li><a href="#">测试菜单二</a></li>
    
55.                     <li><a href="#">测试菜单三</a></li>
    
56.                     <li><a href="#">测试菜单四</a></li>
    
57.                     <li><a href="#">测试菜单五</a></li>
    
58.                     <li><a href="#">测试菜单六</a></li>
    
59.                                 </ul>
    
60.                         </div>
    
61.                 </div>
    
62. 
    
63.         
    
64.         <div class="bm">
    
65.                         <div class="bm_h">
    
66.                                 <h2>版权信息</h2>
    
67.                         </div>
    
68.                         <div class="bm_c" style="line-height:25px;">
    
69.                                 <ul>
    
70.                         <li>作者：<a href="http://www.zhanhelp.com/" target="_blank">站帮网</a></li>
    
71.                     <li>网站：<a href="http://www.zhanhelp.com/" target="_blank">站帮网</a></li>
    
72.                     <li>版权：站帮网</li>
    
73.                                 </ul>
    
74.                         </div>
    
75.                 </div>
    
76.         
    
77.     </div>
    
78.    
    
79. </div>
    
80. <!--{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}-->

复制代码

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

如果你喜欢做模版，可以看看：Discuz模板的制作方法；
如果你还不会安装模板，可以看看：Discuz模板的安装方法。