久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

12345下一頁
返回列表 發帖
查看: 24147|回復: 49

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

 火

56

主題

1470

回帖

3萬

積分

管理員

貢獻
2076 點
金幣
1394 個
樓主
發表于 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}-->
復制代碼
效果如下：



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

可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}-->
復制代碼
效果如下：




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

帶有左側邊欄的單頁模版文件代碼：
  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;">
復制代碼
就是說只是左右對調一下。

演示效果如下：



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


帶有標簽選項卡的單頁模版：
  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>
復制代碼
效果如下：



此次教程整理結束。

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

使用道具 舉報

20

主題

131

回帖

254

積分

爐火純青

貢獻
0 點
金幣
38 個
沙發
發表于 2021-12-15 13:31:13 來自手機 | 只看Ta
學習學習
回復

使用道具 舉報

7

主題

25

回帖

41

積分

初學乍練

貢獻
0 點
金幣
6 個
板凳
發表于 2021-12-15 21:12:35 | 只看Ta
學習學習
回復

使用道具 舉報

20

主題

131

回帖

254

積分

爐火純青

貢獻
0 點
金幣
38 個
地板
發表于 2021-12-18 10:00:51 來自手機 | 只看Ta

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

使用道具 舉報

56

主題

1470

回帖

3萬

積分

管理員

貢獻
2076 點
金幣
1394 個
5#
 樓主| 發表于 2021-12-18 13:12:04 | 只看Ta
Xianger2120 發表于 2021-12-18 10:00
include template('forum/host');//調用單頁模版文件
如果調用的模板里面有加載其他數據，直接調用單頁模 ...

不知道你說什么
回復 贊

使用道具 舉報

5

主題

44

回帖

54

積分

應用開發者

貢獻
0 點
金幣
2 個
6#
發表于 2021-12-20 11:59:02 | 只看Ta
厲害厲害，dz我還是只摸到皮毛，向大佬學習
回復 贊

使用道具 舉報

11

主題

363

回帖

655

積分

自成一派

貢獻
2 點
金幣
191 個
7#
發表于 2021-12-20 20:26:04 | 只看Ta
感謝分享！
回復

使用道具 舉報

326

主題

1367

回帖

1886

積分

已臻大成

貢獻
13 點
金幣
8 個
8#
發表于 2021-12-21 20:00:02 來自手機 | 只看Ta
模板不錯
回復

使用道具 舉報

0

主題

41

回帖

59

積分

漸入佳境

貢獻
0 點
金幣
15 個
QQ
9#
發表于 2021-12-26 16:25:47 | 只看Ta
666666666666666666666
回復 贊

使用道具 舉報

4

主題

69

回帖

95

積分

漸入佳境

貢獻
1 點
金幣
15 個
10#
發表于 2021-12-26 22:03:03 | 只看Ta
這個很牛啊。學習一下
回復 贊

使用道具 舉報

您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規則

  • 關注公眾號
  • 有償服務微信
  • 有償服務QQ

手機版|小黑屋|Discuz! 官方交流社區 ( 皖ICP備16010102號 |皖公網安備34010302002376號 )|網站地圖|star

GMT+8, 2025-9-19 06:40 , Processed in 0.087284 second(s), 31 queries .

Powered by Discuz! W1.0 Licensed

Copyright © 2001-2025 Discuz! Team.

關燈 在本版發帖
有償服務QQ
有償服務微信
 返回頂部
快速回復 返回頂部 返回列表