教你Discuz模板制作詳細步驟

1、接觸 Discuz! 有一段時間了，使用的風格都是別人的免費品。一來自己的 美工 水平實在不行， 二來網(wǎng)上很少有比較完整的模板制作教程。 因為工作的需要， 現(xiàn)特寫了一份模板的制作教程。小弟才疏學淺，不對之處還請指正。模板制作前請將你的 界面設(shè)計 好，并制作成html+CSS 的格式。這里我就以 大魔王的“藍色經(jīng)典”作為樣版（知識共享，希望大魔王不要介意，如有侵權(quán)，請及時通知我）。效果圖如下：（圖 1）在開始前，先了介紹一下 discuz! 的幾個模板文件： 頁面頭部論壇首頁頁面底部viewthread 查看帖子內(nèi)容discuz ！ 論壇的頁面通常是幾個模板文件共同作用下達到的效果， 如圖 1

2、就是 +這三個文件共同作用的效果。對應(yīng)的是：（圖 2）對應(yīng)的是：3）剩下的就是文件顯示的了。當然你要將首頁顯示的效果就制作成一個文件模板也是可以的，這里之所以分開， 是因為和文件通常還會被其它的模版文件引用。 也就是說， 其它的頁面 （比如發(fā)貼的頁面）的頭部、底部與首頁的頭部、底部完全一樣，分開來寫就可以達到重復(fù)利用，減少勞動的效果。下面我們就開始制作：首先，現(xiàn)在我要制作的這套模板叫 test ，那么我就在 templates 目錄下建立一個 test 目錄。 在 test 目錄下再新建一個images 文件夾用于存放這套模板的圖片，把切好的所有圖片保存到這個文件夾中。 templates/t

3、est 文件夾用于存放這套模板的 htm 文件，在這個目錄中新建三個文件 、，打開你設(shè)計好的主頁html 文件，將你想作為頭部的那一段代碼復(fù)制粘貼到 文件中，相應(yīng)的將作為底部的那一段代碼復(fù)制粘貼到文件中， 其余的代碼復(fù)制粘貼到文件中。最后在文件的最頂部和最底部分別加上：subtemplate header和subtemplate footer這兩句算是discuz 的語言，意思是將和文件包含進來，這樣就構(gòu)成了一個完整的主頁面了。接下來的工作要在論壇后臺設(shè)置中來完成進入論壇點擊 “系統(tǒng)設(shè)置 界面 模板管理”，在新增模板后填入模板名稱， 模板文件所在目錄， 板權(quán)信息然后提交即可！ 如圖4：4）在“

4、界面 風格管理” 中， 在新增界面風格后填入方案名稱“ test ”然后提交即可！提交方案名稱后，您就可以在界面風格中看到您所定義的新的風格方案。如下圖：5）注意上面用紅色圓圈圈起來的那幅模版預(yù)覽圖， 你的是不是沒有顯示出來這需要將你的首頁的效果圖做成110 x120 并命名為， 將這 圖片放到 test 目錄下就可以了。 到此， 一套新的風格模板方案就添加到模板庫里了， 但還不是我們需要的最終效果， 接下來要對模板文件繼續(xù)進行調(diào)整，以達到想要的最終效果（ 4 ）點擊 編輯 后就可以進入該模板的風格 配色方案 的編輯頁面，按照圖 6 把各個對應(yīng)參數(shù)填入相應(yīng)位置。6）填寫好后，點擊“提交”，更新

5、一下緩存，瀏覽論壇首頁出現(xiàn)下圖：呵呵，有內(nèi)容出來了，可是排版上卻變得亂七八糟了，這是因為還沒有引入 CSS 文件。這時將原來設(shè)計好的 CSS文件放到你模板目錄下(templates/test ),并將它重命名為(注意：改后的文件名是css_append,后綴名是htm)。接著打開文件，找到你引入CSSt件的語句，這會因為引入的語句不同而不同，我這里是 import url(css/;將這個替換為：$rsshead $extraheadsubtemplate css_script這樣就可以將你而CSW件引入了。進入后臺更新一下緩存，現(xiàn)在的效果圖如下：這樣就整齊了許多， 這時你是不是發(fā)覺少了點東西

6、沒錯， 圖片沒有顯視出來。 下面我們先將背景圖(也就是css文件中引入的圖片)顯示出來。打開文件，找到所有你引入圖片的地方，將路徑替換為 STYLEIMGDIR)。例如：這里有一句：#footerpadding:1em 0;background:url(images/ 將它改為：#footerpadding:1em 0;background:url(STYLEIMGDIR/ repeat-x top;STYLEIMGDIR法際上是discuz的一個變量，當模板被解釋時，就會用一個值來替換這個變量，這個變量的值可以在后臺設(shè)置。進入后臺后點擊“界面 風格管理”出現(xiàn)下圖：找到你正在制作的 test

