1、模板制作前請將你的界面設計好，并制作成html+CSS的格式。這里我就以大魔王的“藍色經典”作為樣版（知識共享，希望大魔王不要介意，如有侵權，請及時通知我）。效果圖如下：（圖 1）本文由 HYPERLINK 整理在開始前，先了介紹一下discuz!的幾個模板文件：1、header.htm頁面頭部2、discus.htm論壇首頁3、footer.htm頁面底部4、viewthread查看帖子內容discuz ！論壇的頁面通常是幾個模板文件共同作用下達到的效果，如圖1就是 header.htm+discus.htm+footer.htm這三個文件共同作用的效果。Heaer.htm對應的是：Foot

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

3、test文件夾用于存放這套模板的htm文件，在這個目錄中新 建三個文件header.htm、discuz.htm、footer.htm，打開你設計好的主頁html文件，將你 想作為頭部的那一段代碼復制粘貼到header.htm文件中，相應的將作為底部的那一段代碼復制粘貼到footer.htm文件中，其余的代碼復制粘貼到 discuz.htm 文件中。最后在discuz.htm文件的最頂部和最底部分別加上：subtemplate header和 subtemplate footer這兩句算是discuz的語言，意思是將header.htm和footer.htm文件包含進來，這樣就構 成了一個完整

4、的主頁面了。接下來的工作要在論壇后臺設置中來完成（1）進入論壇點擊“系統設置一一 界面一一 模板管理”，在新增模板后填入模板名稱，模板文件所在目錄，板權信息然后提交即可！如圖4：h：而而后疝ME（2）在“界面一一 風格管理”中，在新增界面風格后填入方案名稱“test”然 后提交即可！（3）提交方案名稱后，您就可以在界面風格中看到您所定義的新的風格方案。如 下圖：（圖5）本文由 HYPERLINK 整理注意上面用紅色圓圈圈起來的那幅模版預覽圖，你的是不是沒有顯示出來？這需要將你的首 頁的效果圖做成110 x120并命名為preview.jpg,將這圖片放到test目錄下就可以了。到 此，一套新的

5、風格模板方案就添加到模板庫里了，但還不是我們需要的最終效果，接下來要 對模板文件繼續進行調整，以達到想要的最終效果（4）點擊編輯后就可以進入該模板的風格配色方案的編輯頁面，按照圖6把 各個對應參數填入相應位置。Discuz!Control Panel爨面-r尊畀面府置iC8理 n哩導入rmnissis別做哩做畀面片秉足51界朋蜜名作：主驅有|testMSRX左技-I弗IW麻理陛溟目.百百奪局何一膺蜘版塊 Hl戶帖tTJMPls目蒙 isrrLriMGDiHj: ciWiriD（圖6）填寫好后，點擊“提交”，更新一下緩存，瀏覽論壇首頁出現下圖:if :UR Eh 心-SMi-i-33 Jf.-f

6、fJ電子宣掛Hfe奩停日. L Jpai M渤也gm M蘆kw - J E 府 & 呵呵，有內容出來了，可是排版上卻變得亂七八糟了，這是因為還沒有引入CSS文件。這時將原來設計好的CSS文件放到你模板目錄下(templates/test)，并將匕重命名為 “css_append.htm”(注意：改后的文件名是 css_append，后綴名是htm)。接著打開 header.htm文件，找到你引入CSS文件的語句，這會因為引入的語句不同而不同，我這里 是style type=text/cssimport url(css/style.css);/style 將這個替換為： $rsshead $ex

7、trahead subtemplate css_script這樣就可以將你的CSS文件引入了。進入后臺更新一下緩存，現在的效果圖如下：（圖8）這樣就整齊了許多，這時你是不是發覺少了點東西？沒錯，圖片沒有顯視出來。下面我們先 將背景圖(也就是CSS文件中引入的圖片)顯示出來。打開css_append.htm文件，找到所 有你引入圖片的地方，將路徑替換為“STYLEIMGDIR”。例如：這里有一句： #footerpadding:1em 0;background:url(images/footer_bg.gif) 將它改為：#footerpadding:1em 0;background:url(S

8、TYLEIMGDIR/footer_bg.gif) repeat-x top; STYLEIMGDIR實際上是discuz的一個變量，當模板被解釋時，就會用一個值來替換這個變 量，這個變量的值可以在后臺設置。進入后臺后點擊“界面一一 風格管理”出現下圖：Discuz!三細i找到你正在制作的test風格，點擊“編輯”按鈕，出現下圖:Discuz!GcmiIidI Panel艮格曲IMH淪既蠟界血方器！ niJBQH!HIE砌可廉（Htifest曲比n芋（STTLLIMGDIRfr- |tnTpltn=/twEtyhwiflgE（圖 10）看到了吧，當模板被解釋時，就會用上面所填的路徑來替換這個變

