DISCUZ 門戶主頁(yè) DIY 仿站初級(jí)詳細(xì)教程

道勤小編這幾年也扒了不少站。discuz 論壇的 Portal 門戶風(fēng)格其實(shí)算是最容易仿的了。其實(shí)很簡(jiǎn)單，把自己想仿的靜態(tài)頁(yè)面保存下來(lái)。然后做些簡(jiǎn)單的修改就成型了。

一、隨便找個(gè)你想仿的首頁(yè)。右鍵保存下來(lái)。

二、復(fù)制 Default 模板
1、為了不影響默認(rèn)風(fēng)格,首先我們復(fù)制一份默認(rèn)風(fēng)格見下圖：

2、到template\目下創(chuàng)建一個(gè)文件夾。名字自取，我這里就叫test1.

3、到模板管理里面新增一個(gè)模板。名字自取,路徑指定到剛才新建的文件夾.如下圖

4、設(shè)置好以后 編輯剛才復(fù)制出來(lái)的風(fēng)格,如下圖

5、設(shè)置好以后把這個(gè)風(fēng)格設(shè)置為默認(rèn)。

三、制作門戶模板
1、在剛才template\建立的test1文件夾下面創(chuàng)建2個(gè)文件夾分別命名為 common 和 portal。
2、到template\default\common下面復(fù)制 common.css head.htm和footer.html 粘貼到template\test1\common。
這里我們先不制作頭部和底部先用默認(rèn)的頭和底.
3、然后把你設(shè)計(jì)的靜態(tài)頁(yè)面命名為index.htm復(fù)制到\template\test1\portal下.
4、在論壇所在根目錄下創(chuàng)建一個(gè)名為test1的文件夾，最好和你的新增模板的文件夾名字一樣或者相似。只要自己方便識(shí)別就行.建立好之后 把你靜態(tài)頁(yè)面的 css文件 圖片文件 js文件等 全部復(fù)制到這個(gè)文件夾里面。

四、代碼改動(dòng)
1、首先把你的靜態(tài)頁(yè)面的以上和一下全部刪掉,包括body標(biāo)簽.
2、把這句代碼

<!--{subtemplate common/header}-->
<style id="diy_style" type="text/css"></style>

復(fù)制到文件最頂部，下面這段復(fù)制到最底部

<!--{subtemplate common/footer}-->

3、把你的CSS文件調(diào)用進(jìn)來(lái)，放到

下面就可以了，下面是我的，改好路徑就好了.這里應(yīng)該把CSS js全部調(diào)用進(jìn)來(lái).

<link href="test1/images/css.css" rel="stylesheet" type="text/css" />

4、保存好后刷新下門戶發(fā)現(xiàn)除了圖片基本框架都出來(lái)了。 圖片錯(cuò)誤是因?yàn)槁窂讲粚?duì)。把路徑全部改過(guò)來(lái)。

五、到此你的靜態(tài)網(wǎng)頁(yè)已經(jīng)轉(zhuǎn)換到DZ下了.下面開始添加框架和模塊.
1、首先把不帶CSS的標(biāo)簽替換成

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

diy1 要和他所包含的的DIV標(biāo)簽的ID保持一致,且具有唯一性.class="area"保持不變。比如下圖。飄紅的部分是替換的.如圖第二部分顯示所有的都是diy1這樣就錯(cuò)了.要保持唯一性.不能重復(fù)！

六、DIY頁(yè)面添加框架和模塊了
1、首先添加框架如下圖。 把所有框架的標(biāo)題全部去掉

2、添加模塊（自己想弄什么弄什么就可以了）

附錄：
第一種：門戶首頁(yè)模板（index.htm，保存于templatedefaultportal）

<!--{subtemplate common/header}-->
<style id="diy_style" type="text/css"></style>
這里可以隨意自定義代碼
<!--{subtemplate common/footer}-->

第二種：欄目模板（必須命名list_xx.htm，保存于templatedefaultportal），做好以后在欄目編輯里面選擇相應(yīng)模板，再就行DIY

<!--{subtemplate common/header}-->
<!--[name]欄目模板——欄目名稱自定義[/name]-->
<style id="diy_style" type="text/css"></style>
這里可以隨意自定義代碼
<!--{subtemplate common/footer}-->

第三種：專題模板（必須命名portal_topic_xx.htm，保存于templatedefaultportal），做好以后在專題添加或編輯中選擇相應(yīng)模板，選擇是否統(tǒng)一頁(yè)頭和頁(yè)尾，再DIY

<!--{subtemplate common/header}-->
<div id="pt" class="bm cl">
<!--{subtemplate common/simplesearchform}-->
<div class="z">
  <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a> <em>&rsaquo;</em> $topic[title]
</div>
</div>
<link id="style_css" rel="stylesheet" type="text/css" href="{STATICURL}topic/t1/style.css?{VERHASH}">
<style id="diy_style" type="text/css"></style>
<div id="widgets"></div>
這里可以隨意自定義代碼
<!--{subtemplate common/footer}-->

其中：

<div id="pt" class="bm cl">
<!--{subtemplate common/simplesearchform}-->
<div class="z">
<a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a> <em>&rsaquo;</em> $topic[title]
</div>
</div>

是位置和搜索框，可以刪除

其中自定義代碼部分需要DIY的地方使用下面代碼，注意代碼中的兩個(gè)diy1必須保持一致，并且同一個(gè)htm頁(yè)面中不得重復(fù)出現(xiàn)

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