單頁制作教程 For Discuz!X2（DIY/左右邊欄/標簽選項卡）

dashen

作者：體無完膚
首先，單頁包括該單頁的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}-->

復制代碼

效果如下：



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

可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>
   
10. 
    
11. <div class="wp">
    
12. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
    
13. </div>
    
14. 
    
15. 
    
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>
    
25. 
    
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>
   
3. 
   
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>
    
11. 
    
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>
    
50. 
    
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>
    
68. 
    
69. <!--{subtemplate common/footer}-->

復制代碼

效果如下：




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

帶有左側邊欄的單頁模版文件代碼：

1. <!--{subtemplate common/header}-->
   
2. <style id="diy_style" type="text/css"></style>
   
3. 
   
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>
    
11. 
    
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>
    
50. 
    
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>
    
68. 
    
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;">

復制代碼

就是說只是左右對調一下。

演示效果如下：



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


帶有標簽選項卡的單頁模版：

1. <!--{subtemplate common/header}-->
   
2. <style id="diy_style" type="text/css"></style>
   
3. 
   
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>
    
11. 
    
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>
    
57. 
    
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>
    
75. 
    
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>

復制代碼

效果如下：



此次教程整理結束。

游客，如果您要查看本帖隱藏內容請回復

Xianger2120

學習學習

CG小霸王

學習學習

Xianger2120

include template('forum/host');//調用單頁模版文件
如果調用的模板里面有加載其他數據，直接調用單頁模板不顯示頁面的數據，這個應該怎么加呢

dashen

Xianger2120 發表于 2021-12-18 10:00
include template('forum/host');//調用單頁模版文件
如果調用的模板里面有加載其他數據，直接調用單頁模 ...

不知道你說什么

玩慈利網

厲害厲害，dz我還是只摸到皮毛，向大佬學習

無名

感謝分享！

ysx24

模板不錯

xiongmao

666666666666666666666

bkevin0829

這個很牛啊。學習一下