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

原創 edsoki 2018-09-12 03:11

本次教程相對於以前版本的單頁製作教程的區別：
修復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,zzccoo,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,zzccoo,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. <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}--> 

效果圖如下：

單頁製作教程

 

可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. <div class="wp"> 
  11. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]--> 
  12. </div> 
  13.  
  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區域的代碼，之前X1.5的單頁教程裏面我們也講到過，可以在單頁的任意位置插入DIY區域，即：

  1. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]--> 

注意：如果一個頁面要插入多個DIY區域，注意修改上面DIY區域的編號ID，幾個DIY區域的ID編號不能相同。

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

  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.mutoulee.cn" target="_blank">體無完膚</a></li> 
  58.                     <li>網站：<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li> 
  59.                     <li>版權：Discuz! Rescue Centre</li> 
  60.                 </ul> 
  61.             </div> 
  62.         </div> 
  63.          
  64.     </div> 
  65.      
  66. </div> 
  67.  
  68. <!--{subtemplate common/footer}--> 

效果圖如下：

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

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

  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.            <p style="width:300px; margin:220px auto; text-align:center;">這裏是單頁正文內容區域</p> 
  17.              
  18.         </div> 
  19.     </div> 
  20.      
  21.         <div class="sd" style="float:left;"> 
  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.mutoulee.cn" target="_blank">體無完膚</a></li> 
  58.                     <li>網站：<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li> 
  59.                     <li>版權：Discuz! Rescue Centre</li> 
  60.                 </ul> 
  61.             </div> 
  62.         </div> 
  63.          
  64.     </div> 
  65.      
  66. </div> 
  67.  
  68. <!--{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.  
  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 emptyempty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=new">最新發布</a></li> 
  18.                                 <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=view">瀏覽排行</a></li> 
  19.                                 <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=comment">回覆排行</a></li> 
  20.                 <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=rate">評分排行</a></li> 
  21.                         </ul> 
  22.              
  23.            <p style="width:300px; margin:200px auto; text-align:center;">這裏是單頁正文內容區域</p> 
  24.              
  25.         </div> 
  26.     </div> 
  27.      
  28.         <div class="sd" style="float:left;"> 
  29.      
  30.         <div class="bm"> 
  31.             <div class="bm_h"> 
  32.                 <h2>公告欄</h2> 
  33.             </div> 
  34.             <div class="bm_c"> 
  35.                 <p class="xl xl2 cl" style="line-height:25px;"> 
  36.                     這裏可以放一些公告通知類的文字內容這裏可以放一些公告通知類的文字內容這裏可以放一些公告通知類的文字內容這裏可以放一些公告通知類的文字內容這裏可以放一些公告通知類的文字內容這裏可以放一些公告通知類的文字內容 
  37.                 </p> 
  38.             </div> 
  39.         </div> 
  40.          
  41.         <div class="bm"> 
  42.             <div class="bm_h"> 
  43.                 <h2>操作菜單</h2> 
  44.             </div> 
  45.             <div class="bm_c"> 
  46.                 <ul class="xl xl2 cl"> 
  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.                     <li><a href="#">測試菜單六</a></li> 
  53.                 </ul> 
  54.             </div> 
  55.         </div> 
  56.  
  57.          
  58.         <div class="bm"> 
  59.             <div class="bm_h"> 
  60.                 <h2>版權信息</h2> 
  61.             </div> 
  62.             <div class="bm_c" style="line-height:25px;"> 
  63.                 <ul> 
  64.                     <li>作者：<a href="http://www.mutoulee.cn" target="_blank">體無完膚</a></li> 
  65.                     <li>網站：<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li> 
  66.                     <li>版權：Discuz! Rescue Centre</li> 
  67.                 </ul> 
  68.             </div> 
  69.         </div> 
  70.          
  71.     </div> 
  72.      
  73. </div> 
  74.  
  75. <!--{subtemplate common/footer}--> 

注意觀察你會發現，選項卡這一部分跟X1.5一樣的，就是在模版的正文區域的div內增加一段代碼：

  1. <ul class="tb cl"> 
  2.                                 <li <!--{if emptyempty($_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> 

效果如下圖：

帶有標籤選項卡的單頁模版

另外還有單頁裏面的分頁（多頁）顯示，跟之前X1.5的單頁教程一樣，大家可參照X1.5的來做

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

不錯的DIY作品--2004賀歲大片

世紀蟲 2019-02-23 14:07:03

光電鼠標改裝成掃描儀

ypixunil 2019-02-22 15:34:21

DIY服務器該側重什麼？此貼適合您

mimi163 2019-02-22 14:19:43

Chakra Linux 簡介 原

無聊的學習者 2018-12-02 21:18:44

DIY服務器該側重什麼？此貼適合您

mimi163 2018-09-14 02:05:47

電腦DIY掃盲貼總目錄

guojianlin1985 2018-09-13 03:00:02

光電鼠標通過小軟件變成掃描儀

dengjieng 2018-09-12 04:48:29

WinPE DIY

warriornew 2018-09-12 04:21:04

DIY 老毛桃PE+360急救盤+CDlinux

yangcuiwen 2018-09-12 04:01:37

有沒有一種編輯器，讓我們能定製我們想要的一切？

DINGZHIDAREN 2018-09-12 03:22:21

定製商城+在線DIY編輯系統PHP源碼最新版本！！！

DINGZHIDAREN 2018-09-12 03:22:20

我的小服務器

nathanxu 2018-09-11 06:11:16

DIY強大的虛擬化環境-技術可行性部分

raohuilin 2018-09-11 05:40:34

DIY強大的虛擬化環境-前言與目錄

raohuilin 2018-09-11 05:40:33

DIY強大的虛擬化環境-組裝於測試部分-2.L5420主機

raohuilin 2018-09-11 05:40:16