教你discuz模板制作詳細(xì)步驟

《教你discuz模板制作詳細(xì)步驟》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、接觸Discuz!有一段時(shí)間了，使用的風(fēng)格都是別人的免費(fèi)品。一來(lái)自己的美工水平實(shí)在不行，二來(lái)網(wǎng)上很少有比較完整的模板制作教程。因?yàn)楣ぷ鞯男枰?，現(xiàn)特寫(xiě)了一份模板的制作教程。小弟才疏學(xué)淺，不對(duì)之處還請(qǐng)指正。??模板制作前請(qǐng)將你的界面設(shè)計(jì)好，并制作成html+CSS的格式。這里我就以大魔王的“藍(lán)色經(jīng)典”作為樣版（知識(shí)共享，希望大魔王不要介意，如有侵權(quán)，請(qǐng)及時(shí)通知我）。效果圖如下：（圖1)在開(kāi)始前，先了介紹一下discuz!的幾個(gè)模板文件：1、??????header.htm------------------------

2、--------------頁(yè)面頭部2、??????discus.htm---------------------------------------------------------------論壇首頁(yè)3、??????footer.htm---------------------------------------------------------------頁(yè)面底部4、??????viewthread------------------------------------------------------

3、--------查看帖子內(nèi)容discuz！論壇的頁(yè)面通常是幾個(gè)模板文件共同作用下達(dá)到的效果，如圖1就是header.htm+discus.htm+footer.htm這三個(gè)文件共同作用的效果。Heaer.htm對(duì)應(yīng)的是：（圖2）Footer.htm對(duì)應(yīng)的是：（圖3）剩下的就是discuz.htm文件顯示的了。當(dāng)然你要將首頁(yè)顯示的效果就制作成一個(gè)文件模板也是可以的，這里之所以分開(kāi)，是因?yàn)閔eader.htm和footer.hmt文件通常還會(huì)被其它的模版文件引用。也就是說(shuō)，其它的頁(yè)面（比如發(fā)貼的頁(yè)面）的頭部、底部與首頁(yè)

4、的頭部、底部完全一樣，分開(kāi)來(lái)寫(xiě)就可以達(dá)到重復(fù)利用，減少勞動(dòng)的效果。下面我們就開(kāi)始制作：首先，現(xiàn)在我要制作的這套模板叫test，那么我就在templates目錄下建立一個(gè)test目錄。在test目錄下再新建一個(gè)images文件夾用于存放這套模板的圖片，把切好的所有圖片保存到這個(gè)文件夾中。templates/test文件夾用于存放這套模板的htm文件，在這個(gè)目錄中新建三個(gè)文件header.htm、discuz.htm、footer.htm，打開(kāi)你設(shè)計(jì)好的主頁(yè)html文件，將你想作為頭部的那一段代碼復(fù)制粘貼到header

5、.htm文件中，相應(yīng)的將作為底部的那一段代碼復(fù)制粘貼到footer.htm文件中，其余的代碼復(fù)制粘貼到discuz.htm文件中。最后在discuz.htm文件的最頂部和最底部分別加上：{subtemplateheader}和{subtemplatefooter}這兩句算是discuz的語(yǔ)言，意思是將header.htm和footer.htm文件包含進(jìn)來(lái)，這樣就構(gòu)成了一個(gè)完整的主頁(yè)面了。接下來(lái)的工作要在論壇后臺(tái)設(shè)置中來(lái)完成（1）??????進(jìn)入論壇點(diǎn)擊“系統(tǒng)設(shè)置——>界面——>模板管理”，在新增模板后填入模板名稱(chēng)，

6、模板文件所在目錄，板權(quán)信息然后提交即可！如圖4：（圖4）（2）??????在“界面——>風(fēng)格管理”中，在新增界面風(fēng)格后填入方案名稱(chēng)“test”然后提交即可?。?）??????提交方案名稱(chēng)后，您就可以在界面風(fēng)格中看到您所定義的新的風(fēng)格方案。如下圖：（圖5）注意上面用紅色圓圈圈起來(lái)的那幅模版預(yù)覽圖，你的是不是沒(méi)有顯示出來(lái)？這需要將你的首頁(yè)的效果圖做成110x120并命名為preview.jpg，將這圖片放到test目錄下就可以了。到此，一套新的風(fēng)格模板方案就添加到模板庫(kù)里了，但還不是我們需要的最終效果，接下來(lái)要對(duì)模板文

7、件繼續(xù)進(jìn)行調(diào)整，以達(dá)到想要的最終效果（4）??????點(diǎn)擊[編輯]后就可以進(jìn)入該模板的風(fēng)格配色方案的編輯頁(yè)面，按照?qǐng)D6把各個(gè)對(duì)應(yīng)參數(shù)填入相應(yīng)位置。（圖6）填寫(xiě)好后，點(diǎn)擊“提交”，更新一下緩存，瀏覽論壇首頁(yè)出現(xiàn)下圖：（圖7）呵呵，有內(nèi)容出來(lái)了，可是排版上卻變得亂七八糟了，這是因?yàn)檫€沒(méi)有引入CSS文件。這時(shí)將原來(lái)設(shè)計(jì)好的CSS文件放到你模板目錄下（templates/test），并將它重命名為“css_append.htm”（注意：改后的文件名是css_append，后綴名是htm）。接著打開(kāi)header.htm文件，

8、找到你引入CSS文件的語(yǔ)句，這會(huì)因?yàn)橐氲恼Z(yǔ)句不同而不同，我這里是@importurl(css/style.css);將這個(gè)替換為：$rsshead$extrahead{subtemplatecss_script}這樣就可以將你的CSS文件引入了。進(jìn)入后臺(tái)更新一下緩存，現(xiàn)在的效果圖如下：（圖8）這樣