7、風格，點擊“編輯”按鈕，出現(xiàn)下圖：看到了吧，當模板被解釋時，就會用上面所填的路徑來替換這個變量。好了，現(xiàn)在更新緩存再看一下效果：哈哈， 和原來設(shè)計的效果圖一樣了， 是否有一種成功的喜悅雖然， 到這里已經(jīng)邁出了成功的一步， 但革命尚未成功， 同志仍需努力！ 現(xiàn)在制作的模版是靜態(tài)的， 也就是說就算你發(fā)貼了，里面的內(nèi)容也不會改變的，甚至你點個連接都會出錯的。下面我們就來讓它“動”起來。一、修改頭部文件打開正在制作的模板文件( 以下簡稱，以及默認模板templatesdefault的文件(以下簡稱“默認”)。將文件的標題用$navtitle $bbname$seotitle 來代替。例如：我這里是：“

8、 搜球論壇 ”改后就變成了“ $navtitle $bbname$seotitle ”看里是否有類似“ ”這樣的語句，有就刪除。然后，將默認里的以下語句：復(fù)制粘貼到文件相應(yīng)的位置(注這些對界面沒什么影響，但對SEO優(yōu)化有幫助)將默認里的以下語句：var STYLEID = STYLEID, IMGDIR = IMGDIR, VERHASH= VERHASH, charset = $charset, discuz_uid = $discuz_uid, cookiedomain = $cookiedomain, cookiepath = $cookiepath, attackevasive = $

9、attackevasive, allowfloatwin = $allowfloatwin, creditnotice = if$creditnotice$creditnames/if, if in_array(CURSCRIPT, array(viewthread, forumdisplay)gid = parseInt($thisgid)elseif CURSCRIPT = indexgid = parseInt($gid)elsegid = 0/if, fid = parseInt($fid), tid =parseInt（$tid） 復(fù)制粘貼到文件相應(yīng)的位置（至于這些有什么作用，自己查

10、一下吧） 5、將頭部的logo “動”起來（圖找到顯示logo的地方，我這里是：搜球論壇 將和“搜球論壇”分別用$indexname和$bbname（弋替（$indexname是首頁文件名的變量，$bbnamel1論壇名稱變量，其它相同的地方都可以用這兩個變量作替換，以增加模版的適應(yīng)性。）6、讓登陸狀態(tài)“動”起來（圖 13） 歡迎回來，zncai| 在線 | 退出 |a href= id=pm_ntc target=_blank 短消息 a id=task_ntc href= target=_blank論壇任務(wù) |a href= target=_blank 空間 a href= 個人中心 |

11、系統(tǒng)設(shè)置 上面是我設(shè)計的效果圖和相應(yīng)的代碼，這是登陸時的顯示狀態(tài)，當然我還希望沒登陸的時候這樣顯示：(圖 14)在默認文件中找到：$discuz_usersslang login_invisible_modelang login_normal_mode|lang my_postslang space_shortlang space_shorta href= id=pm_ntc class=new title=lang pm_new target=_blanklang pm($_DCOOKIEpmnum)lang task|lang user_center 1-lang modcplang ad

12、mincplang logout$_DCOOKIEloginuserlang activationlang logout$reglinknamelang login用這一段代碼替換上面紅色黑體部份，并在的后面加上這一句：還是那句話，想知到上面代碼具體的意思，只能你自己去查找，我不可能一個一個的來解釋。7、讓菜單“動”起來（圖 15） 論壇搜索 插件抽獎系統(tǒng) 聊天室 競拍中心 幫助導(dǎo)航 搜球網(wǎng)社 區(qū) 在默認文件中找到： 0-if(top = self) if ($_DCACHEsettingsframeon = 2 &!defined(CACHE_FILE) & in_array(CURSCRI

13、PT, array(index, forumdisplay, viewthread) & ($_DCOOKIEframeon = yes & $_GETframeon != no) | (empty($_DCOOKIEframeon) & empty($_GETframeon) =frameon=yes&referer=+escape; /if(lang frameon_column); else(lang frameon_flat); $navnav 0 & $moduleadminid =$adminid)-$moduleurl 0) | ($navlevel = 3 &$adminid

14、= 1)-$navnaveval $mnid = $BASEFILENAME;eval $mnid = $navmng1;var currentMenu = $(mn_$mnid) $(mn_$mnid): $(mn_$navmns0);=current; function setstyle(styleid) str = unescape(echo str_replace(，, urlencode($_SERVERQUERY_STRING);str = (/(A|&)styleid=d+/ig, );str = (str != str + & : ) + styleid= + styleid=

15、$BASESCRIPT + str;$stylename用這一段代碼替換上面紅色黑體部份，這樣就實現(xiàn)了菜單的調(diào)用。到此整個頭部文件模板就制作好了。、制作首頁主體部分同樣打開正在制作的模板文件（以下簡稱，以及默認模板templatesdefault 的文件（以下簡稱“默認”）導(dǎo)航條（圖 16） 搜球論壇 首頁 “搜球論壇”和“首頁”分別用“ $bbname和“l(fā)ang home ”代替版塊列表（圖 17） 小葉 新手指南 新手指南版主：yysh2 /2我是新手yysh - 2009-6-25 17:03上面只列出了“新手指南”區(qū)塊的代碼，其它區(qū)塊雷同就不再列出了。在默認文件中找到下面這段代碼：(

16、綠色字體是我添加的注釋) catfid/ 這里有幾個變量，簡單來說是用于后臺控制的，不用細究/ 如果下級子版塊橫排數(shù)為 0則按下面版式來顯示版塊列表，橫排數(shù)可在后臺設(shè)置的/ 循環(huán)語句，循環(huán)次數(shù)為此分區(qū)的子塊版塊數(shù) $forumicon/ 版塊圖標$forumname / 版塊轉(zhuǎn)向 URL ， $forumname 版塊名稱 (lang index_today: $forumtodayposts)/ 如果今日發(fā)貼數(shù)不為 0 則顯示$forumdescription/ 版塊簡介lang forum_subforums: $forumsubforums/ 是否顯示子版塊/ 如果版主不為空/ 版主以平

17、面方式顯示lang forum_moderators: $forummoderators/ 否則版主以下拉菜單方式顯示lang forum_moderators$forummoderators N/A $forumthreads / $forumposts/ $forumthreads 主題數(shù)，$forumposts總發(fā)貼數(shù)/ 是否為私密版塊lang private_forumlang url_link/ 顯示最后發(fā)貼的信息echo cutstr($forumlastpostsubject, 30)$forumlastpostauthorlang anonymous-$forumlastpos

18、tdatelinelang never / 從未發(fā)貼/循環(huán)顯示版塊列表結(jié)束/如果下級子版塊橫排數(shù)不為0則按下面版式來顯示版塊列表,下面就不注悉了，基體和上面是一樣的，只是顯示的方式不同而已!-if $forumorderid $forumname (lang index_today:$forumtodayposts)lang forum_threads: $forumthreads, langforum_posts: $forumpostslang private_forumlang forum_lastpost:$forumlastpostdatelinelang neverlang url

19、_link$catendrows/ 下面是關(guān)于廣告的一些代碼，不是重點，這里就不細究了上面這段代碼便可以羅列出區(qū)塊和版塊，但該如何加入到我們制作的模塊中呢首先將你設(shè)計的顯示版塊列表的那些代碼全部清空，然后將上面這段添加到相應(yīng)的位置。這樣就可以將版塊列表顯示出來了， 但很有可能顯示的內(nèi)容是亂七八糟的。這是因為，你加入這段代碼的CS砥名和你原來的不一樣了，這就需要你在文件里重新定義CSS以達到你想要的效果。當然你可以發(fā)現(xiàn)上面這段代碼有些地方使用變量來作為cssa名了，這是為了能夠 在后臺控制顯示的樣式。為了簡單，這里暫不細究，你只要將這些重新命名，在文件里定義就行了。友情鏈接和在線會員（圖 18）

20、顯示這兩塊的實現(xiàn)代碼也不少，這里不再列出來分析了，因為如果你能將上面的 版塊列表弄明白，這兩塊也就自然自知怎樣處理了。數(shù)據(jù)調(diào)用數(shù)據(jù)調(diào)用就不能像之前那樣簡單地從默認模版那里拷貝、粘貼就可以了。這需要利用后臺才行。在開始之前先看一下，我們要實現(xiàn)的效果（圖 19）模塊腳本”，這里顯示了所在的模塊腳本。點擊“我的助手”后面的“添加”出 現(xiàn)下圖，數(shù)據(jù)調(diào)用 這里顯示的內(nèi)容是調(diào)用了 “我的助手”(“我的助手”屬于模塊腳本，而模塊腳本為數(shù)據(jù)調(diào)用模塊的一種擴展，適用于懂得書寫PHP程序的程序員)。登陸后臺“工具（圖 20）“模塊名稱”為必填項，其它的可以不填。點擊“預(yù)覽”按鈕，出現(xiàn)下圖:21）將“ eval r

21、equest（ 小葉 _我的助手 ）; ”這句拷貝下來，并按“提交”按鈕；接著用“ eval request（ 小葉_我的助手）; ”這句替換相應(yīng)的代碼。 更新一下緩存再瀏覽主頁， 這時會發(fā)現(xiàn)， 顯示的內(nèi)容和格式與想要的結(jié)果不一樣。 這是因為模 塊腳本也用它自己的模版，像“我的助手”的模塊腳本為“ include/request/ 文件，如果當前模版文件夾 中有文件，則“我的助手”使用當前的文件作為模版，否則使用默認模版文件夾“ templates/default/ ”目錄下的文件作為模版。所以，如果你要實現(xiàn)你自己想要的 形式就要將默認模版文件夾“ templates/default/ ”目錄

22、下的文件復(fù)制到當前模版文件夾中，并作相應(yīng)的修改才行。如果要圖 10 的效果，可以參考大魔王的“藍色經(jīng)典”模版中的文件，值得注意的是，這個的 CSS樣式同樣要在文件中定義。下面教大家另一種非模塊腳本數(shù)據(jù)調(diào)用，這種調(diào)用包括：主題列表、版塊列表、主題附件等等。 很多人喜歡在首頁將貼中的圖片以幻燈片的形式來顯示， 這屬于主題附件調(diào)用， 下面就以這種調(diào)用來演示非模塊腳本的數(shù)據(jù)調(diào)用。 先看一下， 要實現(xiàn)的效果：（圖 22）images/goto=findpost&ptid=4&pid=12 我喜歡足球images/goto=findpost&ptid=3&pid=11 天下電競將你設(shè)計的顯示圖片幻燈片的

23、javascript 文件（我這里是）拷貝到當前制作的模版文件夾 下。主題附件”，將下面的代碼填到圖中所示的地方添加 數(shù)據(jù)調(diào)用 登陸后臺“工具 nodeimgfilelinksubject /nodescript language=javascript src=templates/test/(注：script language=javascript src= 這是你設(shè)計的顯示圖片幻燈片的js文件，注意文件的路徑要正確。因為我將這個文件放在了 “ templates/test/ 目錄下，故src=templates/test /?？赡苣阍O(shè)計圖片幻燈片顯示的javascript程序并不單獨放在一個

24、js文件中，而是嵌套在html文檔中。這時，你就應(yīng)該將你html文檔中的javascript程序來代替“script language=javascriptsrc=templates/test/ 。 )填好后，點擊“預(yù)覽”按鈕，預(yù)覽一下效果。滿意后，將“ evalrequest。小葉_首頁幻燈圖片); 這句替換上面紅色黑體那部分代碼，這樣就實現(xiàn)了圖片的調(diào)用。下面分析一下其中的原理，”node node ”可以將它看作一個循環(huán)結(jié)構(gòu)，“img巾le ”代表的是圖片的URL “l(fā)ink ”代表的是附件所屬帖的鏈接，“subject ”代表的是附件所屬貼的主題標題，輸出的時候除了這些變量會變成相應(yīng)的值

25、 外，其它的都會原樣輸出，也就是說“eval request。小葉_首頁幻燈圖片); “這個語句在輸出的時候代碼結(jié)構(gòu)與上面紅色黑體部分的代碼是一樣的。既然“ eval request。小葉_首頁幻燈圖片); 這個語句輸出的是你在數(shù)據(jù)調(diào)用編輯框中填寫的代碼，那么上面數(shù) 據(jù)調(diào)用編輯框中填寫的代碼就不是唯一的了。例如，你可以在數(shù)據(jù)調(diào)用編輯框中填寫以下代碼：nodeimgfilelinksubject /node當然這時你就應(yīng)該用“ eval request。小葉 _首頁幻夕T圖片); 這個語句代替你模版文件中的這段代碼：images/goto=findpost&ptid=4&pid=12我喜歡足球images/goto=findpo