9、量。好了，現在更新緩存再看一下效果：（圖 11）本文由 HYPERLINK 整理哈哈，和原來設計的效果圖一樣了，是否有一種成功的喜悅？雖然，到這里已經邁出了成功 的一步，但革命尚未成功，同志仍需努力！現在制作的模版是靜態的，也就是說就算你發貼 了，里面的內容也不會改變的，甚至你點個連接都會出錯的。下面我們就來讓它“動”起來。一、修改頭部文件header.htm1、打開正在制作的模板header.htm文件(以下簡稱header.htm)，以及默認模板 templatesdefault 的 header.htm 文件(以下簡稱“默認 header.htm”)。2、將 header.htm 文件的

10、標題用 $navtitle $bbname $seotitle 來代替。例如： 我這里是：“ 搜球論壇 ”改后就變成了“ $navtitle $bbname $seotitle ”3、看 header.htm 里是否有類似“ ”這樣 的語句，有就刪除。然后，將默認header.htm里的以下語句：復制粘貼到header.htm文件相應的位置(注這些對界面沒什么影響，但對SEO優化有幫助)4、將默認header.htm里的以下語句：var STYLEID = STYLEID, IMGDIR = IMGDIR, VERHASH = ,VERHASH, charset = $charset, dis

11、cuz_uid = $discuz_uid, cookiedomain =$cookiedomain, cookiepath = $cookiepath, attackevasive = $attackevasive, allowfloatwin = $allowfloatwin, creditnotice = if $creditnotice$creditnames/if, if in_array(CURSCRIPT, array(viewthread, forumdisplay)gid = parseInt($thisgid)elseif CURSCRIPT = indexgid = pa

12、rseInt($gid)elsegid =0/if, fid = parseInt($fid), tid = parseInt($tid) 復制粘貼到header.htm文件相應的位置（至于這些有什么作用，自己查一下吧）5、將頭部的logo“動”起來（圖 12）找到顯示logo的地方，我這里是： 搜球論壇 將“index.php”和“搜球論壇”分別用$indexname和$bbname代替（$indexname是首頁文 件名的變量，$bbname是論壇名稱變量，其它相同的地方都可以用這兩個變量作替換，以增 加模版的適應性。）6、讓登陸狀態“動”起來如崢ZF1C1J砌諂出值踵泊壇任勞空司叩人中心

13、系緩瞄（圖 13） 歡迎回來，zncai| 在線 | 退出| 短消息 論壇任務| 空間 個人中心 | 系統設置 上面是我設計的效果圖和相應的代碼，這是登陸時的顯示狀態，當然我還希望沒登陸的時候 、工 JAZ. t=r * 這樣顯示：(圖 14)在默認header.htm文件中找到：$discuz_usersslanglogin_invisible_modelanglogin_normal_mode|lang my_postslangspace_shortlang space_shorta href=pm.php id=pm_ntcclass=new title=lang pm_newtarge

14、t=_blanklangpm($_DCOOKIEpmnum)lang task|lang user_center 1lang modcplang admincplang logout$_DCOOKIEToginuserlang activationlang logout$reglinknamelang login用這一段代碼替換上面紅色黑體部份，并在的后面加上這一句：還是那句話，想知到上面代碼具體的意思，只能你自己去查找，我不可能一個一個的來解釋。7、讓菜單“動”起來娘壇柳囂拈。 險獎系說 天室奏摘血心潮（圖 15） 搜索 聊天室 競拍中心 幫助 導航 搜球網社區 在默認header.htm文

15、件中找到： 0 if(top = self) if ($_DCACHEsettingsframeon = 2 & !defined(CACHE_FILE) & in_array(CURSCRIPT, array(index, forumdisplay, viewthread) & ($_DCOOKIEframeon = yes & $_GETframeon !=no)|(empty($_DCOOKIEframeon) & empty($_GETframeon) top.location = frame.php?frameon=yes&referer=+escape(self.location)

16、; /if document.write( lang frameon_column); else document.write( lang frameon_flat); $navnav 0 & $moduleadminid = $adminid)-$moduleurl 0) | ($navlevel = 3 & $adminid = 1)-$navnav eval $mnid = $BASEFILENAME;eval$mnid=$navmng1;var currentMenu = $(mn_$mnid) ? $(mn_$mnid) : $(mn_$navmns0);currentMenu.pa

17、rentNode.className = ,current; function setstyle(styleid) str = unescape(echo str_replace(，urlencode($_SERVERQUERY_STRING);str = str.replace(/|&)styleid=d+/ig, );str = (str != ? str + & : ) + styleid= + styleid location.href = $BASESCRIPT? + str; $stylename 用這一段代碼替換上面紅色黑體部份，這樣就實現了菜單的調用。 到此整個頭部header

18、.htm文件模板就制作好了。二、制作首頁主體部分同樣打開正在制作的模板discuz.htm文件（以下簡稱discuz.htm），以及默認模板 templatesdefault 的 discuz.htm 文件（以下簡稱“默認 discuz.htm”）1、導航條|搜球論壇*首頁（圖 16）本文由 HYPERLINK 整理搜球論壇 首頁 “搜球論壇”和“首頁”分別用“$bbname”和“ lang home ”代替。2、版塊列表（圖 17）小葉 新手指南 新手指 南版主：a class=notabs href=space.php?username=yyshyysh/a/p2 / 2 我是 新手 yy

19、sh - 2009-6-25 17:03上面只列出了 “新手指南”區塊的代碼，其它區塊雷同就不再列出了。在默認discuz.htm文件中找到下面這段代碼：（綠色字體是我添加的注釋） /循環langforum_category_modedby:$catmoderators/如果有分區版主則顯示 /分區版塊的收縮與展開 $catname分區名稱 /這里有幾個變量，簡單來說是用于后臺控制的， 不用細究 /如果下級子版塊橫排數為0則按下面版式來顯示 版塊列表，橫排數可在后臺設置的 /循環語句，循環次數為此分區的子塊版塊數 $forumicon /版塊圖標$forumname /版塊轉向 URL，$fo

20、rumname版塊名稱 (lang index_today: $forumtodayposts) /如果今日發貼數不為0則顯示$forumdescription /版塊簡介lang forum_subforums: $forumsubforums 是否顯示子版塊 / 如果版主不為空 /版主以平面方式顯示lang forum_moderators: $forummoderators /否則版主以下拉菜單方式顯示lang forum_moderators$forummoderators N/A $forumthreads / $forumposts/ $forumthreads主題數，$forum

21、posts總發貼數 是否為私密版塊lang private_forumlang url_link /顯示最后發貼的信息echo cutstr($forumlastpostsubject, 30)$forumTastpostauthorlang anonymous-$forumlastpostdatelinelang never /從未發貼 /循環顯示版塊列表結束/如果下級子版塊橫排數不為0則按下面版式來顯示版塊列表，下面就不注 悉了，基體和上面是一樣的，只是顯示的方式不同而已 ! if $forumorderid $forumname (lang index_today: $forumtoda

22、yposts) lang forum_threads: $forumthreads, lang forum_posts: $forumpostslang private_forumlang forum_lastpost:$forumlastpostdatelinelang never lang url_link$catendrows/下面是關于廣告的一些代碼，不是重點，這里就不細究了 上面這段代碼便可以羅列出區塊和版塊，但該如何加入到我們制作的模塊中呢？首先將你設 計的顯示版塊列表的那些代碼全部清空，然后將上面這段添加到相應的位置。這樣就可以將 版塊列表顯示出來了，但很有可能顯示的內容是亂七八

23、糟的。這是因為，你加入這段代碼的 CSS類名和你原來的不一樣了，這就需要你在css_append.htm文件里重新定義CSS，以達到 你想要的效果。當然你可以發現上面這段代碼有些地方使用變量來作為CSS類名了，這是為 了能夠在后臺控制顯示的樣式。為了簡單，這里暫不細究，你只要將這些重新命名，在 css_append.htm文件里定義就行了。3、友情鏈接和在線會員0*.盤DihUJitl F AM 司 L 時帆mgMIE圭璋 ，A1tit - 1 - 空剝I 斗ElRt嵐口胃砌王心 QaftQfw（圖 18）顯示這兩塊的實現代碼也不少，這里不再列出來分析了，因為如果你能將上面的版塊列表弄 明白，

24、這兩塊也就自然自知怎樣處理了。4、數據調用數據調用就不能像之前那樣簡單地從默認模版那里拷貝、粘貼就可以了。這需要利用后臺才 行。在開始之前先看一下，我們要實現的效果（圖 19）這里顯示的內容是調用了 “我的助手”（“我的助手”屬于模塊腳本，而模塊腳本為數據調 用模塊的一種擴展，適用于懂得書寫PHP模塊腳本”，這里顯示了所在的模塊腳本。點擊“我的助手”后面的“添加”出現下圖，。數據調用。程序的程序員）。登陸后臺“工具S密學舉凱寸RAMJ!麗# IO粒眼遷用+邊它，SI亍.身新用白村值密好字用H境ir呻巨11避用mu再g*tn蛭陣|小土蝴郵1 jfrfc.hi fllj彳出iktllM用株如域律叫

25、坷事K爆嶺尋鞘狹L 1金舌說卜心航比止也髭虹：|ftSfrlliBRI 中I云I偵（圖 20）本文由 HYPERLINK 整理“模塊名稱”為必填項，其它的可以不填。點擊“預覽”按鈕，出現下圖:虹 1FE HET 酒*早riirtun謝9，皇恂睥利Aim柯甘n胃岳;n總撲m葉辯斗彰SFTfHSkjW i-o檔浴手，怡于中，n-mtft.FHu.USHipwsI奶*WtvW6*地胃心KW 野f 片 HlJL。月吧*Y-*W翼手11（圖 21）本文由 HYPERLINK 整理將“ eval request（小葉我的助手）； ”這句拷貝下來，并按“提交”按鈕；接著用 “eval request（小葉我

26、的助手）； ”這句替換相應的代碼。更新一下緩存再瀏覽主頁， 這時會發現，顯示的內容和格式與想要的結果不一樣。這是因為模塊腳本也用它自己的模版， 像“我的助手”的模塊腳本為“include/request/assistant.inc.php”文件，如果當前模 版文件夾中有request_assistant.htm文件，則“我的助手”使用當前的 request_assistant.htm文件作為模版，否則使用默認模版文件夾“templates/default/” 目錄下的request_assistant.htm文件作為模版。所以，如果你要實現你自己想要的形式就 要將默認模版文件夾template

27、s/default/”目錄下的request_assistant.htm文件復制 到當前模版文件夾中，并作相應的修改才行。如果要圖10的效果，可以參考大魔王的“藍 色經典”模版中的request_assistant.htm文件，值得注意的是，這個的CSS樣式同樣要在 css_append.htm 文件中定義。下面教大家另一種非模塊腳本數據調用，這種調用包括：主題列表、版塊列表、主題附件等 等。很多人喜歡在首頁將貼中的圖片以幻燈片的形式來顯示，這屬于主題附件調用，下面就 以這種調用來演示非模塊腳本的數據調用。先看一下，要實現的效果：睛II甬加膈雀聊W+ 柚（圖 22）images/ pic_1.

28、jpgredirect.php?goto=findpost&ptid=4&pid=12 我喜歡足球images/pic_2.jpgredirect.php?goto=findpost&ptid=3&pid=11 天下電競將你設計的顯示圖片幻燈片的javascript文件（我這里是photo_show.js）拷貝到當前制 作的模版文件夾下。主題附件”，將下面的代碼填到圖中所示的地方。添加。數據調用。登陸后臺“工具 nodeimgfilelinksubject/node（注：script language=javascript src= photo_show.js”這是你設計的 顯示圖片幻燈片的j

29、s文件，注意文件的路徑要正確。因為我將photo_show.js這個文件放 在了“templates/test/”目錄下，故 src=templates/test/photo_show.js。可能你設計 圖片幻燈片顯示的javascript程序并不單獨放在一個js文件中，而是嵌套在html文檔中。 這時，你就應該將你html文檔中的javascript程序來代替“script language=javascript src=templates/test/photo_show.js/script”。）填好后，點擊“預覽”按鈕，預覽一下效果。滿意后，將“evalrequest（小葉首頁幻燈 圖片）

30、； ”這句替換上面紅色黑體那部分代碼，這樣就實現了圖片的調用。下面分析一下其中的原理，“nodenode”可以將它看作一個循環結構， “imgfile”代表的是圖片的URL， link ”代表的是附件所屬帖的鏈接， “subject”代表的是附件所屬貼的主題標題，輸出的時候除了這些變量會變成相應的值 外，其它的都會原樣輸出，也就是說“evalrequest（小葉首頁幻燈圖片）； ”這個語句 在輸出的時候代碼結構與上面紅色黑體部分的代碼是一樣的。既然“ evalrequest（小葉 首頁幻燈圖片）； ”這個語句輸出的是你在數據調用編輯框中填寫的代碼，那么上面數據調 用編輯框中填寫的代碼就不是唯一的了。例如，你可以在數據調用編輯框中填寫以下代碼： nodeimgfilelinksubject/node當然