Discuz! 單頁制作教程

首先,單頁包括該單頁的php文件和該單頁的模板(.htm)文件,比如:host.php、host.htm

單頁的php文件內(nèi)容如下:

<?php
require './source/class/class_core.php';//引入系統(tǒng)核心文件
$discuz = & discuz_core::instance();//以下代碼為創(chuàng)建及初始化對象
$discuz->cachelist = $cachelist;
$discuz->init();
include template('forum/about');//調(diào)用單頁模版文件
?>

這里需要注意的是,about為模板文件名,不需要加.htm擴展名,模板文件存放于自己當前風格目錄下的forum目錄,單頁的php文件存放于論壇根目錄。

php文件創(chuàng)建完畢,現(xiàn)在開始創(chuàng)建模版文件,基本代碼如下:

{subtemplate common/header}
<div id="pt" class="wp">
        <a href="index.php">首頁</a> &rsaquo; 關于我們
</div>
<style id="diy_style" type="text/css"></style>
<div id="ct" class="wp cl w">

        <div class="mn mw">
                <div class="content">
                              
                     這里是自己正文區(qū)域的代碼
                        
                </div>
        </div>
</div>

{subtemplate common/footer}

其中:
<a href="index.php" class="nvhm">$_G[setting][bbname]</a> &rsaquo; 關于我們這一行是單頁的路徑顯示,比如:首頁 ? 關于我們,{subtemplate common/header}、{subtemplate common/footer}分別為調(diào)用頁頭、頁尾模板,使得單頁風格與論壇保持一致。

至此,基本型單頁創(chuàng)建完畢。演示效果見:

http://www.prohui.com/about.php

以下為帶右邊側(cè)欄單頁模板

上面模板文件代碼是不帶邊欄的,現(xiàn)在講下帶邊欄的單頁模板文件代碼,如下:

{subtemplate common/header}
<div id="pt" class="wp"><a href="index.php" class="nvhm">$_G[setting][bbname]</a> &rsaquo; 會員風采</div>
<div id="ct" class="wp cl n">
        <div class="mn">
            <div class="bm">
                        <h1 class="mt">![](static/image/feed/profile.gif) 分類瀏覽</h1>
                        <div class="datalist" style="margin:10px 0;">
                
                               這里是正文區(qū)域代碼
                                
                        </div>
                </div>
        </div>

        <!--邊欄區(qū)域代碼開始-->
        <div id="psd" class="sd">

        <div class="bn">
                <p><strong>欄目名稱</p>
                <p><a href="#">邊欄菜單名稱</a></p>
                <p><a href="#">邊欄菜單名稱</a></p>
                <p><a href="#">邊欄菜單名稱</a></p>
        </div>

        <div class="bn">
                <p><strong>管理面板</strong></p>
                <p><a href="#">添加分類</a></p>
                <p><a href="#">管理分類</a></p>
                <p><a href="#">返回會員風采</a></p>
        </div>

        </div>
        <!--邊欄區(qū)域代碼結束-->
</div>

{subtemplate common/footer}

其中:邊欄區(qū)域代碼中,每個<div class="bn">區(qū)塊為一個邊欄菜單區(qū)域。

以下為帶右邊側(cè)欄且多頁選項卡切換

剛看看到論壇有站長問單頁中如何做那個多頁面選項卡切換,下面介紹下。

其實就是多了幾行代碼,都是DX系統(tǒng)自帶的,直接使用即可,在上面帶右側(cè)邊欄模板代碼的:

<h1 class="mt">
![](static/image/feed/profile.gif)
分類瀏覽
</h1>

這一行下面加入:

<ul class="tb cl">
                                <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=new">最新發(fā)布</a></li>
                                <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=view">瀏覽排行</a></li>
                                <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=comment">回復排行</a></li>
                <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="host.php?viewtype=rate">評分排行</a></li>
                        </ul>

解釋上面代碼,其中每個<li>標簽,就是一個選項卡,里面的超鏈接host.php?viewtype=new,這里的viewtype就是指定一個變量,并且指定值為new,點擊這個選項卡時候$_G[gp_viewtype]就會獲取到這個值,然后通過判斷$_G[gp_viewtype]的值,來選擇當前選項卡是否為焦點選項。

既然說到多頁,那么多個頁面如何做,思路可以有兩種,一種是建立多個單頁,包括多個php文件和多個模板文件,當然這種方法比較直接,但是比較麻煩,可以在同一個模板文件中判斷$_G[gp_viewtype]的值來選擇顯示不同的內(nèi)容,比如在正文區(qū)域中如下代碼:

<!--{if $_G[gp_viewtype] == 'new'}-->
這里顯示的是new選項卡下的內(nèi)容
<!--{elseif $_G[gp_viewtype] == 'view'}-->
這里顯示view選項卡下的內(nèi)容
<!--{elseif $_G[gp_viewtype] == 'comment'}-->
這里顯示comment選項卡下的內(nèi)容
<!--{/if}-->

這樣就實現(xiàn)了一個模版文件中多個頁面的效果。點擊不同選項卡,顯示不同內(nèi)容。

以下為可以DIY的單頁教程

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

只需要稍加改造,即可完成,如下:
將單頁php文件調(diào)用模板的那行代碼改成:

include template('diy:forum/host');

這樣就可以加載DIY模塊,然后在單頁模版中,添加DIY區(qū)域,如下:

<!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->

這就是一個DIY區(qū)域,如果要多個區(qū)域,則:

<!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->
<!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
<!--[diy=diy3]--><div id="diy3" class="area"></div><!--[/diy]-->

將里面diy1,diy2,diy3區(qū)分開來即可。

比如,在單頁模板代碼的<div id="pt" class="wp">這一個div層塊的上面或下面加:

<div class="wp">
        <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->
</div>

這樣就可以實現(xiàn)單頁DIY功能了,需要說明的是,模版中要在什么地方加DIY區(qū)域,根據(jù)自己需要,并不是固定死的,自己設計在哪,就在哪里加入。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,725評論 25 709
  • 轉(zhuǎn)載自cr180大神DiscuzX2.5完整目錄結構【source程序文件庫】 /source/admincp后臺...
    cndaqiang閱讀 1,006評論 1 2
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,033評論 4 61
  • 在路上走著走著,忽然發(fā)覺臉濕漉漉的,第一反應是下雨了,沒帶傘怎么辦??墒且惶ь^發(fā)現(xiàn)只是陰天沒下雨……原來是自己哭了...
    牧童貓貓閱讀 224評論 0 0
  • cocoapods報錯, 報錯, 報錯… OK,下面步入正題 在安裝CocoaPods之前,首先要在本地安裝好Ru...
    唐半仙丶閱讀 3,353評論 1 5

友情鏈接更多精彩內(nèi)容